WinPhone学习笔记（三）——WinPhone的动画

2023-12-23 20:41:57

　　这段时间又一直赶任务，结果没有去学习，也没有去写博文，这个动画的内容很早就学了，但是一直没把它整理成博文，现在终于有空就弄一下。

　　开始先讲讲在WinPhone中做动画有两种动画类型，一种是基于帧动画另一种是基于时间动画。接着介绍的动画都是Silverlight动画，Silverlight动画有用xaml描述，也有用传统的cs代码文件里描述。随后的内容都是以Silverlight动画为主，关键帧动画，动画的触发机制，透视变换动画，优先级。接下来就详细描述各个内容。

动画分类

基于帧动画：每调用一次函数则算一帧，在调用一次函数则执行一次变化。
基于时间动画：虽然每次都是在函数上进行调用，但是调用时的变化量是按时间作为自变量。

下面这个例子分别使用了两种类型的动画，动画是文字围绕着中心旋转

先是xmal文件

 1             <TextBlock Grid.Row="0" Grid.Column="0" Text="Time-base" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5 0.5">
 2                 <TextBlock.RenderTransform>
 3                     <RotateTransform x:Name="rotate1"/>
 4                 </TextBlock.RenderTransform>
 5             </TextBlock>
 6 
 7             <TextBlock Grid.Row="1" Grid.Column="0" Text="Frame-base" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5 0.5">
 8                 <TextBlock.RenderTransform>
 9                     <RotateTransform x:Name="rotate2"/>
10                 </TextBlock.RenderTransform>
11             </TextBlock>

在cs代码文件中就使用了Rendering事件，该事件需要在构造函数中注册

CompositionTarget.Rendering += CompositionTarget_Rendering;

CompositionTarget_Rendering方法的定义如下

1         void CompositionTarget_Rendering(object sender, EventArgs e)
2         {
3             rotate1.Angle = (rotate1.Angle + 0.2) % 360;
4 
5             TimeSpan elapsedTime = DateTime.Now - dtNow;
6             rotate2.Angle = (elapsedTime.TotalMinutes * 360) % 360;
7         }

Rendering事件是在屏幕刷新时触发的，在这个方法里面执行变换，顺其自然则是基于帧的动画，那么利用DateTime的时间差就可以由帧转化成时间了。

Silver动画

　　这里把动画类型分了两种，用的最多的还是基于时间动画，个人估计原因在于基于帧动画实际上是依靠屏幕的刷新率。如果遇到不同的屏幕刷新率，动画播放就会有不同的效果，但是基于时间动画的话就不会受屏幕刷新率的影响，而且基于帧动画消耗资源也会比较多。

　　Silverlight动画主要是基于Sotryboard的，使用不同的Animation类，设置对应的targetName受作用的元素与targetProperty受作用的属性。由于动画变换时受变换的作用类型不一样，所以这部分Animation的类有以下几个，DoubleAnimation，ColorAnimation，PointAnimation；这三个子类分别可实现基于数值变化的动画，颜色变换的动画和位置变换的动画。还有几个用于关键帧动画的子类DoubleAnimationUsingKeyFrame，ColorAnimationUsingKeyFrame，PointAnimationUsingKeyFrame，ObjectAnimationUsingKeyFrame，关键帧动画这个先留在后面再说，下面则稍微列举一下简单的Silverlight动画，分别通过在cs实现和通过xmal中中实现

先是通过cs实现的，在xaml里添加以下元素。

1             <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click" RenderTransformOrigin="0.5 0.5">
2                 <Button.RenderTransform>
3                     <RotateTransform/>
4                 </Button.RenderTransform>
5             </Button>

重点在于这个Button的Click，在Button_Click方法里面定义了动画的内容还有控制了动画的开始

 1         private void Button_Click(object sender, RoutedEventArgs e)
 2         {
 3             Button btn = sender as Button;
 4 
 5             RotateTransform routate = btn.RenderTransform as RotateTransform;
 6             
 7 
 8             DoubleAnimation anima = new DoubleAnimation();
 9             anima.From = -360;
10             anima.To = 360;
11             anima.By = 90;
12             anima.FillBehavior = FillBehavior.Stop;
13             anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));
14             anima.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(5));
15             anima.AutoReverse = true;
16             
17             Storyboard.SetTarget(anima, routate);
18             Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty));
19             
20 
21             Storyboard storyboard = new Storyboard();
22             storyboard.Children.Add(anima);
23             storyboard.AutoReverse = true;
24             storyboard.Duration = new Duration(TimeSpan.FromSeconds(0.25));
25             storyboard.Begin();
26         }

代码分了三截，第一截是定义了动画的细节，第二截是定义了动画整个变换的过程中受作用的变化属性，在这里而已就是按钮的角度随着动画的执行而改变，最后是StoryBoard的构造和播放StoryBoard里面的所有动画，一个StoryBoard就类似于一个场景，场景里面可以有很多个演员（各个Animation类）按照剧本上的安排（开发人员定义的动画内容）来演戏（执行动画）。上面有涉及到Animation类和StoryBoard类的几个属性，

FillBehavior：表示动画执行完毕之后受作用对象的状态，简单理解就是指维持在动画执行完毕之后的那个值还是恢复到动画开始时的那个值；
Duration：整个动画过程所花费的时间；
RepeatBehavior：动画重复播放的次数，
AutoReverse：是否让动画重复播放。

这些属性都是Animation类和StoryBoard类共有的，因为他们都是TimeLine的属性，而这些属性都是TimeLine的属性。这些属性在Animation中设置是只对一个动画受影响，在StoryBoard里设置就对整个StoryBoard里的所有动画都影响。

