12/08/2018, 15:02

CAReplicatorLayer - How to create animation playing audio

Giới thiệu: CAReplicatorLayer là 1 subclass của CALayer. Nó cho phép bạn tạo ra một số lượng các bản coppies của sublayer này. Mỗi bản coppy có khả năng chuyển đổi geometric, temporal và color được áp đụng cho nó. Thực hiện: 1. Khởi tạo một object CAReplicatorLayer: let r = ...

Giới thiệu:

CAReplicatorLayer là 1 subclass của CALayer. Nó cho phép bạn tạo ra một số lượng các bản coppies của sublayer này. Mỗi bản coppy có khả năng chuyển đổi geometric, temporal và color được áp đụng cho nó.

Thực hiện:

1. Khởi tạo một object CAReplicatorLayer:

         let r = CAReplicatorLayer()
         r.bounds = CGRect(x: 0.0, y: 0.0, awidth: 200, height: 60.0)
         r.position = view.center
         r.backgroundColor = UIColor.white.cgColor
         view.layer.addSublayer(r)

2. Tạo một sublayer bar (source layer):

        let bar = CALayer()
        bar.bounds = CGRect(x: 0.0, y: 0.0, awidth: 8.0, height: 40.0)
        bar.position = CGPoint(x: 10.0, y: 75.0)
        bar.cornerRadius = 2.0
        bar.backgroundColor = UIColor.red.cgColor
        
        // add for CAReplicatorLayer
        r.addSublayer(bar)

3. Tạo animation cho sublayer bar vừa tạo:

        let move = CABasicAnimation(keyPath: "position.y")
        move.toValue = bar.position.y - 35.0
        move.duration = 0.5
        move.autoreverses = true
        move.repeatCount = Float.infinity
        
        bar.add(move, forKey: nil)

4. Set các thuộc tính cho CAReplicatorLayer:

  • instanceCount: Số lượng bản copies được tạo, tính cả source layer.
  • instanceTransform: transform matrix sẽ được lặp lại cho các sublayer
  • instanceDelay: time delay giữa các bản copies
        r.instanceCount = 9
        r.instanceTransform = CATransform3DMakeTranslation(20.0, 0.0, 0.0)
        r.instanceDelay = 0.33
        r.masksToBounds = true

5. Run

Tổng kết:

Như vậy, CAReplicatorLayer giúp chúng ta tạo ra các animation tiện dụng và rất hay dùng như Playing audio, Loading activity, ... nhanh chóng và đơn giản.

0