三.iOS贝塞尔曲线与CAReplicatorLayer详解

练习实现效果:

创建一个圆形layer并圆形映射多个,同时左旋转动画

挑战自我练习:

自己做一个柱状图并且做出音乐节奏动感动画

一.CAReplicatorLayer属性

@property NSInteger instanceCount;

要创建的拷贝数,可以做成动画

@property BOOL preservesDepth;

定义这个层是否将它的子层压平到它的平面上不(也就是说，它是否与转换层相似,默认NO)如果是，则应用标准限制(参见CATransformLayer.h

@property CFTimeInterval instanceDelay;

延时多久创建一个映射layer

@property CATransform3D instanceTransform;

创建映射的CATransform3D位置变化

@property(nullable) CGColorRef instanceColor;

在原对象的基础上添加的颜色,可做动画

@property float instanceRedOffset;

@property float instanceGreenOffset;

@property float instanceBlueOffset;

@property float instanceAlphaOffset;

在原对象基础颜色上做变化,可做动画

二.实现效果

1.创建CAReplicatorLayer对象并设置响应属性

CAReplicatorLayer *replicator = [CAReplicatorLayer layer];

replicator.frame = CGRectMake(0, 100, KScreen_W / 4.0f, KScreen_W / 4.0f);

[self.view.layer addSublayer:replicator];

//映射layer对象的次数

replicator.instanceCount = 10;

//创建CATransform3D对象设置位置依次变化

CATransform3D transform = CATransform3DIdentity;

//每次角度变化2*M_PI / 10 ,Z轴稍微变化为止否则会重叠

transform = CATransform3DRotate(transform, M_PI / 5.0, 0, 0, 0.001);

replicator.instanceTransform = transform;

//设置颜色渐变

replicator.instanceBlueOffset = -0.2;

replicator.instanceGreenOffset = -0.2;

2.创建源对象,并设置给CAReplicatorLayer对象

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(KScreen_W / 8.0f - 2.5, 20.0f, 5.0f, 5.0f)];

maskLayer = [CAShapeLayer layer];

maskLayer.fillColor = [UIColor redColor].CGColor;

maskLayer.path = bezierPath.CGPath;

maskLayer.fillColor = [UIColor colorWithWhite:0.9 alpha:1].CGColor;

maskLayer.fillRule = kCAFillRuleEvenOdd;

[replicator addSublayer:maskLayer];

3.做旋转动画

CABasicAnimation* rotationAnimation;

rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI / 10 - 0.001 ];

rotationAnimation.duration = 0.05;

rotationAnimation.cumulative = YES;

rotationAnimation.repeatCount = CGFLOAT_MAX;

[replicator addAnimation:rotationAnimation forKey:@"aa"];

Copyright © 2017年ZaneWangWang. All rights reserved.

持续更新中...