当位置数发生变化时，无法为 CAGradientLayer 设置位置动画属性

Question

我创建了一个 UICollectionView，其中视图的顶部和底部具有渐变。当您滚动到视图底部时，渐变消失。我想为这种变化制作动画。

在我的 UICollectionView class:

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
}

在我的 UIViewController 中的 scrollViewDidScroll 中，我添加了代码以动画化从 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 但它没有动画。 This is a screencast of UI where the gradient changes but does not animate

我确认如果 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] 制作动画。这应该会产生相同的效果。

当位置数发生变化时，无法为 CAGradientLayer 设置位置动画属性

Can't animate locations property for CAGradientLayer when number of locations changes

core-animation

ios

swift

当位置数发生变化时，无法为 CAGradientLayer 设置位置动画 属性

Can't animate locations property for CAGradientLayer when number of locations changes

core-animation

ios

swift

当位置数发生变化时，无法为 CAGradientLayer 设置位置动画属性