组动画

简介: 组动画

前面的博客有对cocoachina上一篇动画的文章做过简单的说明,我们所看到的各种动画其实就是动画的组合,把不同的动画组合起来就成了很多我们认为高大上的效果,看下图,边移动变换颜色:

1.png

其中沿贝赛尔曲线运动是一个运动轨迹的动画(叫做关键帧动画,前面有单篇博客专门说关键帧动画),变换颜色是另一个基础动画,通过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];

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

目录
相关文章
|
前端开发 JavaScript
优美的Reactl列表动画:Styled-Components动画实践
优美的Reactl列表动画:Styled-Components动画实践
|
Python
PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩,设置页面控件居中显示实例演示
PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩,设置页面控件居中显示实例演示
1098 0
自定义过渡动画
自定义过渡动画
118 0
自定义过渡动画
|
JavaScript 开发者
动画-使用过渡名实现动画|学习笔记
快速学习动画-使用过渡名实现动画
动画-使用过渡名实现动画|学习笔记
|
JavaScript 开发者
动画-使用 transition-group 元素实现列表动画|学习笔记
快速学习动画-使用 transition-group 元素实现列表动画
147 0
动画-使用 transition-group 元素实现列表动画|学习笔记
|
JavaScript 开发者
动画-使用transition-group元素实现列表动画|学习笔记
快速学习动画-使用transition-group元素实现列表动画
126 0
动画-使用transition-group元素实现列表动画|学习笔记
|
JavaScript 开发者
动画-实现列表删除和删除时候的动画效果|学习笔记
快速学习动画-实现列表删除和删除时候的动画效果
155 0
有关卡片动画的解读
有关卡片动画的解读
185 0
有关卡片动画的解读