Silverlight StoryBorad-动画基础概述

在 Silverlight 中，动画可以通过添加移动和交互性来增强图形的创建效果,当然这也是本着Silverlight的设计的初衷而来的.动画本身就是快速播放一系列图像. Silverlight 中，通过对对象的个别属性应用动画，可以对对象进行动画处理. 例如上例中右边对图片Image渐变属性Opacity简单动画效果. 来快速实现一下:

<1>:创建StoryBorad:

<Grid x:Name="LayoutRoot" Background="White">  

         <Grid.Resources>  

             <Storyboard x:Name="myfirststory" BeginTime="0:0:2" >  

                 <!--对左边图片透明度进行缩放-->  

                 <DoubleAnimation From="1.0"  To="0" Storyboard.TargetName="leilei" Storyboard.TargetProperty="Opacity" x:Name="firtaum"   

                                      Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever" >  

                 </DoubleAnimation>        

             </Storyboard>  

         </Grid.Resources>  

  </Grid> 

 为什么要用DoubleAnimation ? 在Silverlight中动画对属性值的动画控制分为几个类型. 其中对值类型为Double属性进行简单动画处理需要DoubleAnimation  例如图片Image透明度属性Opacity.

From="1.0"  To="0" 

Storyboard.TargetName="leilei" Storyboard.TargetProperty="Opacity" 

利用StroyBorad.TargetName属性绑定具体动画控制对象. TargetProperty则绑定控制对象具体控制属性.

Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever" 

Duration属性获取或设置此时间线播放的时间长度，而不是计数重复, 时间长度格式同 "小时:分钟:秒数", 如上Duration="0:0:4"动画时间为4秒钟时间.

AutoReverse属性指示时间线在完成向前迭代后是否按相反的顺序播放, 简单的说就是控制动画是否循环播放.

如上既是定义一个简单的DoubleAnimation 控制Double值StoryBoard. 在StoryBorad可以控制UIElelment属性还有ColorAnimation和PointAnimation. 四者之间关系如下图:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161113720.png"></a>

&lt;2&gt;StoryBorad动起来.

创建完成StoryBorad动画后 可以通过事件进行关联.让动画动起来. Button按钮后台事件中:

myfirststory.Begin();//启动动画 

相关关于StoryBorad暂停,停止,继续播放调用分别对应如下:

myfirststory.Pause();//暂停  

myfirststory.Stop();//停止  

processborad.Resume();//动画继续 

这样就能简单控制动画整个流程.

&lt;3&gt;StoryBorad控制动画运动时间

在控制StoryBorad控制时间前先看一个关于一个简单DoubleAnimation 控制三条Line实例:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161118468.jpg"></a>

页面创建不同颜色的线: 红,蓝,黑 三条. 利用DoubleAnmation控制它与Canvas.Top距离来实现动态三个不同方位动态移动.实现页面Xaml:

      &lt;Border BorderThickness="1" BorderBrush="Red"&gt;  

        &lt;Canvas VerticalAlignment="Center" HorizontalAlignment="Center"&gt;  

            &lt;Canvas.Triggers&gt;  

                &lt;EventTrigger RoutedEvent="Canvas.Loaded" &gt;  

                    &lt;EventTrigger.Actions&gt;  

                        &lt;BeginStoryboard&gt;  

                            &lt;Storyboard x:Name="animation" Storyboard.TargetName="Horizontal1" Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever"&gt;  

                                &lt;DoubleAnimation To="100" Duration="0:0:10" /&gt;  

                                &lt;DoubleAnimation Storyboard.TargetName="Horizontal2" Storyboard.TargetProperty="(Canvas.Top)" To="99" Duration="0:0:10" /&gt;  

                                &lt;DoubleAnimation Storyboard.TargetName="Vertical" To="299" Duration="0:0:10" /&gt;  

                            &lt;/Storyboard&gt;  

                        &lt;/BeginStoryboard&gt;  

                    &lt;/EventTrigger.Actions&gt;  

                &lt;/EventTrigger&gt;  

            &lt;/Canvas.Triggers&gt;  

            &lt;!--定义三条线来控制--&gt;  

            &lt;Line x:Name="Horizontal1" X1="1" Y1="1" X2="300" Y2="1" Stroke="#000000" StrokeThickness="1"/&gt;  

            &lt;Line x:Name="Horizontal2" X1="1" Y1="1" X2="300" Y2="1" Stroke="#CC0000" StrokeThickness="1"/&gt;  

            &lt;Line x:Name="Vertical" X1="1" Y1="1" X2="1" Y2="100" Stroke="#0000CC" StrokeThickness="1"/&gt;  

        &lt;/Canvas&gt;  

      &lt;/Border&gt;  

    &lt;/Grid&gt; 

如果我现在改变需求,定义三条线运动时间顺序, 红线先走, 黑线次之, 蓝线最后. 如何定义？ 这就涉及到动画运动时间定义.这就让我想起了TimeLine中BegainTime属性来控制.而StoryBorad中三个常用动画控制Double/Color/Point都继承于TimeLine, 这就为动画运动时间控制创造可能.可以设置:

&lt;Storyboard BeginTime="0:0:2"&gt;&lt;/Storyboard&gt; 

设置StoryBorad是对整个动画开始时间进行延缓 如上延缓为2秒钟. 值得注意的是动画控制时间格式为"0:0:2", 对应为"小时:分钟:秒数". 现在控制三条线运动顺序.为了明显看出效果设置间隔事件为3秒. 设置如下:

