Vài đường cơ bản về CAGradientLayer

Đã bao giờ bạn muốn thay những màu sắc đơn điệu trong app của mình thành những đường đổ bóng, gradient hay là chính khách hàng của bạn yêu cầu như thế chưa? Mình đã từng gặp phải câu hỏi này rồi và sau đây sẽ là vài đường code cơ bản để tạo ra mấy thứ đẹp đẽ đó sử dụng CAGradientLayer. Viết trên Xcode 8.3.3, Swift 3

Đổ màu cơ bản

var gradientLayer: CAGradientLayer!

tạo biến gradientLayer để đổ màu

         func createGradientLayer() {
        gradientLayer = CAGradientLayer()
        
        gradientLayer.frame = self.view.bounds
        
        gradientLayer.colors = [UIColor.purple.cgColor, UIColor.yellow.cgColor]
        
        self.view.layer.addSublayer(gradientLayer)
    }

Phương thức để đổ màu, từ tím chuyển sang vàng

override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    createGradientLayer()
}

Đặt chúng vào viewWillAppear và đây là kết quả

Đổ nhiều màu sắc với hiệu ứng

Vẫn dùng phương thức bên trêntrên, chỉ thay đổi 1 chút với việc cho nhiều màu sắc hơn

        gradientLayer.colors = [UIColor.red.cgColor, UIColor.orange.cgColor, UIColor.blue.cgColor, UIColor.magenta.cgColor, UIColor.yellow.cgColor]

Sẽ thấy ngay kết quả Bây giờ hay thêm một chút hiệu ứng cho nó màu mè nào

var colorSets = [[CGColor]]()
 
var currentColorSet: Int!

thêm property

   func createColorSets() {
        colorSets.append([UIColor.red.cgColor, UIColor.yellow.cgColor])
        colorSets.append([UIColor.green.cgColor, UIColor.magenta.cgColor])
        colorSets.append([UIColor.gray.cgColor, UIColor.lightGray.cgColor])
        
        currentColorSet = 0
}

thêm phương thức để tạo màu bất kì và nhớ gọi nó ở viewDidLoad()

gradientLayer.colors = [UIColor.red.cgColor, UIColor.orange.cgColor, UIColor.blue.cgColor, UIColor.magenta.cgColor, UIColor.yellow.cgColor]

thay đoạn mã ta vừa sửa trên bằng

        gradientLayer.colors = colorSets[currentColorSet]

giờ ta sẽ add Gusture tap để thay đổi màu và bắt đầu hiệu ứng, đặt chúng vào ViewDidLoad()

    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(ViewController.handleTapGesture(gestureRecognizer:)))
        self.view.addGestureRecognizer(tapGestureRecognizer)

xử lý khi tap

  func handleTapGesture(gestureRecognizer: UITapGestureRecognizer) {
        if currentColorSet < colorSets.count - 1 {
            currentColorSet! += 1
        }
        else {
            currentColorSet = 0
        }
        
        let colorChangeAnimation = CABasicAnimation(keyPath: "colors")
        colorChangeAnimation.duration = 2.0
        colorChangeAnimation.toValue = colorSets[currentColorSet]
        colorChangeAnimation.fillMode = kCAFillModeForwards
        colorChangeAnimation.isRemovedOnCompletion = false
        gradientLayer.add(colorChangeAnimation, forKey: "colorChange")
    }

và xử lí khi hết hiệu ứng

    func animationDidStop(anim: CAAnimation, finished flag: Bool) {
        if flag {
            gradientLayer.colors = colorSets[currentColorSet]
        }
    }

giờ hãy xem kết quả https://youtu.be/nN0X3CT9BYo