零基础学通Silverlight4（5）：动画

概述5.1 动画特性 通过动画可以创建动态的用户界面，可以不使用事件处理代码，而用声明的方式创建动画，使画面动起来不用编写任何C#代码，并将它无缝地集成到普通的页面中。动画由静态图像快速连续的变换的一种幻觉，各图形间轻微的不同，连串起来，就以为是产生了一个变化，通过快速播放一系列图像而产生的错觉。人脑将这一系列图像看作是一个不断变化的场景。在电影中，摄影机通过每秒记录大量照片（即，帧）来产生这种错觉。 5.1 动画特性 通过动画可以创建动态的用户界面，可以不使用事件处理代码，而用声明的方式创建动画，使画面动起来不用编写任何C#代码，并将它无缝地集成到普通的页面中。动画由静态图像快速连续的变换的一种幻觉，各图形间轻微的不同，连串起来，就以为是产生了一个变化，通过快速播放一系列图像而产生的错觉。人脑将这一系列图像看作是一个不断变化的场景。在电影中，摄影机通过每秒记录大量照片（即，帧）来产生这种错觉。当放映机播放这些帧时，观众看到的是运动的图片。 创建逐帧动画意味着每一帧都可以包含不同的图像（或对象）。所生成的动画可能会非常大，并且在运行时要占用大量资源。出于上述原因，Expression Blend 动画将基于记录属性更改的关键帧，并在运行时动态显示属性更改之间的过渡效果。此外，在 Expression Blend 中，所有需要在动画时间线期间显示或消失的对象在整个时间线期间均存在。但可以使用关键帧来更改对象的可见性属性，使其显示或消失。 动画类型分为两类： ①基本动画：可称为From/To/By动画，通过指定一个起始和终止值，或属性的一个偏移来定义动画，如上面的演示一样。动画类型有：DoubleAnimation、colorAnimation、PointAnimation ②关键帧动画：通过一系列关键帧指定的值之间运动。动画类型有：DoubleAnimationUsingKeyFrames、colorAnimationUsingKeyFrames、PointAnimationUsingKeyFrames 动画具有相似的属性，基本属性有： ①Duration：指定动画执行一次所需要的时间。默认值1秒。 ②autoReverse：动画播放结束时，是否向后播放。 ③RepeatBehavior：动画播放的次数。默认情况下，只会播放一次。该属性有三种可能：持续时间、重复次数、永远。 ④Storyboard.Targetname：指定为哪个图形对象设置动画。 ⑤Storyboard.TargetProperty：指定的图形元素的哪个属性应用动画。 ⑥FillBehavior：回归到起始位，如设置为Stop自动回归到起始位，默认值是HoldEnd，保持动画的位置于末尾不变。 ⑦EventTrigger对象：具有一系列行为的触发器。 ⑧BeginStoryboard对象：开始一个故事板中的动画。

 

基本 *** 作步骤： 1）Expression Blend 中，打开或新建一个项目。 2）按 F6 切换到"动画"工作区。（按 F6 可在可用的工作区之间切换。在"动画"工作区中，"对象和时间线"面板位于美工板的下方。）创建要动态显示的任何对象。对象是指 Expression Blend 中的美工板上的项目。例如，如果您从"工具"面板中选择"矩形"，并在美工板上绘制矩形，则会创建一个矩形对象。 3）在"对象和时间线"面板中，单击"新建"。此时，将显示"创建情节提要资源"对话框。 4）在"资源名(关键字)"字段中，键入时间线的名称，然后单击"确定"。Expression Blend 将进入时间线录制模式，并且播放指针  位于 0 秒标记处。当处于录制模式中时，所设置的任何属性都将在该时间线上自动记录一个关键帧。 5）在"对象和时间线"面板中，选择要动态显示的对象。 6）如果希望选定的对象从其当前位置和外观开始运行，请单击"记录关键帧"，以在 0 秒标记处记录该对象。将在与选定对象对应的行中的时间线上显示一个关键帧 。 7）在"对象和时间线"面板中，将播放指针拖动到动画的结束时间点处。 8）如果希望对象在动画结束和开始时的外观相同，请单击"记录关键帧"按钮。 9）将播放指针移到时间线上希望属性发生改变的位置处。 更改选定对象的属性，例如对象的位置、颜色或大小。时间线上将自动显示一个用于记录属性更改的关键帧。 10）若要查看刚才创建的动画，可单击"对象和时间线"顶部的"播放"按钮。 范例 滚动的球 创建一个来回滚动的球。 1 ）启动 Microsoft Expression Blend ，建 Silverlight 项目，并将其打开以供编辑。您现在即可在项目的主页 (MainPage.xaml) 中创建内容。 2 ）在 " 工具 " 面板中，选择其中椭圆形工具，如图图 11.3-1 。

图 11.3-1 3 ）美工板上，通过拖动鼠标在 MainPage.xaml 的设计界面中绘制一个椭圆，并在“属性面板”的布局中设置其下列属性，如图 11.3-2     Height=90 ， WIDth=300 ， strokeThickness=0

                如图 11.3-2 在按住 Shift 的同时进行拖动，可使高度和宽度保持相同。这样做可在绘制矩形时生成正方形，在绘制椭圆时生成圆形。 在按住 Alt 的同时进行拖动，可将点击的第一个点作为中心点，而不是以该点作为所绘形状的左上角。 4 ）在“属性面板”的画笔下单击 Fill ，再单击“渐变画笔”标签，接着单击“径向渐变”画笔，见如图 11.3-3

              如图 11.3-3 5 ）单击“工具箱”中的“渐变工具” ，将会看到一个渐变箭头，如图 11.3-6 。

                  11.3-6 6 ）鼠标调整渐变画笔的中心点，完成后效果如下图 11.3-7 ：

 

                 11.3-7

 