下面也稍介绍用xmal的方式，也是有这么的一个按钮

            <Button Content="Button2" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click_1" RenderTransformOrigin="0.5 0.5">
                <Button.RenderTransform>
                    <RotateTransform x:Name="rotate3" />
                </Button.RenderTransform>
            </Button>

动画就以页面资源的形式

    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="storyboard1">
            <DoubleAnimation Storyboard.TargetName="rotate3"
                             Storyboard.TargetProperty="Angle"
                              From="0" To="360" Duration="0:0:0.5" RepeatBehavior="3"/>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

这里涉及到的属性还有设计与上面用cs的相比起来还是一样的，最有在按钮的Click事件控制动画的播放

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            storyboard1.Begin();
        }

关键帧动画

　　对于上面提及实现的动画动作可能稍微有点大，而Silverlight动画里面也可以实现关键帧动画，从而控制动画过程中的每个细节。上面介绍的各个UsingKeyFrame的Animation类中，包含了几个KeyFrame结尾的子元素来控制动画的变换中的自变量，这几个子元素分别如下

DiscreteXXXKeyFrame：跳跃到特定位置的动画；
LinearXXXKeyFrame：线性动画；
SplineXXXKeyFrame：加速或减速的变速动画；
EasingXXXKeyFrame：渐变函数动画。

上面的这几个元素都是带XXX，就是指对那几种不同的UsingKeyFrame类都有这几个子元素，而Double的就是DiscreteDoubleKeyFrame，Color的就是DiscreteColorKeyFrame。而这四种类型中Discrete和Linear不作展开介绍了。但是KeyFrame的这类元素都有两个比较关键的属性KeyTime和value，value是目标值，完成这一帧所达到的值，keyTime则是完成这个帧时的时间。

　　SplineXXXKeyFrame变速动画，这类动画则是利用贝塞尔曲线作为动画的变化速度来控制动画播放，贝塞尔曲线是由两个控制点来控制整条曲线的形状，这两个属性是KeySpline类型的两个成员ControlPoint1和ControlPoint2，而这个KeySpline也是SplineXXXKeyFrame的一个属性成员。

　　EasingXXXKeyFrame 渐变函数动画，这个渐变函数如果不是实践过的话也不知道是什么回事，这类的动画是按照各种渐变函数来决定整个动画变换中的变化值，渐变函数的基类是EasingFunctionBase，它的各个子类就是各种具体的渐变函数，对渐变函数动画的动画效果影响因素有两个一个是渐变函数的类型，另一个是插值模式，动画的插值模式通过EaseMode设置，它是一个枚举，有EaseIn,EaseOut,EaseInOut三种，而渐变函数则是由EasingFunction属性设置，渐变函数的类型有11种，这个可以访问MSDN EasingModel枚举那一页来看出各个渐变函数的图象。

动画的触发

　　上面列举了的Silverlight动画都是基于StoryBoard的，动画开始是通过Begin()方法的调用，之前调用Begin()方法是在按钮的Click事件里面的，但是可以在元素加载的时候触发这些动画，这里可以用上Silverlight的触发器，各个元素都可以在xmal中使用上这个触发器来执行动画，如同下面格式

                <各种容器.Triggers>
                    <EventTrigger>
                        <BeginStoryboard>
                            <Storyboard >
                                <!—各种的Animation--!>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </各种容器.Triggers>

透视变换

　　上面的动画都是用了元素的RenderTransform，做出来的动画都是二位的仿射变换，但是要做到有三维立体效果的透视变换，那就需要用到元素的另外一个属性Projection，这次受作用的属性是RotationX（RotationY或者RotationZ），PlaneProjection对象有CenterOfRotationX，CenterOfRotationY，CenterOfRotationZ属性来设置旋转轴的中心，xyz代表坐标系中的三条坐标轴，范围是0到1，0是元素的起始位置，1是元素的结束位置，0.5则是中心。GlobalOffsetX，GlobalOffsetY，GlobalOffsetZ是整个对象与对应的坐标轴偏移像素，这只是一个变换的目标对象，仍然可以使用之前说的Silverlight动画，例如下面的把一个文本三维旋转的

            <TextBlock Name="txtblk"
                       Grid.Row="0" Grid.Column="0"
                       Grid.ColumnSpan="3"
                       Text="ROTATE"
                       FontSize="{StaticResource PhoneFontSizeHuge}"
                       Foreground="{StaticResource PhoneAccentBrush}"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center">
                <TextBlock.Projection>
                    <PlaneProjection x:Name="planeProjection"
                                     CenterOfRotationX="1" CenterOfRotationY="1"
                                     GlobalOffsetX="-100"/>
                </TextBlock.Projection>
            </TextBlock>
    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="rotateX">
            <DoubleAnimation Storyboard.TargetName="planeProjection"
                             Storyboard.TargetProperty="RotationX"
                             From="0" To="360" Duration="0:0:5"/>
        </Storyboard>

        <Storyboard x:Name="rotateY">
            <DoubleAnimation Storyboard.TargetName="planeProjection"
                             Storyboard.TargetProperty="RotationY"
                             From="0" To="360" Duration="0:0:5"/>
        </Storyboard>

        <Storyboard x:Name="rotateZ">
            <DoubleAnimation Storyboard.TargetName="planeProjection"
                             Storyboard.TargetProperty="RotationZ"
                             From="0" To="360" Duration="0:0:5"/>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

属性的优先级

　　最后提及一下的优先级的问题，动画本身也是在设置元素的属性，那么对元素属性设置方式多种多样，整个优先级顺序从大到小分别是属性的强制保护(属性设置后的一些约束)>动画>本地设置(单纯设置属性)>样式设置>主题风格>属性继承