时间戳

首页 > 解决方案 > 当位置数量发生变化时，无法为 CAGradientLayer 的位置属性设置动画

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

问题描述

我创建了一个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
}

在scrollViewDidScroll我的中，UIViewController我添加了代码来动画从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 之间的动画，我该如何实现我想要的动画？

标签： iosswiftcore-animation

解决方案

发生这种情况并不让我感到惊讶。在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]那应该会产生相同的效果。

推荐阅读