开发工具与关键技术: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;
}
}
}
效果图: