Silverlight初级教程-动画

2018-01-16 14:59:04 浏览数 (1)

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文件。

代码语言:js复制
        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
            //增加下边的代码
myStoryboard.Begin();
        }

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

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

0 人点赞