Silverlight初级教程-动画

Silverlight初级教程

动画

在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。
silverlight中的动画是以“storyboard”的形式表现出来。“storyboard”你可以认为是flash中的时间轴。  flash中只有一个时间轴，而在silverlight中却可以有多个“storyboard”。
在flash中是有一个帧频的概念的，例每秒12帧、每秒30帧等。而在silverlight中则是完全的基于时间的，例完成一个动画所需的总共时间是10秒。
首先在舞台区域绘制一个圆形，我们将为他做一个移动的动画。  绘制好后调整颜色等属性。在“Objects and Timeline”面版中点击右侧的“+”这个按钮创建“storyboard”。

在弹出的提示框中选择默认选项起名“myStoryboard”。这个在后边控制动画的播放有用。

点击ok，这时大家所熟悉的时间轴出现了。现在的界面可能会有点挤，按“F6”进入动画编辑工作布局。

上图为新出现的时间轴。
这里有三个按钮需要记一下。一个是刚才提到的“+”（创建‘storyboard’），“×”（退出当前的‘storyboard’），最左边的（选择已有‘storyboard’进行编辑）。

下边开始制作动画。
选中刚才绘制的圆形。点击。这个操作就相当于flash中的插入关键帧。（区别：flash中默认第一帧为关键帧而blend中没有需要手动的创建一个）
点击后在时间轴上回出现一个白色的小点。

白色的小点上有一个黄色的线。这个和flash中的指针是同样的一个东西。
将黄线移动到“2”的位置，并再次点击，插入关键帧。
选中圆形向左拖动一段距离。

这里注意观察下面版。"0:02.000"，意思为这段动画用2秒的时间来播放。你也可以修改播放的时间，就在时间轴面版的下边有一个缩放时间轴百分比的地方。

你可以将数值调大，这样方便操作。
这里我调整为300。在“2”个位置选中小白点并向前拖拽到“0.5”位置。  好了这样完成这个动画就只需要0.5秒了。

选中第一个小白点。点击右侧属性栏。

这个和flash中的缓动是一样的。可以自己调整曲线。
切换到“拆分视图”用鼠标选中代码部分的“myStoryboard”。这时注意右边属性栏发生的变化。（经过我多次试验才找出了可视化设置Storyboard属性的方法）

有两个属性  “是否自动回放”以及“循环次数”。

好了点击“x”退出动画编辑状态。按“F6”还原界面布局。

做到这里只是建立好了“Storyboard”。其不会自动的去播放的。   要让“Storyboard”播放有两个方法。一个是在XAML中描述（比较复杂）。另一个就是一句代码就好象flash中的“_root.play()”一样。
在初级教程中就介绍简单的。
打开右边的project选项卡

用记事本（或你喜欢的任意一款文本编辑器）打开page.xaml.cs文件。

        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
            //增加下边的代码
            myStoryboard.Begin();
        }

编辑好后回到blend中   按“F5” 编译预览动画。


你也可以在做移动动画的同时试试改变圆形的颜色等属性。