动画

关键帧

关键时间可以指定为时间值、百分比或特殊值Uniform或Paced。

          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform02" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed as Percentages. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
            <LinearDoubleKeyFrame Value="200" KeyTime="80%" />
            <LinearDoubleKeyFrame Value="500" KeyTime="90%" />
            <LinearDoubleKeyFrame Value="600" KeyTime="100%" />
          </DoubleAnimationUsingKeyFrames>

Uniform关键时间将可用时间平均除以关键帧数，以确定每个关键帧的结束时间。

<DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform03" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Uniform. 
                 When a key time is set to "Uniform" the total allotted 
                 time of the animation is divided evenly between key frames.  
                 In this example, the total duration of the animation is 
                 ten seconds and there are four key frames each of which 
                 are set to "Uniform", therefore, the duration of each key frame 
                 is 3.3 seconds (10/3). -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
          </DoubleAnimationUsingKeyFrames>

Paced关键时间根据每个关键帧的长度分配可用时间，以确定每个帧的持续时间。这样，动画的速度或速率将保持不变。

<DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform04" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Paced. 
                 Paced values are used when a constant rate is desired. 
                 The time allocated to a key frame with a KeyTime of "Paced" 
                 is determined by the time allocated to the other key 
                 frames of the animation. This time is calculated to 
                 attempt to give a "paced" or "constant velocity" 
                 for the animation. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
          </DoubleAnimationUsingKeyFrames>

这个例子不够典型，应该由不同的关键帧类型组合起来才有意义

缓动函数

运行时提供的几个缓动函数之一来创建常见效果。

BackEase：在动画开始在指示的路径中设置动画之前稍微缩回动画的运动。
BounceEase：创建弹跳效果。
CircleEase：创建使用圆形函数加速和/或减速的动画。
CubicEase：创建使用公式f（t） = t3加速和/或减速的动画。
ElasticEase：创建类似于弹簧来回摆动的动画，直到它开始休息。
ExponentialEase：创建使用指数公式加速和/或减速的动画。
PowerEase：创建使用公式f（t） = tp的公式加速和/或减速的动画Power，其中 p 等于属性。
QuadraticEase：创建使用公式f（t） = t2加速和/或减速的动画。
QuarticEase：创建使用公式f（t） = t4加速和/或减速的动画。
QuinticEase：创建使用公式f（t） = t5加速和/或减速的动画。
SineEase：创建使用子项公式加速和/或减速的动画。

要将缓动函数应用于动画，请使用动画EasingFunction的属性指定要应用于动画的缓动函数。

<DoubleAnimation From="30" To="200" Duration="00:00:3" 
                         Storyboard.TargetName="myRectangle" 
                         Storyboard.TargetProperty="Height">
                            <DoubleAnimation.EasingFunction>
                                <BounceEase Bounces="2" EasingMode="EaseOut" 
                                 Bounciness="2" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>

属性EasingMode更改缓动函数的特性，即更改动画插值的方式。您可以为EasingMode：

EaseIn：插值遵循与缓动函数关联的数学公式。
EaseOut：插值遵循 100% 插值减去与缓动函数关联的公式的输出。
EaseInOut：插值用于EaseIn动画的上半部分和EaseOut下半场。

路径动画

WPF 提供以下路径动画类。

表 1
属性类型	相应的路径动画类	示例
Double	DoubleAnimationUsingPath	沿着路径针对对象进行动画处理（双精度动画）
Matrix	MatrixAnimationUsingPath	沿着路径针对对象进行动画处理（矩阵动画）
Point	PointAnimationUsingPath	沿着路径针对对象进行动画处理（点动画）

<MatrixAnimationUsingPath
              Storyboard.TargetName="ButtonMatrixTransform"
              Storyboard.TargetProperty="Matrix"
              DoesRotateWithTangent="True"
              Duration="0:0:5" 
              RepeatBehavior="Forever" >
                <MatrixAnimationUsingPath.PathGeometry>
                  <PathGeometry 
                    Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" 
                    PresentationOptions:Freeze="True" />
                </MatrixAnimationUsingPath.PathGeometry>
              </MatrixAnimationUsingPath>

MatrixAnimationUsingPath时，可以沿路径移动对象。如果将的属性DoesRotateWithTangent设置为true，它还会沿路径的曲线旋转对象。

每个路径动画类都提供了PathGeometry用于指定其输入的属性。PathGeometry对象由一个或多个 PathFigure 对象组成，每个对象 PathFigure 表示不同的 "图形" 或形状。每个 PathFigure 对象都由一个或多个 PathSegment 对象组成，每个对象表示图形或形状的连接部分。

posted @ 2020-07-21 20:30 yetsen 阅读(115) 评论(0) 编辑收藏举报

刷新页面返回顶部

yetsen

动画

关键帧

缓动函数

路径动画

公告