CAReplicatorLayer是一個Layer容器,添加到容器上的子Layer可以復制若干份;
可以設定子Layer復制份數、設定副本之間的距離、透明度、顏色、旋轉、位置等狀態屬性,因此可以創建很酷的動畫效果,像下面這樣。
圖1.1
圖1.2
基本使用步驟
- 創建復制圖層對象, 設置參數(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"];
}
這個類可以動態的設置一些顯示參數,顯示效果也很棒。