WPF Размахивая изображениями анимации

Question

Мне нужно создать во время выполнения серию изображений на экране, все эти изображения представляют собой буквы алфавита (PNG, 32x32), эти изображения должны выглядеть так, как будто они «машут» вверх и вниз и слегка вращаются. (Почти как мексиканская волна)

Проблема заключается в том, что изображения не все добавляются одно за другим при запуске, а скорее, когда пользователь нажимает клавиши на клавиатуре.

Например, у меня может быть буква «A» (так что A.png) на экране, я хочу анимировать ее так, чтобы она вращалась от 0 до 20 через 1 секунду и от 20 до -20 через 2 секунды и вернуться к 0 через 1 секунду.

Это я могу не беспокоиться.

Но когда пользователи нажимают другую клавишу на клавиатуре (например, «L»), я хочу добавить «L» к волне с правым смещением и повернуть к «A», чтобы она выглядела как хорошая волна .

На данный момент у меня есть эта анимация (которая, как я знаю, неверна, а также она определена в XAML, которую я не могу на самом деле сделать, потому что это основанная на времени выполнения вещь)

<Storyboard x:Key="Storyboard1" AutoReverse="False" RepeatBehavior="Forever">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0,0,0.7,1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="20" KeySpline="0,0,0.7,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:03" Value="-20" KeySpline="0.17,0,0.6,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:04" Value="0" KeySpline="0.16,0,1,1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-20" KeySpline="0,0,0.7,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:03" Value="20" KeySpline="0.17,0,0.6,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:04" Value="0" KeySpline="0.16,0,1,1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
            <SplineDoubleKeyFrame KeyTime="00:00:01.2600000" Value="20" KeySpline="0,0,0.7,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:03.2600000" Value="-20" KeySpline="0.17,0,0.6,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:04.2600000" Value="-5" KeySpline="0.16,0,1,1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
            <SplineDoubleKeyFrame KeyTime="00:00:01.2600000" Value="-20" KeySpline="0,0,0.7,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:03.2600000" Value="20" KeySpline="0.17,0,0.6,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:04.2600000" Value="5" KeySpline="0.16,0,1,1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
            <SplineDoubleKeyFrame KeyTime="00:00:01.5200000" Value="20" KeySpline="0,0,0.7,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:03.5200000" Value="-20" KeySpline="0.17,0,0.6,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:04.5200000" Value="-10" KeySpline="0.16,0,1,1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
            <SplineDoubleKeyFrame KeyTime="00:00:01.5200000" Value="-20" KeySpline="0,0,0.7,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:03.5200000" Value="20" KeySpline="0.17,0,0.6,1"/>
            <SplineDoubleKeyFrame KeyTime="00:00:04.5200000" Value="10" KeySpline="0.16,0,1,1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

Так что любая помощь здесь будет принята с благодарностью!

Cheers, Mark

Answer 1

Вам нужно подойти к проблеме в C #, а не в XAML. Анимации определяются с использованием одноименных классов.

Подход, который вы можете рассмотреть, это поместить StackPanel с горизонтальным позиционированием. Когда пользователь вводит букву, вам нужно выполнить несколько шагов:

• Добавьте Image к StackPanel, содержащему новую букву.
• Создайте последовательность анимаций, одну Storyboard, которая будет выполнять одну последовательность волны.

Создание анимации будет состоять из циклического прохождения каждого элемента управления в StackPanel.Children, создания правильного смещения на основе того, что это за элемент, и добавления его к Storyboard.

При добавлении нового письма вам нужно остановить предыдущую анимацию. Сохраните его в локальной переменной и остановите его соответствующим образом. Для плавного перехода к следующей букве вы можете завершить текущий «проход», а затем изменить RepeatBehavior, чтобы он больше не «навсегда». По завершении начните новую раскадровку с новым письмом.

// ... Once you've added a new letter ...
storyboard.RepeatBehavior = new RepeatBehavior(0);
storyboard.Completed += storyboardCompleted;

private void storyboardCompleted(object o, EventArgs e)
{
  // Stop the storyboard, and start your new storyboard.
}