zl程序教程

您现在的位置是:首页 >  工具

当前栏目

组动画

2023-09-11 14:21:22 时间

前面的博客有对cocoachina上一篇动画的文章做过简单的说明,我们所看到的各种动画其实就是动画的组合,把不同的动画组合起来就成了很多我们认为高大上的效果,看下图,边移动变换颜色:
这里写图片描述
其中沿贝赛尔曲线运动是一个运动轨迹的动画(叫做关键帧动画,前面有单篇博客专门说关键帧动画),变换颜色是另一个基础动画,通过CAAnimationGroup就让它们同时执行,下面看代码:

UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
[bezierPath moveToPoint:CGPointMake(0, 150)];
[bezierPath addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(75, 0) controlPoint2:CGPointMake(170, 450) ];

//draw the path using a CAShapeLayer
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.path = bezierPath.CGPath;
pathLayer.fillColor = [UIColor clearColor].CGColor;
pathLayer.strokeColor = [UIColor redColor].CGColor;
pathLayer.lineWidth = 3.0f;
[self.containerView.layer addSublayer:pathLayer];

//add a colored layer
CALayer *colorLayer = [CALayer layer];
colorLayer.frame = CGRectMake(0, 0, 64, 64);
colorLayer.position = CGPointMake(0, 150);
colorLayer.backgroundColor = [UIColor greenColor].CGColor;
[self.containerView.layer addSublayer:colorLayer];

//create the position animation
CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animation];
animation1.keyPath = @"position";
animation1.path = bezierPath.CGPath;
animation1.rotationMode = kCAAnimationRotateAuto;

//create the color animation
CABasicAnimation *animation2 = [CABasicAnimation animation];
animation2.keyPath = @"backgroundColor";
animation2.toValue = (__bridge id)[UIColor redColor].CGColor;

//create group animation
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
groupAnimation.animations = @[animation1, animation2];
groupAnimation.duration = 4.0;

//add the animation to the color layer
[colorLayer addAnimation:groupAnimation forKey:nil];

这里是对组动画的简单运用,还有很多的组合方式,想要实现炫酷的动画效果,理解了组动画和绘图技巧后就足以动手自己随意组合了。