使用 CABasicAnimation 后防止 CAGradientLayer 位置返回到原始值

Question

我正在尝试制作渐变动画，以便两种颜色的位置从左向右移动。问题在于，一旦动画完成，渐变位置就会弹回到原来的位置。

这是我的游乐场代码：

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

  let gradientLayer: CAGradientLayer = {
    let layer = CAGradientLayer()
    layer.colors = [ UIColor.red.cgColor, UIColor.blue.cgColor ]
    layer.locations = [0.0, 0.5]
    layer.startPoint = CGPoint(x: 0.0, y: 1.0)
    layer.endPoint = CGPoint(x: 1.0, y: 1.0)

    return layer
  }()

  override func viewDidLoad() {
    super.viewDidLoad()

    view.layer.addSublayer(gradientLayer)
    gradientLayer.frame = view.bounds

    let gradientChangeAnimation = CABasicAnimation(keyPath: "locations")
    gradientChangeAnimation.duration = 1
    gradientChangeAnimation.toValue = [0.5, 1.0]
    gradientLayer.add(gradientChangeAnimation, forKey: nil)

  }

  override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    gradientLayer.frame = view.frame
  }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

如何防止在动画完成后重置位置？

Answer 1

您可以告诉它不要在完成时删除并将位置设置为新值：

override func viewDidLoad() {
    super.viewDidLoad()

    view.layer.addSublayer(gradientLayer)
    gradientLayer.frame = view.bounds

    CATransaction.begin()
    CATransaction. setCompletionBlock {
        gradientLayer.locations = [0.5, 1.0]
        gradientLayer.removeAllAnimations()
    }

    let gradientChangeAnimation = CABasicAnimation(keyPath: "locations")
    gradientChangeAnimation.duration = 1
    gradientChangeAnimation.toValue = [0.5, 1.0]
    gradientLayer.add(gradientChangeAnimation, forKey: nil)

    CATransaction.commit()
}

或适当设置 fillMode 和 isRemovedOnCompletion 属性。

override func viewDidLoad() {
    super.viewDidLoad()

    view.layer.addSublayer(gradientLayer)
    gradientLayer.frame = view.bounds

    let gradientChangeAnimation = CABasicAnimation(keyPath: "locations")
    gradientChangeAnimation.duration = 1
    gradientChangeAnimation.toValue = [0.5, 1.0]
    gradientChangeAnimation.fillMode = kCAFillModeForwards
    gradientChangeAnimation.isRemovedOnCompletion = false
    gradientLayer.add(gradientChangeAnimation, forKey: nil)
}

使用 CABasicAnimation 后防止 CAGradientLayer 位置返回到原始值

Prevent CAGradientLayer locations from returning to original values after using CABasicAnimation

ios

swift

core-animation

cabasicanimation

cagradientlayer