iOS动画 ---特殊Layer动画
2016-10-09 21:38
260 查看
iOS动画 ---特殊Layer动画
iOS中有一些特殊的layer,也可以做一些动画效果,本文就补充两个可以做动画效果的layer: CAEmitterLayer 和 CAReplicatorLayer。CAEmitterLayer
Emitter 发射器,因为可以用它来做爆炸、发射、下雪等效果。比如,这个下雪效果:下雪.gif- (void)setEmitter { CAEmitterLayer *snowEmitter = [CAEmitterLayer layer]; //发射点的位置 snowEmitter.emitterPosition = CGPointMake(self.view.bounds.size.width * 0.5, -30); // snowEmitter.emitterSize = CGSizeMake(self.view.bounds.size.width * 2.0, 0.0); snowEmitter.emitterShape = kCAEmitterLayerLine; snowEmitter.emitterMode = kCAEmitterLayerOutline; snowEmitter.shadowColor = [UIColor whiteColor].CGColor; snowEmitter.shadowOffset = CGSizeMake(0.0, 1.0); snowEmitter.shadowRadius = 0.0; snowEmitter.shadowOpacity = 1.0; CAEmitterCell *snowCell = [CAEmitterCell emitterCell]; snowCell.birthRate = 1.0; //每秒出现多少个粒子 snowCell.lifetime = 120.0; // 粒子的存活时间 snowCell.velocity = -10; //速度 snowCell.velocityRange = 10; // 平均速度 snowCell.yAcceleration = 2;//粒子在y方向上的加速度 snowCell.emissionRange = 0.5 * M_PI; //发射的弧度 snowCell.spinRange = 0.25 * M_PI; // 粒子的平均旋转速度 snowCell.contents = (id)[UIImage imageNamed:@"snow"].CGImage; snowCell.color = [UIColor colorWithRed:0.6 green:0.658 blue:0.743 alpha:1.0].CGColor; snowEmitter.emitterCells = @[snowCell]; [self.view.layer insertSublayer:snowEmitter atIndex:0]; }喷射效果:喷射.gif主要代码:
- (void)setEmitter { CAEmitterLayer *snowEmitter = [CAEmitterLayer layer]; //发射点的位置 snowEmitter.emitterPosition = self.view.center; // snowEmitter.emitterSize = CGSizeMake(10.0, 0.0); snowEmitter.emitterShape = kCAEmitterLayerLine; snowEmitter.emitterMode = kCAEmitterLayerOutline; CAEmitterCell *snowCell = [CAEmitterCell emitterCell]; snowCell.birthRate = 50.0; snowCell.lifetime = 10.0; snowCell.velocity = 40; snowCell.velocityRange = 10; snowCell.yAcceleration = 2; snowCell.emissionRange = M_PI / 9; snowCell.scale = 0.1; //缩小比例 snowCell.scaleRange = 0.08;// 平均缩小比例 snowCell.contents = (id)[UIImage imageNamed:@"Sparkle"].CGImage; snowCell.color = [UIColor colorWithRed:0.6 green:0.658 blue:0.743 alpha:1.0].CGColor; snowEmitter.emitterCells = @[snowCell]; [self.view.layer insertSublayer:snowEmitter atIndex:0]; }烟花爆炸效果:烟花.gif
- (void)fireworks { CAEmitterLayer *emitter = [CAEmitterLayer layer]; emitter.frame = self.view.bounds; [self.view.layer addSublayer:emitter]; //configure emitter emitter.renderMode = kCAEmitterLayerAdditive; emitter.emitterPosition = self.view.center; emitter.emitterSize = CGSizeMake(25, 0); //create a particle template CAEmitterCell *cell = [[CAEmitterCell alloc] init]; cell.contents = (id)[UIImage imageNamed:@"Sparkle"].CGImage; cell.birthRate = 150; cell.lifetime = 5.0; cell.alphaSpeed = -0.4; cell.velocity = 50; cell.velocityRange = 50; cell.scale = 0.1; cell.scaleRange = 0.08; cell.emissionRange = M_PI * 2.0; emitter.emitterCells = @[cell]; }按钮点击效果:按钮点击.gif初始设置:
CAEmitterCell *emitterCell = [CAEmitterCell emitterCell]; emitterCell.name = @"explosion"; emitterCell.alphaRange = 0.2; emitterCell.alphaSpeed = -1.0; emitterCell.lifetime = 0.7; emitterCell.lifetimeRange = 0.2; emitterCell.birthRate = 0; emitterCell.velocity = 40; emitterCell.velocityRange = 10.0; emitterCell.scale = 0.05; emitterCell.scaleRange = 0.02; emitterCell.contents = (id)[UIImage imageNamed:@"Sparkle"].CGImage; _explosionLayer = [CAEmitterLayer layer]; _explosionLayer.name = @"emitterLayer"; _explosionLayer.emitterShape = kCAEmitterLayerCircle; _explosionLayer.emitterMode = kCAEmitterLayerOutline; _explosionLayer.emitterPosition = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)); _explosionLayer.emitterSize = CGSizeMake(25, 0); _explosionLayer.emitterCells = @[emitterCell]; _explosionLayer.renderMode = kCAEmitterLayerOldestFirst; [self.layer addSublayer:_explosionLayer]; self.emitterCells = @[emitterCell];点击执行动画
- (void)startAnimate { if (_animating) { return; } _animating = YES; [self performSelector:@selector(explode) withObject:nil afterDelay:0.2]; } - (void)explode { _explosionLayer.beginTime = CACurrentMediaTime(); [_explosionLayer setValue:@500 forKeyPath:@"emitterCells.explosion.birthRate"]; [self performSelector:@selector(stop) withObject:nil afterDelay:0.1]; } - (void)stop { _animating = NO; [_explosionLayer setValue:@0 forKeyPath:@"emitterCells.explosion.birthRate"]; }
CAReplicatorLayer
CAReplicatorLayer 可以多次拷贝某个layer,然后重新布局,实现动画效果。多个视图绕Y轴旋转,可以做loading效果:旋转.gif主要代码:- (void)setup { CGFloat margin = 5.0; CGFloat width = self.layer.bounds.size.width; CGFloat dotW = (width - 2 * margin) / 3; CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = CGRectMake(0, (width - dotW) * 0.5, dotW, dotW); shapeLayer.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, dotW, dotW)].CGPath; shapeLayer.fillColor = [UIColor redColor].CGColor; CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer]; replicatorLayer.frame = CGRectMake(0, 0, width, width); replicatorLayer.instanceDelay = 0.1; replicatorLayer.instanceCount = 3; CATransform3D transform = CATransform3DMakeTranslation(margin + dotW, 0, 0); replicatorLayer.instanceTransform = transform; [replicatorLayer addSublayer:shapeLayer]; [self.layer addSublayer:replicatorLayer]; CABasicAnimation *basicAnima = [CABasicAnimation animationWithKeyPath:@"transform"]; basicAnima.fromValue = [NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, 0, 0, 1.0, 0)]; basicAnima.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, M_PI, 0, 1.0, 0)]; basicAnima.repeatCount = HUGE; basicAnima.duration = 0.6; [shapeLayer addAnimation:basicAnima forKey:@"scaleAnimation"]; }水波纹效果,类似QQ语音通话和支付宝的咻咻咻水波纹.gif
- (void)setup { self.layer.backgroundColor = [UIColor clearColor].CGColor; CAShapeLayer *pulseLayer = [CAShapeLayer layer]; pulseLayer.frame = self.layer.bounds; pulseLayer.path = [UIBezierPath bezierPathWithOvalInRect:pulseLayer.bounds].CGPath; pulseLayer.fillColor = [UIColor redColor].CGColor; pulseLayer.opacity = 0.0; CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer]; replicatorLayer.frame = self.bounds; replicatorLayer.instanceCount = 8; replicatorLayer.instanceDelay = 0.5; [replicatorLayer addSublayer:pulseLayer]; [self.layer addSublayer:replicatorLayer]; CABasicAnimation *opacityAnima = [CABasicAnimation animationWithKeyPath:@"opacity"]; opacityAnima.fromValue = @(0.3); opacityAnima.toValue = @(0.0); CABasicAnimation *scaleAnima = [CABasicAnimation animationWithKeyPath:@"transform"]; scaleAnima.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.0, 0.0, 0.0)]; scaleAnima.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0.0)]; CAAnimationGroup *groupAnima = [CAAnimationGroup animation]; groupAnima.animations = @[opacityAnima, scaleAnima]; groupAnima.duration = 4.0; groupAnima.autoreverses = NO; groupAnima.repeatCount = HUGE; [pulseLayer addAnimation:groupAnima forKey:@"groupAnimation"]; }animation.gif
- (void)setup { CGFloat margin = 5.0; CGFloat cols = 3; CGFloat width = self.layer.bounds.size.width; CGFloat dotW = (width - margin * (cols - 1)) / cols; CAShapeLayer *dotLayer = [CAShapeLayer layer]; dotLayer.frame = CGRectMake(0, 0, dotW, dotW); dotLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, dotW, dotW)].CGPath; dotLayer.fillColor = [UIColor redColor].CGColor; CAReplicatorLayer *replicatorLayerX = [CAReplicatorLayer layer]; replicatorLayerX.frame = CGRectMake(0, 0, width, width); replicatorLayerX.instanceDelay = 0.3; replicatorLayerX.instanceCount = cols; [replicatorLayerX addSublayer:dotLayer]; CATransform3D transform = CATransform3DTranslate(CATransform3DIdentity, dotW + margin, 0, 0); replicatorLayerX.instanceTransform = transform; transform = CATransform3DScale(transform, 1, -1, 0); CAReplicatorLayer *replicatorLayerY = [CAReplicatorLayer layer]; replicatorLayerY.frame = CGRectMake(0, 0, width, width); replicatorLayerY.instanceDelay = 0.3; replicatorLayerY.instanceCount = 3; [replicatorLayerY addSublayer:replicatorLayerX]; CATransform3D transforY = CATransform3DTranslate(CATransform3DIdentity, 0, dotW + margin, 0); replicatorLayerY.instanceTransform = transforY; [self.layer addSublayer:replicatorLayerY]; // [self.layer addSublayer:replicatorLayerX]; //添加动画 CABasicAnimation *opacityAnima = [CABasicAnimation animationWithKeyPath:@"opacity"]; opacityAnima.fromValue = @(0.3); opacityAnima.toValue = @(0.3); CABasicAnimation *scaleAnima = [CABasicAnimation animationWithKeyPath:@"transform"]; scaleAnima.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0.0)]; scaleAnima.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.2, 0.2, 0.0)]; CAAnimationGroup *groupAnima = [CAAnimationGroup animation]; groupAnima.animations = @[opacityAnima, scaleAnima]; groupAnima.duration = 1.0; groupAnima.autoreverses = YES; groupAnima.repeatCount = HUGE; [dotLayer addAnimation:groupAnima forKey:@"groupAnimation"]; }
相关文章推荐
- iOS动画 ---特殊Layer动画
- IOS UIVIEW layer动画 总结
- iOS核心动画进阶选译(1)The layer tree
- iOS程序猿之CAShapeLayer类(动画)
- iOS 动画Animation-4-5: CALayer子类:CATransformLayer
- iOS 动画Animation-4-4: CALayer子类:CAReplicatorLayer
- ios layer 动画-(transform.rotation篇)
- IOS CoreAnimation中layer动画闪烁的解决方法
- IOS开发:动画2 AlayerAnimation
- iOS Layer动画收集
- ios layer 动画-(transform.rotation篇)
- IOS 雷达效果(Layer的动画)笔记
- iOS开发导航控制器下不同视图控制器之间切换:利用CATrasition和view的layer层来实现自定义的动画效果
- ios中的动画小结(view层次和layer层次)
- ios layer 动画-transform.rotation
- ios中layer动画和UIView动画代码总结
- 【iOS开发-57】案例改进:block动画、控件的removeFromSuperview、利用layer设置圆角矩形以及代理模式运用
- ios layer 动画
- iOS-动画 之 Layer(1)
- iOS layer层的转场动画