WPF -- 构建动画

写在前面：本文代码摘自《Head First C#》

本文使用ObjectAnimationUsingKeyFrames + Storyboard构建一个动画。

ObjectAnimationUsingKeyFrames为关键帧动画，它允许为动画设置几个关键帧，其中每一帧为ObjectKeyFrame类型。ObjectKeyFrame为抽象类，实际使用的是DiscreteObjectKeyFrame，它是ObjectKeyFrame的派生类，表示目标是不连续变化的。ObjectAnimationUsingKeyFrames的KeyFrames属性即为关键帧集合。DiscreteObjectKeyFrame的Value属性为该帧的值，KeyTime属性为该帧的时间点信息。

Storyboard可执行一组动画，下面的示例代码只包含一个动画。其SetTarget方法指定执行动画的界面元素，SetTargetProperty方法指定该动画应用到该界面元素的哪个属性上。定义并设置好动画后，将动画添加到Storyboard的Children中。

RepeatBehavior属性表示动画的重复行为。取值为0代表不播放，取其它double值控制循环次数，取RepeatBehavior.Forever表示一直循环。AutoReverse属性表示是否以相反的动画方式从终止值返回起始值。

// 前台，UserControl标记的代码

    


// 后台代码
public sealed partial class AnimatedImage:UserControl
{
    // 使用xaml创建控件，必须有一个无参构造函数
    public AnimatedImage()
    {
        this.InitializeComponent();
    }

    publi AnimatedImage(IEnumerable imageNames, TimeSpan interval)
        :this()
    {
        StartAnimation(imageNames, interval);
    }

    public void StartAnimation(IEnumerable imageNames, 
        TimeSpan interval)
    {
        Storyboard storyboard = new Storyboard();
        ObjectAnimationUsingKeyFrames animation = 
            new ObjectAnimationUsingKeyFrames();
        storyboard.SetTarget(animation, image);
        storyboard.SetTargetProperty(animation, "Source");

        TimeSpan currentInterval = TimeSpan.FromMilliseconds(0);
        foreach(string imageName in imageNames)
        {
            ObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame();
            keyFrame.Value = CreateImageFromAssets(imageName);
            keyFrame.KeyTime = currentInterval;
            animation.KeyFrames.Add(keyFrame);
            currentInterval = currentInterval.Add(interval);
        }

        storyboard.RepeatBehavior = RepeatBehavior.Forever;
        storyboard.AutoReverse = true;
        storyboard.Children.Add(animation);
        storyboard.Begin();
    }

    private static BitmapImage CreateImageFromAssets(string imageFilename)
    {
        return new BitmapImage(new Uri("ms=appx:///Assets/" + imageFilename));
    }
}