时间函数:动画总会在设定的时间长度内执行完,在这段时间内,动画的变化速度有多快,主要决定于时间函数
CA_EXTERN NSString * const kCAMediaTimingFunctionLinear //线性函数
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn //缓入
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut //缓出
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut //慢入慢出
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionDefault //默认
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
- 线性函数
- 缓入
- 缓出
- 慢入慢出
- 默认
系统提供的设置时间函数的方法
[CAMediaTimingFunction functionWithControlPoints::::]
里面的四个参数范围值都是0.0 -1.0
之间,这些数值的由来可以看曲线图起始点和终点对应的切线。
思路:拆分动画
- 1.把基础图形设置为两个连着的半圆弧
CAShapeLayer * first = [CAShapeLayer layer];
first.path = [self wormRunLongPath];
first.lineWidth = 10;
first.lineCap = kCALineCapRound;
first.lineJoin = kCALineJoinRound;
first.strokeColor = [UIColor redColor].CGColor;
first.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:first];
- (CGPathRef)wormRunLongPath {
//中间点
CGPoint center = CGPointMake(220, 300/2);
CGFloat radius = 30;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(center.x - radius , center.y) radius:radius startAngle:M_PI endAngle:2 * M_PI clockwise:YES];
[path addArcWithCenter:CGPointMake(center.x + radius, center.y) radius:radius startAngle:M_PI endAngle:2 * M_PI clockwise:YES];
return path.CGPath;
}
运行,就得到了上面两个半圆的效果。
- 2 那么接下来我们要实现让它动起来:实现红色虫运动的前半部分如下图
//第一阶段虫子的拉伸
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = [NSNumber numberWithFloat:0.0];
animation.toValue = [NSNumber numberWithFloat:0.5];
//从0到0.5表示动画的过程从无到一个半圆
animation.duration = 0.75;
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.42 :0.0 :1.0 :0.55];
animation.removedOnCompletion = false;
animation.fillMode = kCAFillModeForwards;
运行,OK.
- 3 实现红色虫前半部收缩的效果如下图
//第一阶段虫子的缩小
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation1.fromValue = [NSNumber numberWithFloat:0.0];
animation1.toValue = [NSNumber numberWithFloat:0.5];
animation1.duration = 0.45;
animation1.beginTime = 0.75;
animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation1.fillMode = kCAFillModeForwards;
稍微注意一下我们就发现其实只是keyPath
的区别,一个是start
,一个是end
,同事我们设置beginTime
表示的是在2
的效果完成之后才开始3
的效果,刚好衔接上去就凑成了一个完整的动画。然后把这两个放到一个动画组里面试试效果.
- 4 实现前半部分动画完整衔接如下图
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:animation,animation1,nil];
group.repeatCount = HUGE_VALF;
group.duration = 0.75 * 2;
[self.firstWormShapeLayer addAnimation:group forKey:@"one"];
- 5.同理实现红色虫后半部分的拉伸和收缩如下图
//第二阶段虫子的拉伸
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation2.fromValue = [NSNumber numberWithFloat:0.5];
animation2.toValue = [NSNumber numberWithFloat:1.0];
animation2.duration = 0.75;
animation2.beginTime = 1.2;
animation2.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.42 :0.0 :1.0 :0.55];
animation2.fillMode = kCAFillModeForwards;
//第二阶段虫子的缩小
CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation3.fromValue = [NSNumber numberWithFloat:0.5];
animation3.toValue = [NSNumber numberWithFloat:1];
animation3.duration = 0.45;
animation3.beginTime = 0.75 + 1.2;
animation3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation3.fillMode = kCAFillModeForwards;
-
6 把上面四个动画一起放入动画组里面实现效果如下图
- 7 然后分析一下我们发现跟效果图就差了一个关于
x
的位移//实现持续移动的效果:第一阶段平移 CABasicAnimation *xTranslationAm = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"]; xTranslationAm.toValue = [NSNumber numberWithFloat: (60 / -1.0)]; xTranslationAm.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; xTranslationAm.duration = 1.18; xTranslationAm.fillMode = kCAFillModeForwards; //实现持续移动的效果:第二阶段平移 CABasicAnimation *xTranslationAm2 = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"]; xTranslationAm2.toValue = [NSNumber numberWithFloat: (60 / -1.0) * 2]; xTranslationAm2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; xTranslationAm2.duration = 1.18; xTranslationAm2.beginTime = 1.20; xTranslationAm2.fillMode = kCAFillModeForwards;
把位移加入到动画组里面运行就实现了红色的效果
![基本动画分解7.gif](http://upload-images.jianshu.io/upload_images/1851080-6b2a75e429e3baf3.gif?imageMogr2/auto-orient/strip)
同理,可实现黄色和绿色的加入。