如何在 UWP 中设置偏移路径

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>