iOS中图层的动画

Question

我用 BezierPath 遮罩了一张图片。 我想为那个蒙版图像制作动画。

我的代码如下：

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(84.95, 205.11)];
    [bezierPath addCurveToPoint: CGPointMake(122.89, 232.14) controlPoint1: CGPointMake(84.95, 205.11) controlPoint2: CGPointMake(110.81, 223.56)];
    [bezierPath addCurveToPoint: CGPointMake(124.33, 233.04) controlPoint1: CGPointMake(123.37, 232.46) controlPoint2: CGPointMake(123.85, 232.78)];
    [bezierPath closePath];

    CAShapeLayer *maskImage = [CAShapeLayer layer];
    maskImage.path = bezierPath.CGPath;
    maskImage.fillColor = [[UIColor blackColor] CGColor];
    _myImageView.layer.mask = maskImage;

    CAShapeLayer *border = [CAShapeLayer layer];
    border.path = bezierPath.CGPath;
    border.strokeColor = [UIColor redColor].CGColor;
    border.fillColor = [[UIColor clearColor] CGColor];
    border.lineWidth = 5;
    [_myImageView.layer addSublayer:border];

如何制作动画？

谢谢

Answer 1

使用以下代码：

@property (nonatomic, retain) CAShapeLayer *animationLayer;

- (IBAction)drawPattern:(id)sender{
[self setup];

[self.animationLayer removeAllAnimations];

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 10.0;
pathAnimation.fromValue = @(0);
pathAnimation.toValue = @(1);
[self.animationLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

- (void)setup{
[self.animationLayer removeFromSuperlayer];
self.animationLayer = nil;

UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(84.95, 205.11)];
[bezierPath addCurveToPoint: CGPointMake(122.89, 232.14) controlPoint1: CGPointMake(84.95, 205.11) controlPoint2: CGPointMake(110.81, 223.56)];
[bezierPath addCurveToPoint: CGPointMake(124.33, 233.04) controlPoint1: CGPointMake(123.37, 232.46) controlPoint2: CGPointMake(123.85, 232.78)];

CAShapeLayer *pathLayer = [CAShapeLayer layer];

// provide frame & bounds so that path can be drawn over that.
pathLayer.frame = CGRectMake(35, 100, 250, 200);
pathLayer.bounds = CGRectMake(35, 100, 250, 200);
pathLayer.path = bezierPath.CGPath;
pathLayer.strokeColor = [UIColor redColor].CGColor;
pathLayer.fillColor = [[UIColor clearColor] CGColor];
pathLayer.lineWidth = 6.f;
pathLayer.lineJoin = kCALineJoinRound;

[self.view.layer addSublayer:pathLayer];
[self setAnimationLayer:pathLayer];
}

请让我知道这是否适合您以及是否还有其他问题。

Answer 2

在您的代码末尾尝试以下一个

CAShapeLayer *pathLayer;
CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.path = [aPath CGPath];
shapeLayer.strokeColor = [[UIColor greenColor] CGColor];
shapeLayer.fillColor = nil;
shapeLayer.lineWidth = 5.0f;
shapeLayer.lineJoin = kCALineJoinBevel;

[myImageView.layer addSublayer:shapeLayer];
pathLayer = shapeLayer;
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 3.0;
pathAnimation.fromValue = @(0.0f);
pathAnimation.toValue = @(1.0f);
[pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

Answer 3

我们可以使用 CABasicAnimation 为带有路径的图像设置动画。

CABasicAnimation 有 position,path,transform,opacity,shadow……包括所有层 keypaths,shape layer keypaths,CA layer keypaths,Text layer keypaths,Mask layer keypaths,UIView layer keypaths,Effect,Emit and复制器键路径。

根据您对绘制路径的问题，我们可以使用 path 和 strokeEnd。但大多数准备 strokeEnd 以访问形状样式属性。

所以我认为 strokeEnd 是使用贝塞尔路径为蒙版图像制作动画的最佳选择。

下面我给出了 path 和 strokeEnd 的代码，我也区分了两者。

如果我使用animationWithKeyPath是path

要渲染和动画的形状。它正在指定形状路径。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.fromValue = @(0);
animation.toValue = @(1);
animation.duration = 6.0f;
[maskImage addAnimation:animation forKey:@"animatePath"];

路径是单个组件的集合，例如可以绘制和动画的线条和弧线。它是 Quartz 2D 的基本概念。

在下面的代码中，我使用 strokeEnd

一般来说，如果我们想访问我们可以使用的形状样式属性 行程结束

停止抚摸路径和动画的相对位置。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @(0);
animation.toValue = @(1);
animation.duration = 6.0f;
[maskImage addAnimation:animation forKey:@"strokeEnd"];

此属性的值必须在 0.0 到 1.0 的范围内。此属性的默认值为 1.0。

另外strokeEnd定义了以下东西

结合 strokeStart 属性，该属性定义描边路径的子区域。 此属性中的值表示完成描边的路径上的相对点，而 strokeStart 属性定义起点。