如何使用故事板获得流畅的动画

时间:2012-07-04 18:56:24

标签: c# wpf xaml animation behavior

我在一个Behavior中有一个动画,但它没有运行流体。

这是我的动画代码:

DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();

animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(0).(1)", UIElement.RenderTransformProperty, RotateTransform.AngleProperty));

int keyFrameCount = 16;
double timeOffsetInSeconds = 0.1;
int targetValue = 12;

double totalAnimationLength = keyFrameCount * timeOffsetInSeconds;
double repeatInterval = RepeatInterval;
bool isShaking = IsShaking;

// Can't be less than zero and pointless to be less than total length
if (repeatInterval < totalAnimationLength)
    repeatInterval = totalAnimationLength;

animation.Duration = new Duration(TimeSpan.FromSeconds(repeatInterval));

for (int i = 0; i < keyFrameCount; i++)
{
    animation.KeyFrames.Add(new LinearDoubleKeyFrame(i % 2 == 0 ? targetValue : -targetValue, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i * timeOffsetInSeconds))));
}

animation.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(totalAnimationLength))));

但是,如果我选择

int keyFrameCount = 360;

for (int i = 0; i < keyFrameCount; i++)
{
    animation.KeyFrames.Add(new LinearDoubleKeyFrame(i, keyTime.FromTimeSpan(TimeSpan.FromSeconds(i * timeOffsetInSeconds))));
}

它会旋转一个非常光滑的圆圈。

如何让动画从0度到30度,回到-30度, 然后回到0(让它在一点点左右抖动)并让它看起来流畅。

经过一些尝试,我看到(正常)来回不能在这里工作, 它表现得完全不受控制!

1 个答案:

答案 0 :(得分:2)

我不确定你为什么要自己做这么多的关键帧,但为了做到这一点

  

如何让动画从0到30度,回到-30度,然后回到0(让它在一点点左右抖动)并使它看起来流畅。

您可以将动画更改为

DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();

animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(0).(1)", UIElement.RenderTransformProperty, RotateTransform.AngleProperty));

var totalAnimationLength = 1600; // Milliseconds

double repeatInterval = 1600;// Milliseconds

if (repeatInterval < totalAnimationLength) repeatInterval = totalAnimationLength; // Can't be less than zero and pointless to be less than total length 

animation.Duration = new Duration(TimeSpan.FromMilliseconds(repeatInterval));
animation.RepeatBehavior = RepeatBehavior.Forever; // assuming this was intended from having a repeat interval?

animation.KeyFrames.Add(new LinearDoubleKeyFrame(30, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(totalAnimationLength * 0.25))));
animation.KeyFrames.Add(new LinearDoubleKeyFrame(-30, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(totalAnimationLength * 0.75))));
animation.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(totalAnimationLength))));