动画 CALayer 蒙版的蒙版

Question

目标：
我正在绘制一个具有渐变的自定义形状。我还想通过从左到右绘制来为该形状的绘图设置动画。

问题：
下面的代码适用于 iPad 模拟器，但不适用于我运行 iOS 7 的 iPad 4。有谁知道如何在设备上进行这项工作？有没有不同的方法来达到同样的结果？

我的代码说明：
我的代码使用 3 个 CALayer 工作（仅在模拟器上）。

• gradientLayer 保持我的渐变。
• shapeMaskLayer 保持我的自定义形状。
• animationMaskLayer 动画它的路径以模拟从左到右的绘图

animationMaskLayer --masks--> shapeMaskLayer --masks--> gradientLayer

然后我为 的框架设置动画animationMaskLayer以设置整个形状的动画。

代码：

// Animation Mask Rects
CGPathRef leftStartingRectPath = CGPathCreateWithRect(CGRectMake(0, 0, 0, self.frame.size.height), 0);
CGPathRef fullViewRectPath = CGPathCreateWithRect(CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), 0);

// Animation Mask Layer
CAShapeLayer *animationMaskLayer = [CAShapeLayer layer];
animationMaskLayer.path = fullViewRectPath;
animationMaskLayer.fillColor = UIColor.blackColor.CGColor;

// Shape Mask Layer
CAShapeLayer *shapeMaskLayer = [CAShapeLayer layer];
shapeMaskLayer.path = CGPathCreateWithEllipseInRect(self.bounds, 0);
shapeMaskLayer.fillColor = [UIColor blueColor].CGColor;
shapeMaskLayer.mask = animationMaskLayer;

// Gradient Layer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.bounds;
gradientLayer.colors = self.colors;
gradientLayer.mask = shapeMaskLayer;
mountainLayer.anchorPoint = pt(0, 0);
mountainLayer.position = pt(0, 0);
[self.layer addSublayer:gradientLayer];

// Left To Right Animation
CABasicAnimation *leftToRightAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
leftToRightAnimation.duration = 0.5;
leftToRightAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
leftToRightAnimation.fromValue = (__bridge id)leftStartingRectPath;
leftToRightAnimation.toValue = (__bridge id)fullViewRectPath;
leftToRightAnimation.fillMode = kCAFillModeForwards;
leftToRightAnimation.removedOnCompletion = NO;
[animationMaskLayer addAnimation:leftToRightAnimation forKey:@"animatePath"];

// Memory Management
CGPathRelease(leftStartingRectPath);
CGPathRelease(fullViewRectPath);

Answer 1

动画面具的面具？我很惊讶甚至可以在模拟器中工作。

你有没有试过嵌套两层，父层masksToBounds打开？然后，您可以在两个图层上设置一个独立的蒙版，外层将使用自己的蒙版有效地掩盖您的内层（由于masksToBounds）。哪个图层获得哪个蒙版可能并不重要（因为您想要两个蒙版的交集）。

使用您在问题中列出的代码，您只需要添加一行并注释掉一行即可获得正确的功能：

self.layer.mask = animationMaskLayer;
//    shapeMaskLayer.mask = animationMaskLayer;