IOS缓动动画Easing算法使用分析

最新推荐文章于 2018-12-20 14:25:07 发布

iteye_3142

最新推荐文章于 2018-12-20 14:25:07 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

分类专栏： IOS 文章标签： OC Objective-C IOS Easing 缓动动画

本文链接：https://blog.youkuaiyun.com/iteye_3142/article/details/82579770

IOS 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了缓动动画中Easing算法的原理与应用，通过实例展示了如何利用Easing算法在ActionScript、JavaScript和Objective-C中实现平滑过渡效果。详细解释了如何计算区间内各阶段的过渡值，并通过CAKeyframeAnimation进行动画渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于一个区间内的缓动动画来说

中间的过渡值算法，很多都在使用Easing这种，无论是ActionScript、JavaScript还是刚刚才研究的Objective-C

具体思路如下

首先是计算出这个区间内的各个阶段

比如这个过程是分60帧的动画，那么在这60帧中的每一帧，计算出这一帧所得的值，放到一个数组里面，然后通过CAKeyframeAnimation来对这一组数值分别进行更换
而这组数值就是通过Easing的各种不同算法算出来的

具体代码如下


+ (id)animationWithKeyPath:(NSString *)path function:(AHEasingFunction)function fromPoint:(CGPoint)fromPoint toPoint:(CGPoint)toPoint keyframeCount:(size_t)keyframeCount
{
	NSMutableArray *values = [NSMutableArray arrayWithCapacity:keyframeCount];

	CGFloat t = 0.0;
	CGFloat dt = 1.0 / (keyframeCount - 1);
	for(size_t frame = 0; frame < keyframeCount; ++frame, t += dt)
	{
		CGFloat x = fromPoint.x + function(t) * (toPoint.x - fromPoint.x);
		CGFloat y = fromPoint.y + function(t) * (toPoint.y - fromPoint.y);
		[values addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
	}

	CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:path];
	[animation setValues:values];
	return animation;
}

定义一个数组，用来存放每一帧的预期值
定义一个时间t，其实是0.0
定义一个每帧平分的比例，dt
然后for循环，计算中间平分每一帧的预期值，如x
预期值=起始值+Easing的变换方程带入（当前帧占总帧的百分比）*起始到预期之间的差距值
这样每帧就会按照Easing不同方程的规律得出相应的变化值了

关于animationWithKeyPath方法的参数，可以是如下
transform.scale = 比例轉換
transform.scale.x = 闊的比例轉換
transform.scale.y = 高的比例轉換
transform.rotation.z = 平面圖的旋轉
opacity = 透明度
margin
zPosition
backgroundColor
cornerRadius
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius

当然，这些事CAKeyframeAnimation所支持的，还可以自己去写自定义的属性值