如何在 UWP 中设置偏移路径

Question

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

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

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

Answer 1

故事板中的 3 个时间轴应该可以做到这一点 - 1 个 x-axis 没有缓动的翻译持续整个动画持续时间，然后 2 个 y-axis 一个接一个持续的翻译一半的动画时间，第一个使用 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 中设置偏移路径

How to set offset path in UWP

c#

uwp

uwp-xaml