本文主要是介绍动画缓动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
开发工具与关键技术：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;}}}
效果图：
这篇关于动画缓动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
