iOS Animation - Phần 9: Tạo Shapes và Masks Layer

Lời nói đầu

Trong bài tiếp theo về iOS Animation, mình xin giới thiệu đến các bạn về cách tạo và animation Shapes và Masks Layer.

Với iOS, cách tạo Shapes và Masks Layer rất đơn giản. Chúng ta có thể vẽ một hình khối bất kỳ bằng class CAShapeLayer, đây là 1 subclass của class CALayer (một class mà chúng ta đã được biết ở các phần trước) và dùng UIBezierPath để định nghĩa hình dáng của hình khối cần vẽ . Ví dụ: tạo một shape layer hình tròn:

    let circleLayer = CAShapeLayer()
    circleLayer.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, awidth: 100, height: 100)).cgPath
    circleLayer.strokeColor = UIColor.white.cgColor
    circleLayer.lineWidth = lineWidth
    circleLayer.fillColor = UIColor.clear.cgColor
    
    view.layer.addSublayer(circleLayer)

Cách tạo animation

Và để tạo được animation, chúng ta sẽ sử dụng thay đổi 4 thuộc tính của CAShapeLayer. Các tham số có thể tạo được animation:

1. path: thay đổi hình dạng của shape layer với các hình khác nhau.
2. fillColor: thay đổi màu phía bên trong của shape layer với các màu khác nhau.
3. lineDashPhase: tạo hiệu ứng vùng đánh dấu (marquee) xung quanh shape layer.
4. lineWidth: thay đổi độ dày đường stroke của shape layer.

Ví dụ tạo animation cho path

    let morphAnimation = CABasicAnimation(keyPath: "path")
    morphAnimation.duration = animationDuration
    morphAnimation.toValue = UIBezierPath(ovalIn: morphedFrame).cgPath
    morphAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    
    circleLayer.add(morphAnimation, forKey:nil)

Ví dụ tạo animation bằng lineWidth

    let strokeStartAnimation = CABasicAnimation(keyPath: "strokeStart")
    strokeStartAnimation.fromValue = -0.5
    strokeStartAnimation.toValue = 1.0
    
    let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")
    strokeEndAnimation.fromValue = 0.0
    strokeEndAnimation.toValue = 1.0
    
    let strokeAnimationGroup = CAAnimationGroup()
    strokeAnimationGroup.duration = 1.5
    strokeAnimationGroup.repeatDuration = 5.0
    strokeAnimationGroup.animations = [strokeStartAnimation, strokeEndAnimation]
    ovalShapeLayer.add(strokeAnimationGroup, forKey: nil)

Kết thúc

Cách tạo và animation bằng ShapeLayer khá đơn giản, nhưng rất hữu ích, chúng ta sẽ không phải dùng đến image cho các hình khối đơn giản nữa. Hi vọng các bạn sẽ có tạo đc cho mình những hình khối và animation như mong đợi, phù hợp với những mục đích riêng.