如何为 CAGradientLayer 色点设置动画？

Question

我在为 CAGradientLayer 角度设置动画时遇到问题。

CAGradientLayer 中的角度通过起点和终点属性表示。

我想以圆形方式为渐变设置动画。

当我在动画组中设置它时它不起作用。没有动画正在发生。 当我更改

中的属性时

DispatchQueue.main.asyncAfter(deadline: now() + 1.0) {
    // change properties here
}

它有效。但是一个非常快的动画正在发生。这还不够好。

在网上只有位置和颜色变化，但没有角度变化。

您可以在下面找到一个 Playground 项目来玩

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    // Gradient layer specification
    lazy var gradientLayer: CAGradientLayer = {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor.white.withAlphaComponent(0.5).cgColor, UIColor.orange.withAlphaComponent(0.5).cgColor, UIColor.orange.cgColor]
        gradientLayer.locations = [0, 0.27, 1]
        gradientLayer.frame = view.bounds
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
        return gradientLayer
    }()

    func animationMapFunction(points: [(CGPoint, CGPoint)], keyPath: String) -> [CABasicAnimation] {
        return points.enumerated().map { (arg) -> CABasicAnimation in
            let (offset, element) = arg
            let gradientStartPointAnimation = CABasicAnimation(keyPath: keyPath)

            gradientStartPointAnimation.fromValue = element.0
            gradientStartPointAnimation.toValue = element.1
            gradientStartPointAnimation.beginTime = CACurrentMediaTime() + Double(offset)

            return gradientStartPointAnimation
        }
    }

    lazy var gradientAnimation: CAAnimation = {
        let startPointAnimationPoints = [(CGPoint(x: 0.0, y: 0.0), CGPoint(x: 1.0, y:0.0)),
                                         (CGPoint(x: 1.0, y:0.0), CGPoint(x: 1.0, y:1.0)),
                                         (CGPoint(x: 1.0, y:1.0), CGPoint(x: 0.0, y:1.0)),
                                         (CGPoint(x: 0.0, y:1.0), CGPoint(x: 0.0, y:0.0))]

        let endPointAnimatiomPoints = [(CGPoint(x: 1.0, y:1.0), CGPoint(x: 0.0, y:1.0)),
                                       (CGPoint(x: 0.0, y:1.0), CGPoint(x: 0.0, y:0.0)),
                                       (CGPoint(x: 0.0, y: 0.0), CGPoint(x: 1.0, y:0.0)),
                                       (CGPoint(x: 1.0, y:0.0), CGPoint(x: 1.0, y:1.0))]

        let startPointAnimations = animationMapFunction(points: startPointAnimationPoints, keyPath: "startPoint")
        let endPointAnimations = animationMapFunction(points: startPointAnimationPoints, keyPath: "endPoint")

        let animationGroup = CAAnimationGroup()
        animationGroup.duration = 5.0
        animationGroup.repeatCount = Float.infinity
        animationGroup.animations = startPointAnimations + endPointAnimations

        return animationGroup
    }()

    override func loadView() {
        let view = UIView(frame: UIScreen.main.bounds)
        self.view = view

        view.layer.addSublayer(gradientLayer)
    }

    func animate() {
        view.layer.removeAllAnimations()
        gradientLayer.add(gradientAnimation, forKey: nil)
    }
}
// Present the view controller in the Live View window
let vc = MyViewController()
PlaygroundPage.current.liveView = vc

vc.animate()

Answer 1

所以我做的是一个计时器，它触发起点和终点的变化。

我从 0 度旋转到 360 度，同时用给定的常数增加角度（在我的例子中是 6）

我创建了一个函数映射：angle → (startPoint, endPoint)

func animate() {
    stopAnimation()

    timer = Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true, block: { timer in
        self.angle += 6.0
        self.angle.formTruncatingRemainder(dividingBy: 360)

        CATransaction.begin()
        // disable implicit animation
        CATransaction.setDisableActions(true)

        let pos = points(from: self.angle)

        self.gradientLayer.startPoint = pos.0
        self.gradientLayer.endPoint = pos.1

        CATransaction.commit()
    })
}

func stopAnimation() {
    timer?.invalidate()
}

这里是实用函数

extension CGPoint {
    var inverse: CGPoint {
        return CGPoint(x: 1 - x, y: 1 - y)
    }
}

fileprivate func points(from angle: Double) -> (CGPoint, CGPoint) {
    let start: CGPoint

    switch angle {
    case let x where 0 <= x && x < 90:
        start = CGPoint(x: x / 180, y: 0.5 - x / 180)
    case let x where 90 <= x && x < 180:
        start = CGPoint(x: x / 180, y: x / 180 - 0.5)
    case let x where 180 <= x && x < 270:
        start = CGPoint(x: 2.0 - x / 180, y: 0.5 + (x - 180) / 180)
    case let x where 270 <= x && x < 360:
        start = CGPoint(x: 2.0 - x / 180, y: 0.5 + (360 - x) / 180)
    default:
        start = CGPoint.zero
    }

    return (start, start.inverse)
}