当位置数更改时，无法对 CAGradientLayer 的位置属性进行动画处理

Question

我创建了一个UICollectionView，其中视图的顶部和底部具有渐变。当您滚动到视图底部时，渐变消失。我想对此更改进行动画处理。

在我的UICollectionView课上：

func setupTopAndBottomGradientMask() {
let coverView = GradientView(frame: self.bounds)
guard let coverLayer = coverView.layer as? CAGradientLayer else {
return
}
coverLayer.colors = [UIColor.clear.cgColor, 
UIColor.black.cgColor, UIColor.black.cgColor, UIColor.clear.cgColor]
coverLayer.locations = [0.0, 0.07, 0.93, 1.0]
self.mask = coverView
}
func setupTopGradientMask() {
let coverView = GradientView(frame: self.bounds)
guard let coverLayer = coverView.layer as? CAGradientLayer else {
return
}
coverLayer.colors = [UIColor.clear.cgColor, UIColor.black.cgColor]
coverLayer.locations = [0.0, 0.07]
self.mask = coverView
}

在我的UIViewControllerscrollViewDidScroll中，我添加了代码来动画从setupTopAndBottomGradientMask()状态到setupTopGradientMask()状态的更改：

let colorsAnimation = CABasicAnimation(keyPath: "colors")
colorsAnimation.fromValue = [UIColor.clear.cgColor, UIColor.black.cgColor, 
UIColor.black.cgColor, UIColor.clear.cgColor]
colorsAnimation.toValue = [UIColor.clear.cgColor, UIColor.black.cgColor]
let locationsAnimation = CABasicAnimation(keyPath: "locations")
locationsAnimation.fromValue = [0.0, 0.07, 0.93, 1.0]
locationsAnimation.toValue = [0.0, 0.07]
let removeBottomGradientAnimationGroup = CAAnimationGroup()
removeBottomGradientAnimationGroup.animations = [colorsAnimation, 
locationsAnimation]
removeBottomGradientAnimationGroup.duration = 2
removeBottomGradientAnimationGroup.timingFunction = 
CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
let existingMaskLayer =  mainCollectionView.mask?.layer as? CAGradientLayer
existingMaskLayer?.colors = [UIColor.clear.cgColor, UIColor.black.cgColor]
existingMaskLayer?.locations = [0.0, 0.07]
mainCollectionView.mask?.layer.add(removeBottomGradientAnimationGroup, forKey: "removeBottomGradientAnimationGroup")

此代码创建正确的最终 UI，但不进行动画处理。这是 UI 的截屏视频，其中渐变发生变化但不进行动画处理

我确认，如果位置数组对于locationsAnimation.fromValue和locationsAnimation.toValue的大小相同，那么它确实会动画化。

我的问题：鉴于CABasicAnimation不支持在具有不同位置的CAGradientLayers之间进行动画处理，我如何实现我想要的动画？

Answer 1

发生这种情况并不让我感到惊讶。在CAShapeLayer中对路径进行动画处理也存在类似的问题。在这种情况下，路径中控制点的数量和类型在开始和结束时必须相同，否则动画结果未定义。

您需要找出数组中仍有 4 种颜色的等效动画。

您可以从[clear, black, black, clear]到[clear, black]以及从位置[0.0, 0.07, 0.93, 1.0]到[0.0, 0.07]进行动画处理。

为什么不使用相同的起始位置和结束位置从[clear, black, black, clear]到[clear, black, black, black]进行动画处理。这应该产生同样的效果。