7 ）重复 8 ）、 9 ），再绘制一个椭圆，并设置其下列属性，完成后效果如图 11.3-8 ：   Height=70 ， WIDth=240 ， strokeThickness=0

                 图 11.3-8 8 ）按住 Shift ，单击“工具箱”中的“选择”工具，选中两个椭圆。 9 ）在“对象”菜单上，单击合并、排斥。 若要将所有形状或路径均合并到单一对象中，请单击 " 相并 " 。 若要根据相交部分剪切形状或路径，但保留所有未相交部分，请单击 " 相割 " 若要保留对象的重叠区域并删除不重叠区域，请单击 " 相交 " 。 若要保留非重叠区域并删除重叠区域，请单击 " 相斥 " 。 若要删除最后选定的形状以外的其他所有选定形状，请单击 " 相减 " ，如图图 11.3-9 。

 

                图 11.3-9 10 ）在 " 工具 " 面板中，选择其中椭圆形工具，在美工板上，通过拖动鼠标绘制一个圆，并设置其下列属性。     Height=30 ， WIDth=30 ， strokeThickness=0 11 ）“属性面板”的画笔下单击 Fill ，再单击“渐变画笔”标签，接着单击“线性渐变”画笔，在下面的调色板中选择颜色，设置渐变颜色为黑到淡红。效果如图 11.3-10 ：

                 图 11.3-10 12 ） F6 切换到 " 动画 " 工作区，准备创建脚本（ Storyboard ）实现动画。 按 F6 可在可用的工作区之间切换。在 " 动画 " 工作区中， " 对象和时间线 " 面板位于美工板的下方。 13 ） " 对象和时间线 " 面板中，单击 " 新建 " ，此时，将显示 " 创建 Storyboard 资源 " 对话框，如图图 11.3-11 。

                         图 11.3-11 14 ）在 " 名称 ( 关键字 )" 字段中，键入资源的名称，然后单击 " 确定 " 。 15 ） " 对象和时间线 " 面板中，选择圆。 16 ）击 " 记录关键帧 " ，以便记录在 0 秒播放点标记上的对象的当前位置处外观，如图图 11.3-12 。

         图 11.3-12 17 ） " 对象和时间线 " 面板中，将播放点拖到 1s 的时间点上，移动圆到新的位置， 18 ）播放点拖到下一时间点上，不断重复，让圆绕一圈。 19 ）击 " 对象和时间线 " 顶部的 " 播放 " 按钮，可查看刚才创建的动画效果 20 ）击“对象和时间线”中打开的名称，此时属性面板会显示该脚本可供设置的属性，选中 autoReverse ， RepeatBehavior 次数设为 2x 。 autoReverse 属性设置为 True 时，动画播放结束时，会循着原来的轨迹逆向播放。 RepeatBehavior 属性用来决定动画播放的次数，如设置为 Forever 则为不断地重复播放 21 ）现已完成了动画的设计 *** 作，会保存为 UserControl 的资源，可切换至 XAML 视图来查看，如下为自动产生的动画资源 XAML 代码。 <UserControl.Resources> <Storyboard x:name="Storyboard1" autoReverse="True" RepeatBehavior="2x"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[3].(Translatetransform.X)">                          <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>                          <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-37"/>                          <EasingDoubleKeyFrame KeyTime="00:00:02" Value="-70"/>                          <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-97"/>                          <EasingDoubleKeyFrame KeyTime="00:00:04" Value="-43"/>                          <EasingDoubleKeyFrame KeyTime="00:00:05" Value="-4"/>                          <EasingDoubleKeyFrame KeyTime="00:00:06" Value="36"/>                          <EasingDoubleKeyFrame KeyTime="00:00:07" Value="67"/>                          <EasingDoubleKeyFrame KeyTime="00:00:08" Value="105"/>                          <EasingDoubleKeyFrame KeyTime="00:00:09" Value="73"/>                          <EasingDoubleKeyFrame KeyTime="00:00:10" Value="45"/>                          <EasingDoubleKeyFrame KeyTime="00:00:11" Value="13"/>                   </DoubleAnimationUsingKeyFrames>                   <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Targetname="ellipse" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[3].(Translatetransform.Y)">                          <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>                          <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-3"/>                          <EasingDoubleKeyFrame KeyTime="00:00:02" Value="-9"/>                          <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-17"/>                          <EasingDoubleKeyFrame KeyTime="00:00:04" Value="-29"/>                          <EasingDoubleKeyFrame KeyTime="00:00:05" Value="-31"/>                          <EasingDoubleKeyFrame KeyTime="00:00:06" Value="-31"/>                          <EasingDoubleKeyFrame KeyTime="00:00:07" Value="-27"/>                          <EasingDoubleKeyFrame KeyTime="00:00:08" Value="-16"/>                          <EasingDoubleKeyFrame KeyTime="00:00:09" Value="-6"/>                          <EasingDoubleKeyFrame KeyTime="00:00:10" Value="-3"/>                          <EasingDoubleKeyFrame KeyTime="00:00:11" Value="-1"/>                   </DoubleAnimationUsingKeyFrames>            </Storyboard>           </UserControl.Resources> 22 ）启动动画：       Storyboard1.Begin ();   更详细内容及源代码下载： http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_enCoding=UTF8&s=books&qID=1287058088&asin=B0043RT7I2&sr=8-1 总结

以上是内存溢出为你收集整理的零基础学通Silverlight4（5）：动画全部内容，希望文章能够帮你解决零基础学通Silverlight4（5）：动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。