对CALayer的蒙版进行动画处理 [英] Animate the mask of a mask of a CALayer

问题描述

目标：

我正在绘制具有渐变的自定义形状。我也想通过从左到右绘制该形状的动画。

问题：

下面的代码在iPad模拟器上有效，但在我的iPad 4上无效运行iOS7。有人知道如何在设备上执行此操作吗？

我对代码的解释：

我的代码有效（仅在模拟器上）使用3个CALayers。

• gradientLayer 保留了我的渐变。


• shapeMaskLayer 保留我的自定义形状。


• animationMaskLayer 为从左到右模拟绘图的路径赋予动画效果

animationMaskLayer --masks-- > shapeMaskLayer --masks->然后我对 animationMaskLayer 的帧进行动画处理以对整个形状进行动画处理。

然后对



进行动画处理。 / p>



代码：

  //遮罩矩形
 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）; 
 
 //动画蒙版层
 CAShapeLayer * animationMaskLayer = [CAShapeLayer层]; 
 animationMaskLayer.path = fullViewRectPath; 
 animationMaskLayer.fillColor = UIColor.blackColor.CGColor; 
 
 //形状遮罩层
 CAShapeLayer * shapeMaskLayer = [CAShapeLayer层]; 
 shapeMaskLayer.path = CGPathCreateWithEllipseInRect（self.bounds，0）; 
 shapeMaskLayer.fillColor = [UIColor blueColor] .CGColor; 
 shapeMaskLayer.mask = animationMaskLayer; 
 
 //渐变层
 CAGradientLayer * gradientLayer = [CAGradientLayer层]; 
 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]; 
 
 //左到右动画
 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]； 
 
 //内存管理
 CGPathRelease（leftStartingRectPath）; 
 CGPathRelease（fullViewRectPath）; 
  




解决方案

动画化面具的面具？

您是否尝试过嵌套两层，其父层具有 masksToBounds 继续吗？然后，您可以在两层上都设置一个独立的蒙版，并且外层将使用其自己的蒙版有效地对内层进行蒙版（由于 masksToBounds ）。哪个层获取哪个蒙版可能并不重要（因为您需要两个蒙版的交集）。

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

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

Goal:
I am drawing a custom shape that has a gradient. I also want to animate the drawing of this shape by having it draw in from left to right.

Problem:
The code below works on an iPad simulator, but it doesn't work on my iPad 4 running iOS 7. Does anyone know how to make this work on the device? Is there a different way to achieve this same result?

Explanation of my Code:
My code works (only on simulator) using 3 CALayers.

• gradientLayer holds my gradient.
• shapeMaskLayer holds my custom shape.
• animationMaskLayer animates it's path to simulate drawing from left to right

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

I then animate the frame of animationMaskLayer to animate the whole shape.

Code:

// 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);

解决方案

Animating the mask of a mask? I'm surprised that even works in the simulator.

Have you tried nesting two layers, with the parent layer with masksToBounds on? You can then set an independent mask on both layers, and the outer layer will effectively mask your inner layer with its own mask (due to masksToBounds). It probably doesn't matter which layer gets which mask (because you want the intersection of both masks).

With the code you listed in your question, you would just need to add one line, and comment out one line to get the correct functionality:

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

这篇关于对CALayer的蒙版进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！