WPF动画

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015

作者：李成富

撰写时间： 2019.05.19

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

DoubleAnimation类型的动画：把动画加入了故事版storyboard，故事板是增强的时间线，可用来分组多个动画，而且故事版storyboard对象中提供了Stop（停止）、pause（暂停）、resume（继续）方法来控制动画。

对于故事板提供了TargetName和TargetProperty的附加属性，通过在动画上设置这些属性。告诉我们动画对那些内容进行动画处理。这样阅读比较清晰。

，最后设置执行动画的对象和改变的属性。

动画类型：动画类型总体分为两类From/To/By动画和关键帧动画：

（1）From/To/By动画：在起始值From和结束值To之间处理动画，之间的时间由Duration属性控制，若要指定相对于起始值的结束值何以设定By属性。

（2）关键帧动画：在使用关键帧对象指定的一系列的值之间播放动画。属性类型对应的基本 (From/To/By) 动画对应的关键帧动画ColorAnimation、ColorAnimationUsingKeyFrames 、DoubleAnimation、DoubleAnimationUsingKeyFrames 、PointAnimation、PointAnimationUsingKeyFrames。

 

ColorAnimation/DoubleAnimation/PointAnimation在指定的 Duration 内使用线性内插对两个目标值之间的 Color/ Double / Point 属性值进行动画处理。

动画是时间线，所有的动画均继承自Timeline对象，因此所有的动画都是专用类型的时间线。

Duration：表示时间线完成一次重复

BeginTime：设定动画的开始时间

SpeedRatio：设定动画的速率

RepeatBehavior：指定时间线的播放次数

AutoRevers：指定时间线在到达其 Duration 的终点后是否倒退。

FillBehavior：设定动画结束后的行为，有两个值HoldEnd保持当前值，Stop结束后变为初始值。

 

动画的生命周期：WPF动画只是暂时的，这意味着它们不能真正改变基本属性的值，当动画处于活动状态时，只是覆盖了属性的值。

 

事件触发器可以在以下4个位置定义事件触发器：

（1）在样式中(Style.Triggers集合)。

（2）在数据模板中(DataTemplate.Triggers集合)。

（3）在控件模板中(ControlTemplate.Triggers集合)。

（4）直接在元素中定义事件触发器(FrameworkElement.Triggers集合)。

所有事件触发器都可以启动动作，所有动作都由继承自System.Windows.TriggerAction的类表示。

 

在WPF中实现一个动画需要三个必备的条件：动画对象、故事版、事件触发器。

第一步：动画对象

DoubleAnimation doubleAnimation = new DoubleAnimation();//创建动画对象

doubleAnimation.From = 10;//设置开始值           

doubleAnimation.To = 100;//设置结束值           

doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));//动画运行时间

doubleAnimation.AutoReverse = true;//设置动画播放完后反向在播放            doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;//设置为循环播放

第二步：故事版

//创建故事版并把动画对象加入到该故事版中

Storyboard storyboard  = new Storyboard();            storyboard.Children.Add(doubleAnimation);          storyboard.Children.Add(doubleAnimation);

//指定要执行该故事板的对象

Storyboard.SetTarget(doubleAnimation, yuan);//指定要执行动画的对象。

//指定要进行动画处理的属性

Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

storyboard.Begin();//开始动画

在例子中的红色字体标记的就是完成了对这两个值的设定。

 

可以把一二步合起来写在XAML页面：（这种写法不需要点击按钮触发，直接启动页面就可以看到效果）

<Window.Resources>

        <!--故事版：定义动画（数值线性插值动画）-->

        <Storyboard x:Key="myStoryboard" TargetName="yuan" TargetProperty="Width">

            <!--

            定义动画：TargetName指定操作控件，

            TargetProperty指定操作控件的具体属性，-->

            <DoubleAnimation From="42" To="100" Duration="0:0:5" AutoReverse="True"

                             RepeatBehavior="Forever"></DoubleAnimation>

        </Storyboard>

</Window.Resources>

第三步：事件触发器

<!--事件触发器-->

    <Window.Triggers>

        <EventTrigger RoutedEvent="Window.Loaded">

            <!--执行事件-->

            <EventTrigger.Actions>

                <!--开始动画-->

                <BeginStoryboard Storyboard="{StaticResource myStoryboard}"></BeginStoryboard>

            </EventTrigger.Actions>

        </EventTrigger>

    </Window.Triggers>

 

结果视图：圆形的宽度一直在循环拉伸

在上面定义了一个DoubleAnimation类型的动画，然后把动画加入了故事板storyboard，最后设置执行动画的对象和改变的属性。