关于WPF动画

在编写WPF中我们的样式都是静态的,于是WPF给我们提供了动画,让我们的窗口,页面或是控件“动了”。

在动画中,可以使用移动的元素、颜色变化、变换等制作平滑的变换效果。WPF是动画的制作非常简单。还可以连续改变任意依赖属性的值。不同的动画类可以根据其类型,连续改变不同属性的值。

 

动画的主要元素如下:

  1. 时间轴:

   定义了值随时间的变化方式。有不同类型的时间轴,可用于改变不同类型的值。所有时间轴的基类都是Timeline。为了连续改变double值,可以使用DoubleAnimation类。Int32Animation类是int值的动画类。PointAnimation类用于连续改变点,ColorAnimation类用于连续改变颜色。

 

  1. 故事板

   用于合并动画。Storyboard类派生自基类TimelineGroup,TimelineGroup又派生自基类Timeline。使用DoubleAnimation类,可以连续改变double,使用Storyboard类可以合并所有应连接在一起的动画。

 

  1. 触发器:

   通过触发器可以启动和停止动画。属性触发器,当属性值变化时,属性触发器就会激活。还可以创建事件触发器,当事件发生时,事件触发器就会激活。

 

下面我们就按照顺序来了解一下关于WPF动画的世界吧。

一、时间轴

时间轴定义了值随时间变化的方式。下面的实例是连续改变椭圆的大小,颜色由蓝色渐变成白色

 

 
 

                 

<!--画圆-->

<Ellipse Height="100" Width="100">

    <Ellipse.Fill>

       <SolidColorBrush x:Name="ellipseBrush" Color="SkyBlue"/>

           </Ellipse.Fill>

  <!--定义触发器-->

<Ellipse.Triggers>

              <EventTrigger RoutedEvent="Ellipse.Loaded">

<EventTrigger.Actions>

                      <BeginStoryboard>

                          <Storyboard Duration="00:00:06" RepeatBehavior="Forever">

                              <DoubleAnimation Storyboard.TargetProperty="(Ellipse.Width)" Duration="0:0:3"

                        AutoReverse="True" FillBehavior="Stop"

RepeatBehavior="Forever" AccelerationRatio="0.9"

                       DecelerationRatio="0.1" From="100" To="300"/>

                              <ColorAnimation Storyboard.TargetName="ellipseBrush"

                       Storyboard.TargetProperty="(SolidColorBrush.Color)"

Duration="0:0:3" AutoReverse="True" FillBehavior="Stop"

RepeatBehavior="Forever" From="SkyBlue" To="White"/>

                         </Storyboard>

                     </BeginStoryboard>

                 </EventTrigger.Actions>

            </EventTrigger>

      </Ellipse.Triggers>

 </Ellipse>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如图所示:

 

上面代码中,DoubleAnimation时间轴改变为double值。大Ellipse类的Triggers属性设置为EventTrigger。圆加载时,就激活用EventTrigger的RoutedEvent属性定义的事件触发器。BeginStoryboard是启动故事板的触发器动作。在故事板中,DoubleAnimation元素用于连续改变Eillpse类的Width属性。动画在3面内把圆的宽度从150改为300,在之后的3秒内再恢复原状。

ColorAnimation连续改变ellipseBrush中用于 填充圆的颜色;

 

其实动画并不只是一直或是立刻显示在屏幕上的一般窗口,我们还可以给应用程序添加动画,使用户界面的响应性更好。

 

 

 

 

 

Timeline的属性

  1. AutoReverse:

   使用AutoReverse属性,可以指定连续改变的值在动画结束后是否返回初始值

 

  1. SpeedRatio:

使用SpeedRatio,可以改变动画的移动速度,在这个属性中,可以定义父子元素的相对关系。默认值为1;将速率设置为较小的值,会使动画移动较慢;将速率设置为高于1的值,会使动画移动较快

 

  1. BeginTime:

使用BeginTime,可以指定从触发器事件开始到动画开始移动之间的时间长度。单位可以是天、消失、分钟、秒和几分之秒。根据SpeedRatio,这可以不是真实的时间。例如,把SpeedRatio设置为2,把开始时间设置为6秒,动画就在3秒后开始

 

  1. AccelerationRatio、DecelerationRatio:

在动画中,值不一定是线性变化,可以指定AccelerationRatio和DecelerationRatio,定义加速和减速度。这两个值的综合不能超过1。

 

  1. Duration:

