如何在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>