iOS CAReplicatorLayer動畫

CAReplicatorLayer是一個Layer容器,添加到容器上的子Layer可以復制若干份
可以設定子Layer復制份數、設定副本之間的距離、透明度、顏色、旋轉、位置等狀態屬性,因此可以創建很酷的動畫效果,像下面這樣。

圖1.1

圖1.2

基本使用步驟

  1. 創建復制圖層對象, 設置參數(CAlayer的屬性,副本之間的關系)。
  2. 創建子layer
  3. 給子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"];
}



這個類可以動態的設置一些顯示參數,顯示效果也很棒。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Core Animation Core Animation,中文翻譯為核心動畫,它是一組非常強大的動畫處理API,...
    45b645c5912e閱讀 3,056評論 0 21
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6 30
  • 目錄: 主要繪圖框架介紹 CALayer 繪圖 貝塞爾曲線-UIBezierPath CALayer子類 補充:i...
    Ryan___閱讀 1,708評論 1 9
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 從來沒想過怎樣長大,變成熟,可能從開始到現在都沒變過。現在想想一個小孩子那樣的思想也是挺變態的。我可以捂著心口說我...
    晴天_白夜閱讀 218評論 0 0