如何为 CAGradientLayer 色点设置动画？

Posted 2023-02-23

【中文标题】如何为 CAGradientLayer 色点设置动画？

【英文标题】：How to animate CAGradientLayer color points?

【发布时间】：2018-08-20 16:03:54

【问题描述】：

我在为 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()

【问题讨论】：

这更像是一个数学问题，而不是一个 Swift 问题。您需要创建一个方法，该方法采用角度并返回相反方向的两个 CGPoints

没有。关键是，无论我输入什么值。没有任何效果。它就像属性是不可动画的。这些值是正确的，与“数学”无关

这就是为什么我说要手动设置动画

我不明白“手动制作动画”是什么意思？

我认为你唯一的选择是使用计时器。

【参考方案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)