Question

如何在UWP中设置偏移路径？例如，使用CreateExpressionAnimation。

我有四个静态位置的图像，我需要其他图像来动画一次跳过这四个图像。

目前我正在使用CreateVector3KeyFrameAnimation并更改四个图像的偏移量，但我需要一个弧形效果。

Answer 1

这应该可以在故事板中使用3个时间轴 - 1个x轴平移，没有缓动持续动画的整个持续时间，然后2个y轴平移一个接一个地持续动画时间的一半，第一个一个使用CircleOut缓动（到弧的高度），然后使用CircleIn缓动（返回0）。

Answer 2

我用以下代码测试：

<Storyboard x:Name="ImageStoryboard">
    <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="ImageTransform"
        Storyboard.TargetProperty="X"
        Duration="0:0:12" 
        EnableDependentAnimation="True" 
        RepeatBehavior="Forever">

        <LinearDoubleKeyFrame Value="378" KeyTime="0:0:0"/>
        <LinearDoubleKeyFrame Value="549" KeyTime="0:0:3"/>
        <LinearDoubleKeyFrame Value="720" KeyTime="0:0:6"/>
        <LinearDoubleKeyFrame Value="890" KeyTime="0:0:9"/>
        <LinearDoubleKeyFrame Value="378" KeyTime="0:0:12"/>
    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="ImageTransform"
        Storyboard.TargetProperty="Y"
        Duration="0:0:3" 
        EnableDependentAnimation="True" 
        RepeatBehavior="Forever">

        <EasingDoubleKeyFrame Value="606" KeyTime="0:0:0">
            <EasingDoubleKeyFrame.EasingFunction>
                <CircleEase EasingMode="EaseOut" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>

        <EasingDoubleKeyFrame Value="500" KeyTime="0:0:1.5">
            <EasingDoubleKeyFrame.EasingFunction>
                <CircleEase EasingMode="EaseOut" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>

        <EasingDoubleKeyFrame Value="606" KeyTime="0:0:3">
            <EasingDoubleKeyFrame.EasingFunction>
                <CircleEase EasingMode="EaseIn" />
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<Image x:Name="Image" ...>
    <Image.RenderTransform>
        <TranslateTransform x:Name="ImageTransform" />
    </Image.RenderTransform>
</Image>

如何在UWP中设置偏移路径

2 个答案: