CAReplicatorLayer是一个Layer容器,添加到容器上的子Layer可以复制若干份;
可以设定子Layer复制份数、设定副本之间的距离、透明度、颜色、旋转、位置等状态属性,因此可以创建很酷的动画效果,像下面这样。
基本使用步骤
- 创建复制图层对象, 设置参数(CAlayer的属性,副本之间的关系)。
- 创建子layer
- 给子layer设置动画
这样带动画的子layer就会复制多份,以你设置的关系显示,而你只用操心一个子层。
下面代码实现如图1.1效果,也简单介绍了CAReplicatorLayer的使用
- (void)viewDidLoad {
[super viewDidLoad];
// 1.创建一个复制图层对象,设置复制层的属性
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
// 1.1.设置复制图层中子层总数:这里包含原始层
replicatorLayer.instanceCount = 8;
// 1.2.设置复制子层偏移量,不包含原始层,这里是相对于原始层的x轴的偏移量
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
// 1.3.设置复制层的动画延迟事件
replicatorLayer.instanceDelay = 0.1;
// 1.4.设置复制层的背景色,如果原始层设置了背景色,这里设置就失去效果
replicatorLayer.instanceColor = [UIColor greenColor].CGColor;
// 1.5.设置复制层颜色的偏移量
replicatorLayer.instanceGreenOffset = -0.1;
// 2.创建一个图层对象 单条柱形 (原始层)
CALayer *layer = [CALayer layer];
// 2.1.设置layer对象的位置
layer.position = CGPointMake(15, self.view.bounds.size.height);
// 2.2.设置layer对象的锚点
layer.anchorPoint = CGPointMake(0, 1);
// 2.3.设置layer对象的位置大小
layer.bounds = CGRectMake(0, 0, 30, 150);
// 2.5.设置layer对象的颜色
layer.backgroundColor = [UIColor whiteColor].CGColor;
// 3.创建一个基本动画
CABasicAnimation *basicAnimation = [CABasicAnimation animation];
// 3.1.设置动画的属性
basicAnimation.keyPath = @"transform.scale.y";
// 3.2.设置动画的属性值
basicAnimation.toValue = @0.1;
// 3.3.设置动画的重复次数
basicAnimation.repeatCount = MAXFLOAT;
// 3.4.设置动画的执行时间
basicAnimation.duration = 0.5;
// 3.5.设置动画反转
basicAnimation.autoreverses = YES;
// 4.将动画添加到layer层上
[layer addAnimation:basicAnimation forKey:nil];
// 5.将layer层添加到复制层上
[replicatorLayer addSublayer:layer];
// 6.将复制层添加到view视图层上
[self.view.layer addSublayer:replicatorLayer];
}
实现波纹扩展效果
Demo中封装了一个类叫 XLKWavePulsLayer ,继承于 CAReplicatorLayer,
实现思路类似,两个私有属性分别保存子层和子层的动画
@property (nonatomic, strong) CALayer *effect;
@property (nonatomic, strong) CAAnimationGroup *animationGroup;
init方法中会设置初始化参数, 其中 CAReplicatorLayer 的参数是通过 set方法中设置的,详细见Demo
- (void)_setupDefaults {
_fromValueForRadius = 0.0;
_fromValueForAlpha = 0.45;
_keyTimeForHalfOpacity = 0.2;
_animationDuration = 3;
_pulseInterval = 0;
_useTimingFunction = YES;
self.repeatCount = INFINITY;
self.radius = 100;
self.haloLayerNumber = 5;
self.startInterval = 1;
self.backgroundColor = [[UIColor colorWithRed:0.7052 green:0.7052 blue:0.7052 alpha:1.0] CGColor];
}
根据设置的参数,设置animationGroup
- (void)_setupAnimationGroup {
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = self.animationDuration + self.pulseInterval;
animationGroup.repeatCount = self.repeatCount;
if (self.useTimingFunction) {
CAMediaTimingFunction *defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
animationGroup.timingFunction = defaultCurve;
}
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
scaleAnimation.fromValue = @(self.fromValueForRadius);
scaleAnimation.toValue = @1.0;
scaleAnimation.duration = self.animationDuration;
CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.duration = self.animationDuration;
opacityAnimation.values = @[@(self.fromValueForAlpha), @0.45, @0];
opacityAnimation.keyTimes = @[@0, @(self.keyTimeForHalfOpacity), @1];
NSArray *animations = @[scaleAnimation, opacityAnimation];
animationGroup.animations = animations;
self.animationGroup = animationGroup;
self.animationGroup.delegate = self;
}
启动动画效果,就是添加动画到 effect中。
- (void)start {
if (self.animationGroup == nil) {
[self _setupAnimationGroup];
}
[self.effect addAnimation:self.animationGroup forKey:@"pulse"];
}
这个类可以动态的设置一些显示参数,显示效果也很棒。