使用Duration属性,可以指定动画重复一次的时间长度。

 

  1. RepeatBehavior:

给RepeatBehavior属性指定一个RepeatBehavior结构,可以定义动画的重复次数或重复时间。

 

  1. FillBehavior:

    如果父元素的时间轴有不同的持续时间,FillBehavior属性就很重要。例如:如果把父元素的时间轴比实际动画的持续时间短,将FillBehavior设置为Stop就表示实际动画停止。如果父元素的时间轴比实际动画的持续时间长,HoldEnd就会一直执行动画,直到把它重置为初始值为止(嘉定把AutoReverse设置为true)

 

    根据Timeline类的类型,还可以使用其他一些属性。例如,使用DoubleAnimation,可以为动画开始和结束设置From和To属性。还可以设置By属性,用Bound属性的当前启动动画,该属性值会递增由By属性指定的值

 

二、非线性动画

定义非线性动画的一种方式是设置AccelerationRatioDecelerationRatio,指定动画在开始和结束时的速度。(.NET4.5有比这更灵活的方式)

几个动画类有EasingFunction属性。这个属性接受一个实现了IEasingFunction接口的对象。通过这几个接口,缓动函数对象可以定义值随着时间如何变化。有几个缓动函数可用于创建非线性动画,如ExponentialEase,它给动画使用指数公式:QuadraticEaseCubicEaseQuarticEaseQuinticEase的指数分别是2345PowerEase的指数是可以配置的。特别有趣的是SinEase,它使用正弦曲线,BounceEase创建弹跳效果,ElasticEase用弹簧的来回震荡来模拟动画值。

要在XAML中指定这种缓动效果,可以把该缓动效果添加到动画的EasingFunction属性中。

 如下所示:

 

 <DoubleAnimation Storyboard.TargetProperty="(Ellipse.Width)" Duration="0:0:3"

                 AutoReverse="True" FillBehavior="Stop" RepeatBehavior="Forever" AccelerationRatio="0.9" DecelerationRatio="0.1" From="100" To="300">

     <DoubleAnimation.EasingFunction>

          <BounceEase EasingMode="EaseInOut"/>

     </DoubleAnimation.EasingFunction>

 </DoubleAnimation>

  • 关键帧动画

和上面写的一样,使用加速比、减速比和缓动函数,就可以用非线程性的方式制作动画。如果需要为动画指定几个值,就可以使用关键帧动画。与正常的动画一样,关键帧动画也有不同的动画类型,它们可以改变不同类型的属性。

DoubleAnimationUsingKeyFrames是双精度类型的关键帧动画。其他关键帧动画的类型有Int32AnimationUsingKeyFrames、PointAnimationUsingKeyFrames、ColorAnimationUsingKeyFrames、SizeAnimationUsingKeyFrames和ObjectAnimationUsingKeyFrames。

 

<Canvas>

     <Ellipse Fill="Red" Canvas.Left="20" Canvas.Top="20" Width="25" Height="25">

         <Ellipse.RenderTransform>

             <TranslateTransform X="50" Y="50" x:Name="ellipseMove"/>

         </Ellipse.RenderTransform>

             <Ellipse.Triggers>

                <EventTrigger RoutedEvent="Ellipse.Loaded">

                   <BeginStoryboard>

                      <Storyboard>

                         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X"

                               Storyboard.TargetName="ellipseMove">

                           <LinearDoubleKeyFrame KeyTime="0:0:2" Value="30"/>

                            <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="80"/>

                            <SplineDoubleKeyFrame KeySpline="0.5,0.0,0.9,0.0" KeyTime="0:0:10" Value="300"/>

                            <LinearDoubleKeyFrame KeyTime="0:0:20" Value="150"/>

                            </DoubleAnimationUsingKeyFrames>

              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Y" Storyboard.TargetName="ellipseMove">

              <SplineDoubleKeyFrame KeySpline="0.5,0.0,0.9,0.0" KeyTime="0:0:2" Value="50"/>

<EasingDoubleKeyFrame KeyTime="0:0:20" Value="300">

                                        <EasingDoubleKeyFrame.EasingFunction>

                                            <BounceEase/>

                                        </EasingDoubleKeyFrame.EasingFunction>

 

             

 

 
 

 

                                    </EasingDoubleKeyFrame>

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger>

                </Ellipse.Triggers>

            </Ellipse>

        </Canvas>

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页