&lt;DoubleAnimation To="100" Duration="0:0:10" BeginTime="0:0:3" /&gt;  

&lt;DoubleAnimation Storyboard.TargetName="Horizontal2" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:10" To="99"  BeginTime="0:0:3" /&gt;  

&lt;DoubleAnimation Storyboard.TargetName="Vertical" To="299" Duration="0:0:10" BeginTime="0:0:3" /&gt; 

运行效果:

红线在程序开始后第5秒开始向下滚动. 其中StoryBorad包含两秒延缓时间

蓝线在第8秒开始向右滚动.

红线在第11秒开始向左滚动.

&lt;4&gt;StoryBorad显示方位控制[silverlight 3D效果]

 有时需要对动画页面中对应的UIElement方位进行一定变动. 其实这就涉及到Silverlight 支持的3D效果.3D 支持已经Silverlight 4中得到极大改观. 目前也出了不少基于Silverlight 3D 一些XGA LineGame等等.  利用Silverlight 对一个Image实现3D控制:

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161124773.jpg"></a>

 页面XAML:

         &lt;Grid.RowDefinitions&gt;  

             &lt;RowDefinition Height="Auto"&gt;&lt;/RowDefinition&gt;  

             &lt;RowDefinition Height="198*" /&gt;  

         &lt;/Grid.RowDefinitions&gt;  

         &lt;Grid.ColumnDefinitions&gt;  

             &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;  

             &lt;ColumnDefinition Width="498*" /&gt;  

         &lt;/Grid.ColumnDefinitions&gt;  

         &lt;Border Grid.Row="0" Grid.Column="0"  BorderThickness="1" BorderBrush="Red" VerticalAlignment="Stretch" HorizontalAlignment="Left"&gt;  

             &lt;Image Source="/TestSilverlightStoryBoradDemo;component/Image/leiqueen.jpg" Width="500" Height="400" &gt;  

                 &lt;Image.Projection&gt;  

                     &lt;PlaneProjection x:Name="imgplane" RotationX="-45" RotationY="45" RotationZ="45" &gt;&lt;/PlaneProjection&gt;  

                 &lt;/Image.Projection&gt;  

             &lt;/Image&gt;  

         &lt;/Border&gt;  

         &lt;Canvas Grid.Row="0" Grid.Column="1"&gt;  

              &lt;TextBlock Text="Relation-Z:" Canvas.Top="25" Canvas.Left="20"  /&gt;  

              &lt;Slider Width="302" x:Name="firstlid" Canvas.Left="85" Maximum="1000" Minimum="-1000" Canvas.Top="25" ValueChanged="firstlid_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="firtlibtxt"  Canvas.Top="25" Canvas.Left="425"&gt;&lt;/TextBlock&gt;  

             &lt;TextBlock Text="Relation-X:" Canvas.Top="70" Canvas.Left="20"&gt;&lt;/TextBlock&gt;  

             &lt;Slider Width="302" Canvas.Left="85" x:Name="secondlib" Maximum="1000" Minimum="-1000" Canvas.Top="70" ValueChanged="secondlib_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="secondlibtxt"  Canvas.Top="75" Canvas.Left="425"&gt;&lt;/TextBlock&gt;  

             &lt;TextBlock Text="Relation-Y:" Canvas.Top="110" Canvas.Left="20"&gt;&lt;/TextBlock&gt;  

             &lt;Slider Width="302" Canvas.Left="85" x:Name="threelib" Maximum="1000" Minimum="-1000" Canvas.Top="110" ValueChanged="threelib_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="threelibtxt"  Canvas.Top="110" Canvas.Left="425"&gt;&lt;/TextBlock&gt;  

             &lt;TextBlock Text="CenterOfRotation-X:" Canvas.Top="140" Canvas.Left="0"  Visibility="Collapsed"&gt;&lt;/TextBlock&gt;  

             &lt;Slider Width="302" x:Name="centerRotx" Maximum="1000" Minimum="-1000" Visibility="Collapsed" Canvas.Top="140" Canvas.Left="110" ValueChanged="centerRotx_ValueChanged" /&gt;  

             &lt;TextBlock x:Name="centerRotxtxt"  Canvas.Top="140" Canvas.Left="425" Visibility="Collapsed"&gt;&lt;/TextBlock&gt;  

         &lt;/Canvas&gt;  

     &lt;/Grid&gt; 

<a target="_blank" href="http://blog.51cto.com/attachment/201201/161133833.jpg"></a>

UIElement中LocalOffSet- X/Y/Z属性获取或设置沿对象平面的 X /Y/Z轴平移对象的距离, 【注意:对象是平面, 位移方式: 平移】

Globalset-X/Y/Z属性获取或设置沿屏幕的 X/Y/Z 轴平移对象的距离 【注意: 针对的是屏幕的平移】

CenterRelation-X/Y/Z属性获取或设置所旋转对象的旋转中心 X 坐标 【针对的是旋转中心控制.】 

本篇都是一些非常基础的涉及到Silverlight StoryBorad应用. 主要针对初学者 高手飘过.如有任何疑问 请在留言中回复我.

Silverlight StoryBorad Dome源码下载

本文转自chenkaiunion 51CTO博客，原文链接:http://blog.51cto.com/chenkai/764822