动画缓动

开发工具与关键技术：Visual Studio 2017
作者：邓李庆
撰写时间： 2019年7月27日
下面给大家讲一些关于WPF的动画缓动，动画缓动是线性动画有一个缺点，通常让人觉得机械和不够自然。改进动画并创建更趋自然的动画的秘诀是改变变化速率，不是创建以固定不变的速率改变属性的动画，而是需要设计根据某种方式加速或减速的动画，实现更趋自然的动画的最简单方法是使用预置的缓动函数(EasingFunction)。EasyingFunction属性只能接受单个缓动函数对象，所以不能为同一个动画结合不同的缓动函数；
在分析不同的缓动类之前，理解缓动函数的应用时机是很重要的。所有的缓动函数类都继承自EasingFunctionBase类，并且继承了EasingMode属性，EasingMode有三种值，分别是：EasyIn(在动画开始时应用缓动效果)、EasyOut（动画结束时应用缓动效果）和EasyInOut（在开始和结束时应用缓动动画）。当应用缓动函数时不会改变动画的持续时间；来看看属性表：

名称	说明	属性
BackEase	当使用EaseIn模式应用该缓动函数时，在动画开始之前拉回动画，当使用EaseOut模式应用该缓动函数时，允许动画稍微超越，然后拉回	Amplitude属性决定了拉回和超越的量。默认值是1，可减少该属性值（大于0的任何值）以缩减效果，或增加该属性值放大效果
ElasticEase	当使用EaseOut模式应用该缓动函数时，使动画超越其最大值并前后摆动，逐渐增加	Oscillations属性控制动画前台摆动的次数
BounceEase	执行与Elastic缓东函数类似的效果，只要弹跳永远不会超越初始值或最终值	Bounce属性控制动画回调的次数（默认是2）
CircleEase	使用圆函数加速（使用EaseIn模式），或减速（使用EaseOut模式）	无
CublicEase	使用基于时间立方的函数加速，其效果与Circle类似，但是加速效果更缓和	无
QuadraticEase	使用基于时间平方的函数加速，效果与CublicEase类似，但加速过程更明显	无

自定义缓动函数
创建自定义缓动函数一般需要以下几个步骤：
a)、新建一个类，让其继承自EasingFunctionBase类
b)、重写EaseInCore()方法和CreateInstanceCore()方法
c）、定义依赖属性
d）、引用
XAML代码图：

<Window.Triggers>
        <!--事件触发器，窗体加载的Loaded事件-->
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="480" Duration="0:0:5"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="480" Duration="0:0:5">
                            <!--<DoubleAnimation.EasingFunction>-->
                            <!--调用自定义缓动函数类-->
                            <!--<local:RandomJitterEase EasingMode="EaseIn" Jitter="1500"></local:RandomJitterEase>-->
                            <!--</DoubleAnimation.EasingFunction>-->
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Canvas ClipToBounds="True">
        <Ellipse Name="ellipse1" Width="25" Height="25" Fill="Red"></Ellipse>
        <Ellipse Name="ellipse2" Width="25" Height="25" Fill="Green" Margin="0,70,0,0"></Ellipse>
    </Canvas>

几乎所有逻辑代码都在EaseInCore方法中运行。该方法接受一个规范化的时间值，本质上表示动画进度从0到1之间的值，当动画开始时，规范化的时间值是0，它从该点开始增加，直到在动画结束点达到1；在动画运行期间，每次更新动画的值时，WPF都会调用EaselnCore方法，确切的调用帧率取决于动画的帧率；见后台代码图：

public class RandomJitterEase : EasingFunctionBase
        {
            //声明一个Random类,用于声明随机数
            Random rand = new Random();
            //重写EaseCore方法
            protected override double EaseInCore(double normalizedTime)
            {
                //几乎所有逻辑代码都在EaseInCore方法中运行。该方法接受一个规范化的时间值，本质上是表示动画进度从         
                //0到1之间的值，当动画开始时，规范化的时间值是0，它从该点开始增加，直到在动画结束点达到1.         
                //在动画运行期间，每次更新动画的值时，WPF都会调用EaseInCore方法，确切的调用频率取决于动画的帧率
                if (normalizedTime == 1)
                {
                    return 1;
                }
                else
                {
                    return Math.Abs(normalizedTime - (double)rand.Next(0, 10) / (2010 - Jitter));
                }
            }
            protected override System.Windows.Freezable CreateInstanceCore()
            { return new RandomJitterEase(); }
            //定义一个依赖属性
            public static readonly DependencyProperty JitterProperty;
            static RandomJitterEase()
            {
                JitterProperty = DependencyProperty.Register("Jitter", typeof(int), typeof(RandomJitterEase), new UIPropertyMetadata(1000), new ValidateValueCallback(ValidateJitter));
            }
            public int Jitter
            { get { return (int)GetValue(JitterProperty); } set { SetValue(JitterProperty, value); } }
 
            //此方法用于判断值
            private static bool ValidateJitter(object value)
            {
                int jitterValue = (int)value;
                if (jitterValue <= 2000 && jitterValue >= 0)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
        }

效果图：