Silverlight StoryBorad动画基础概述

昨天晚上在SilverlightForums上看到关于动画几个UK Grouper成员讨论的帖子. 其中讲到了不少关于Silverlight StoryBorad动画开发上经验和技巧. 看到Picker Borad上人头攒动景象. 因我对Silverlight Borad应用比较少. 只能看着UK Grouper成员在线讨论. 做一个旁观者.后来在帖子资源中看到不少关于Silverlight StoryBoard运用几篇文章. 打算初步认识Silverlight StoryBrorad. 做了一个简单的演示Silverlight中使用StoryBorad的Demo. 先看看效果:

 

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

<1>:创建StoryBorad:

 1  <Grid x:Name="LayoutRoot" Background="White">
 2         <Grid.Resources>
 3             <Storyboard x:Name="myfirststory" BeginTime="0:0:2" >
 4                 <!--对左边图片透明度进行缩放-->
 5                 <DoubleAnimation From="1.0"  To="0" Storyboard.TargetName="leilei" Storyboard.TargetProperty="Opacity" x:Name="firtaum" 
 6                                      Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever" >
 7                 </DoubleAnimation>      
 8             </Storyboard>
 9         </Grid.Resources>
10  </Grid>

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

 From="1.0"  To="0"

From和To动画从 From 属性指定的值继续到 To 属性指定的值,执行顺序由From到To. 当前Opacity透明度可见最大值是1. 到隐藏 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属性指示时间线在完成向前迭代后是否按相反的顺序播放, 简单的说就是控制动画是否循环播放.

RepeatBehavior属性获取或设置此时间线的重复行为,RepeatBehavior 可以定义为时间跨度字符串、#x 字符串或者特殊值 Forever,具体详细请参见MSDN.

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

<2>StoryBorad动起来.

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

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

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

 myfirststory.Pause();//暂停
2 myfirststory.Stop();//停止
3 processborad.Resume();//动画继续

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

<3>StoryBorad控制动画运动时间

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

 

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

 <Grid x:Name="LayoutRoot" Background="White">
      <Border BorderThickness="1" BorderBrush="Red">
        <Canvas VerticalAlignment="Center" HorizontalAlignment="Center">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Canvas.Loaded" >
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard x:Name="animation" Storyboard.TargetName="Horizontal1" Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever">
                                <DoubleAnimation To="100" Duration="0:0:10" />
                                <DoubleAnimation Storyboard.TargetName="Horizontal2" Storyboard.TargetProperty="(Canvas.Top)" To="99" Duration="0:0:10" />
                                <DoubleAnimation Storyboard.TargetName="Vertical" To="299" Duration="0:0:10" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Canvas.Triggers>
            <!--定义三条线来控制-->
            <Line x:Name="Horizontal1" X1="1" Y1="1" X2="300" Y2="1" Stroke="#000000" StrokeThickness="1"/>
            <Line x:Name="Horizontal2" X1="1" Y1="1" X2="300" Y2="1" Stroke="#CC0000" StrokeThickness="1"/>
            <Line x:Name="Vertical" X1="1" Y1="1" X2="1" Y2="100" Stroke="#0000CC" StrokeThickness="1"/>
        </Canvas>
      </Border>
    </Grid>

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

 <Storyboard BeginTime="0:0:2"></Storyboard>

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

 <DoubleAnimation To="100" Duration="0:0:10" BeginTime="0:0:3" />
2 <DoubleAnimation Storyboard.TargetName="Horizontal2" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:10" To="99"  BeginTime="0:0:3" />
3 <DoubleAnimation Storyboard.TargetName="Vertical" To="299" Duration="0:0:10" BeginTime="0:0:3" />

运行效果:

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

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

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

<4>StoryBorad显示方位控制[silverlight 3D效果]

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

 

页面XAML:

 1     <Grid x:Name="LayoutRoot" Background="White">
 2         <Grid.RowDefinitions>
 3             <RowDefinition Height="Auto"></RowDefinition>
 4             <RowDefinition Height="198*" />
 5         </Grid.RowDefinitions>
 6         <Grid.ColumnDefinitions>
 7             <ColumnDefinition Width="Auto"></ColumnDefinition>
 8             <ColumnDefinition Width="Auto"></ColumnDefinition>
 9             <ColumnDefinition Width="498*" />
10         </Grid.ColumnDefinitions>
11         
12         <Border Grid.Row="0" Grid.Column="0"  BorderThickness="1" BorderBrush="Red" VerticalAlignment="Stretch" HorizontalAlignment="Left">
13             <Image Source="/TestSilverlightStoryBoradDemo;component/Image/leiqueen.jpg" Width="500" Height="400" >
14                 <Image.Projection>
15                     <PlaneProjection x:Name="imgplane" RotationX="-45" RotationY="45" RotationZ="45" ></PlaneProjection>
16                 </Image.Projection>
17             </Image>
18         </Border>
19         <Canvas Grid.Row="0" Grid.Column="1">
20              <TextBlock Text="Relation-Z:" Canvas.Top="25" Canvas.Left="20"  />
21              <Slider Width="302" x:Name="firstlid" Canvas.Left="85" Maximum="1000" Minimum="-1000" Canvas.Top="25" ValueChanged="firstlid_ValueChanged" />
22             <TextBlock x:Name="firtlibtxt"  Canvas.Top="25" Canvas.Left="425"></TextBlock>
23             
24             <TextBlock Text="Relation-X:" Canvas.Top="70" Canvas.Left="20"></TextBlock>
25             <Slider Width="302" Canvas.Left="85" x:Name="secondlib" Maximum="1000" Minimum="-1000" Canvas.Top="70" ValueChanged="secondlib_ValueChanged" />
26             <TextBlock x:Name="secondlibtxt"  Canvas.Top="75" Canvas.Left="425"></TextBlock>
27             
28             <TextBlock Text="Relation-Y:" Canvas.Top="110" Canvas.Left="20"></TextBlock>
29             <Slider Width="302" Canvas.Left="85" x:Name="threelib" Maximum="1000" Minimum="-1000" Canvas.Top="110" ValueChanged="threelib_ValueChanged" />
30             <TextBlock x:Name="threelibtxt"  Canvas.Top="110" Canvas.Left="425"></TextBlock>
31 
32             <TextBlock Text="CenterOfRotation-X:" Canvas.Top="140" Canvas.Left="0"  Visibility="Collapsed"></TextBlock>
33             <Slider Width="302" x:Name="centerRotx" Maximum="1000" Minimum="-1000" Visibility="Collapsed" Canvas.Top="140" Canvas.Left="110" ValueChanged="centerRotx_ValueChanged" />
34             <TextBlock x:Name="centerRotxtxt"  Canvas.Top="140" Canvas.Left="425" Visibility="Collapsed"></TextBlock>
35         </Canvas>
36         
37     </Grid>

要实现Silverlight 对Image方位 3D控制,先要理解这个3D这个名词概念.其中D是英文Dimension(线度、维)的字头，3D是指三维空间,真实的三维空间，有真实的距离空间,计算机屏幕是平面二维的，我们之所以能欣赏到真如实物般的三维图像，是因为显示在计算机屏幕上时色彩灰度的不同而使人眼产生视觉上的错觉,人眼有一个特性就是近大远小,就会形成立体感, 那么表现在方位坐标上具体识别如下图:

而UIElement 中Relation- X/Y/Z属性分别获取或设置围绕旋转的 X/Y/Z 轴旋转对象的角度. 当然在PlaneProjection对象中还存在一些相对空间信息数据属性.

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源码下载:/Files/chenkai/TestSilverlightStoryBoradDemo.rar