最近在写一个动画效果的时候,发现有个常用的参数:动画的速度控制参数,之前对它没有什么深入理解.今天突然来了兴趣,就来详细研究下它.
一.UIViewAnimationOptions是什么?
它是控制动画效果的一个选项,这里我重点研究的动画速度控制相关的内容。
首先,贴一段常用的UIView动画代码:
[UIView animateWithDuration:1 animations:^{
// 动画代码
} completion:^(BOOL finished) {
}];
此时,是不用传入options参数的, 这是完整的UIView动画的方法:
[UIView animateWithDuration:1 delay:0 options:options animations:^{
// 动画代码
} completion:^(BOOL finished) {
}];
这里的options就是控制动画效果的枚举类型 UIViewAnimationOptions
它有四个枚举值是跟速度控制相关的: UIViewAnimationOptionCurveEaseInOut,UIViewAnimationOptionCurveEaseIn,UIViewAnimationOptionCurveEaseOut,和UIViewAnimationOptionCurveLinear, 苹果文档对它解释如下:
UIViewAnimationOptionCurveEaseInOut
Specify an ease-in ease-out curve, which causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.
UIViewAnimationOptionCurveEaseIn
An ease-in curve causes the animation to begin slowly, and then speed up as it progresses.
UIViewAnimationOptionCurveEaseOut
An ease-out curve causes the animation to begin quickly, and then slow as it completes.
UIViewAnimationOptionCurveLinear
A linear animation curve causes an animation to occur evenly over its duration.
但是仅仅通过文字描述,显然是不够直观,干脆做个动画,来个直观感受:
二.动画效果演示:
我用OC写了个demo,上面是一个UIView动画, 下面是展示动画运动距离的函数曲线:
UIViewAnimationOptionCurveEaseInOut

UIViewAnimationOptionCurveEaseIn

UIViewAnimationOptionCurveEaseOut

UIViewAnimationOptionCurveLinear

三.代码
对这个小demo感兴趣的话,稍后会贴出github地址。
网友评论