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