在iOS 开发中，要做一个动画效果，我们会用到CAKeyframeAnimation。 这个库提供了一些对frame 动画的控制，什麽是frame 动画？ frame 动画就好比电视动画那样，由一格一格的图画(也可以想像成frame)构成, 快速播放图画便成了动画。 在CAKeyframeAnimation 的概念是一样, 你只需要提供keyframe 的信息, 程序会自动完成keyframe之间的”图画”。 如果大家有用过adobe flash 这工具, 其实是等同motion/shape tween。 好吧!举个例子比较清楚明白。 如果想对一个图形做一个弹出的动画, 用CAKeyframeAnimation可以写成
1">234567891011121314151617181920CAKeyframeAnimation *boundsOvershootAnimation = [CAKeyframeAnimation animationWithKeyPath:@"bounds.size"];CGSize startingSize = CGSizeZero;CGSize targetSize = CGSizeMake(100,100);CGSize overshootSize = CGSizeMake(120,120);CGSize undershootSize = CGSizeMake(80,80);NSArray *boundsValues = [NSArray
arrayWithObjects:[NSValue valueWithCGSize:startingSize], [NSValue valueWithCGSize:targetSize], [NSValue valueWithCGSize:overshootSize], [NSValue valueWithCGSize:undershootSize], [NSValue valueWithCGSize:targetSize], nil];[boundsOvershootAnimation setValues:boundsValues];NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0f], [NSNumber numberWithFloat:
0.5f], [NSNumber numberWithFloat:0.8f], [NSNumber numberWithFloat:0.9f], [NSNumber numberWithFloat:1.0f], nil]; [boundsOvershootAnimation setKeyTimes:times];boundsOvershootAnimation.duration = 1.0;
这个弹出的动画包含了5个keyframe, 目的是令弹出带点跳动的感觉。 [boundsOvershootAnimation setValues:boundsValues] 这一行代码就设定了这动画的keyframe。 另一个重要的元素就是时间, CAKeyframeAnimation 提供了keyframe 时间的控制, 如果不设定便会以直线性发展。 而这动画会以先慢後快的形式出现, 为什麽呢? 请看[boundsOvershootAnimation setKeyTimes:times] 这一段。 动画长一秒, 由0-0.5秒会进行 startingSize 到 targetSize 的动画, 0.5-0.8秒会进行 targetSize 到 overshootSize 的动画。 如此类推就会做出先慢後快的效果。
CAKeyframeAnimation 还提供了其他方法去控制keyframe, 以下是一个透明淡出的动画。
123456CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0f]; opacityAnimation.toValue = [NSNumber numberWithFloat:0.0f];opacityAnimation.timingFunction:[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn]]; // EaseIn curve//opacityAnimation.timingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]]; // EaseOut curve//opacityAnimation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:1.0 :0.0 :1.0 :0.1]; // Bezier curve
opacityAnimation.timingFunction 是用来控制动画线性发展。 其中[CAMediaTimingFunction functionWithControlPoints:1.0 :0.0 :1.0 :0.1] 是一个贝塞尔曲线的控制方法。 这也可以令动画做到先慢後快或先快後慢的结果。 你会问, 我怎知道效果会怎样? 这里有一个图表化的工具说明数字线性关係 http://netcetera.org/camtf-playground.html
CAKeyframeAnimation提供了不错的功能, 但对於一些比较複杂的动画效果, CAKeyframeAnimation的配置就会变得複杂, 代码亦会很长。 比方说,我要做一个好像皮球跳动的效果。 我们要计算每一个keyframe的位置, 再为每一个keyframe配置动画时间。要做成这麽的一个效果, keyframe会有很多。所以参考了actionscript的Tween动画之後, 开发了一个用於iOS的Tween效果库。 基本原理是用一些Tween function 包裹计算变化值的公式, 再扩展CAKeyframeAnimation自动按照Tween function来计算keyframe。以下是皮球跳动的效果。
123EasingFunction easingFn = [Easing getBounce];CAKeyframeAnimation *transAnimi = [CAKeyframeAnimation animationWithKeyPath:@"position.x" easeFunction:easingFn.easeOut fromValue:0.0 toValue:200];transAnimi.duration = 3.0;
[Easing getBounce] 是Tween动画库内跳动效果的公式。 [CAKeyframeAnimation animationWithKeyPath:@"position.x" easeFunction:easingFn.easeOut fromValue:0.0 toValue:200]是CAKeyframeAnimation的扩展。 回传的是一般CAKeyframeAnimation, 可以直接用在UIView 物件上。Tween动画库提供以下效果, 图表化可到这里http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
-Elastic
-Bounce
-Back
-Linear
-Expo
-Quad
-Cubic
-Quart
-Quint
-Sine
-Circ
Tween动画库是可以再扩展。参考下列直线性的公式, t是当前时间值, b是属性开始值, c是属性变化差, d是总时间值, 回传的是t时间的属性值。大家可以自由改变去创建一个新的公式。
12345678910111213+(EasingFunction)getLinear{ EasingFunction ease; ease.easeIn = ^double(double t, double b, double c, double d) { return c*t/d + b; }; ease.easeOut = ^double(double t, double b, double c, double d) { return c*t/d + b; }; ease.easeInOut = ^double(double t, double b, double c, double d) { return c*t/d + b; }; return ease;}
演示Demo
最后附上源码, 请留言交流指教。
http://url.cn/EyBoWa
感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。
注明出处格式：腾讯ISUX (http://isux.tencent.com/ios-easing-tween-animation.html)