Question

我需要在运行时在屏幕上创建一系列图像，这些图像都是字母表中的字母（PNG，32x32），这些图像必须看起来像上下“挥动”并稍微旋转一样。（几乎像墨西哥浪潮）

问题是图像并非在启动时一个接一个地添加，而是在用户按键盘上的键时添加。

例如，我可能在屏幕上有字母“A”（所以A.png），我想设置动画，使其在1秒后从0旋转到20，在2秒后从20到-20旋转再过1秒又回到0。

我不用担心。

但是当用户按下键盘上的另一个键（例如“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>

因此，非常感谢任何帮助！

干杯，标记

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.
}

WPF挥动图像动画

1 个答案: