Question

我正在尝试使用CALayer从底部到顶部为duration填充动画。我需要你的帮助以及实现这一目标的任何想法。

我试过这样：

CABasicAnimation *pathAnimation = 
 [CABasicAnimation animationWithKeyPath:@"fillColor"];
pathAnimation.duration = 5.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[annotation addAnimation:pathAnimation forKey:@"fillColorAnimation"];

但没有变化......

任何想法都将受到赞赏。

谢谢大家。

Answer 1

如果你想用一种颜色填充任意形状，就好像颜色像水一样从底部到顶部流动，你实际上需要两个或更多的形状。

创建完整形状的图层，填充颜色就位。然后创建第二个形状图层，其路径为4条线，形成与第一个形状图层大小相同的矩形。首先，使矩形成为第一个形状图层底部的水平线，区域为零。将第二个形状图层安装为第一个整形图层的遮罩层。

创建一个动画，将第二个（蒙版）图层的形状从底部的零粗细线更改为第一个形状图层的完整边界。这将使第二个形状图层为从第一个形状图层边界的底部到顶部生长的矩形设置动画。由于第二个形状图层是第一个形状的面具，因此动画将导致第一个形状图层在动画运行时从上到下显示。

如果您需要从动画的开头到位的形状轮廓并在形状内部填充动画，则在第一个形状图层的顶部添加形状图层的副本，设置为仅划出形状，而不是填充它。使该图层不透明。它应绘制形状轮廓，其他形状图层/蒙版对的动画应填充轮廓下方的内部。

Answer 2

如果有人在这里寻找代码，那就是 Swift 5：

private let fillLayer = CAShapeLayer()
private let fillMaskLayer = CAShapeLayer()

layer.addSublayer(fillLayer)

fillLayer.path = fillLayerPath().cgPath
fillLayer.fillColor = UIColor.white.cgColor

fillMaskLayer.path = fillPathBottom().cgPath
fillMaskLayer.fillColor = UIColor.white.cgColor

let fillAnimation = CABasicAnimation(keyPath: "path")
fillAnimation.duration = 3.0
fillAnimation.toValue = fillPathFull().cgPath
fillAnimation.repeatCount = .greatestFiniteMagnitude
fillAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
fillLayer.mask = fillMaskLayer

fillMaskLayer.add(fillAnimation, forKey: "fillAnimationPath")

如何在CAD sdk中从底部到顶部填充颜色时为CALayer的填充颜色设置动画

2 个答案: