Как установить путь смещения в UWP

Question

Как установить путь смещения в UWP? Например, с использованием CreateExpressionAnimation.

У меня есть четыре изображения со статическими позициями, и мне нужно другое изображение, чтобы перепрыгнуть через те четыре по времени с анимацией.

В настоящее время я использую CreateVector3KeyFrameAnimation и изменяю смещение на четырех изображениях, но мне нужен дуговой эффект.

Answer 1

Это должно быть возможно с 3-мя сроками в раскадровке - 1 оси х трансляции, без ослабления, который длится всю продолжительность анимации, а затем 2 у оси переводам один за другим каждый прочного половину времени анимации, сначала с использованием упрощения 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>