WPF —— 动画 - 技术栈

wpf动画类型

1<类型>Animation这些动画称为from/to/by动画或者叫基本动画，他们会在起始值或者结束值进行动画处理，常用的例如

2 <类型>AnimationUsingKeyFrames: 关键帧动画，功能要比from/to这些动画功能要强大，可以在任意地一个帧添加对应得动画效果甚至可以设置动画过程当中的

运行的速率：eg:doubleAnimationUsingKeyFrames

3 <类型>AnimationUsingPath 路径动画，主要支持使用几何图形来生成路径动画值

4 <类型>AnimationBase 动画基类，是from/to和关键帧动画的基类，实现自定义动画可以实现该类

关键帧动画:

doubleAnimationusingkeyframes // double类型的关键帧动画

ObjectAnimationusingkeyframes // Object类型的关键帧动画

ColorAnimationusingkeyframes // 颜色类型的关键帧动画

StringAnimationusingkeyframes // 字符串类型的关键帧动画

动画的几要素：

1 做动画的标签 RectAnle

2 触发做动画的条件，触发器

3 添加Storyboard

4 添加动画类型 <DoubleAnimationUsingKeyFrames>

5 动画类型标签添加：动画元素和动画属性两个属性

Storyboard.TargetName 确定动画元素

Storyboard.TargetProperty 做动画的属性

动画常用的属性：

AutoReverse="True" 动画是否支持相反方向的动画

RepeatBehavior="Forever" 重复的行为： forever永远

Storyboard.TargetName 确定动画元素

Storyboard.TargetProperty 做动画的属性

其中的一帧的状态 keytime 对应的时间 value做动画属性的值

关于动画的实例

XML 复制代码

<!-- 矩形标签: 做动画的标签 -->
<Rectangle Name="rect"
           Width="70"
           Height="100"
           HorizontalAlignment="Left"
           Fill="Blue">
    <Rectangle.Triggers>
        <!--标签加载的时候触发动画-->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
            <!--开始添加动画版 把动画添加到动画版上进行管理动画-->
            <BeginStoryboard>
                <Storyboard>
                    <!--AutoReverse="True" 动画是否支持相反方向的动画
                    RepeatBehavior="Forever" 重复的行为 ： forever永远
                    Storyboard.TargetName 确定动画元素
                     Storyboard.TargetProperty 做动画的属性
                    -->
                    <DoubleAnimationUsingKeyFrames AutoReverse="True"
                                                   RepeatBehavior="Forever"
                                                   Storyboard.TargetName="rect"
                                                   Storyboard.TargetProperty="Height">
                        <!--其中的一帧的状态 keytime 对应的时间 value做动画属性的值-->
                        <EasingDoubleKeyFrame KeyTime="0:0:0"
                                              Value="0">
                            
                        </EasingDoubleKeyFrame>
                        <LinearDoubleKeyFrame KeyTime="0:0:3"
                                              Value="400">
                            
                        </LinearDoubleKeyFrame>
                        <LinearDoubleKeyFrame KeyTime="0:0:5"
                                              Value="800">
                            
                        </LinearDoubleKeyFrame>
                        
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>