动画为iOS中的图层

我用BezierPath蒙版了一张图片。我想动画该蒙版图像。动画为iOS中的图层

我的代码如下：

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];

我怎样才能动画呢？

谢谢

来源

2016-08-24 user2526811

请显示您的bezierPath代码 – user3182143

@ user3182143，我添加了bezierPath代码。 – user2526811

@ user2526811你想为这条贝塞尔路径的绘制设置动画吗？ –

使用下面的代码：

@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]; 
}

请让我知道这对你的作品&此外，如果什么都来了。

来源

2016-08-24 10:24:40

感谢您的回答，但这只会动画边框而不是路径 – user2526811

@ user2526811，这将使用动画绘制路径。 –

在你的代码的最后尝试下面的一个

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"];

来源

2016-08-24 11:03:51

我们可以使用CABasicAnimation与路径动画图像。 CABasicAnimation包含所有图层关键路径，形状图层关键路径，CA图层关键路径，文本图层关键路径，蒙版图层关键路径，UIView图层关键路径，效果，发布等位置，路径，变换，不透明度，阴影......和复制器关键路径。

根据你提出的绘制路径的问题，我们可以使用path和strokeEnd.But，大部分准备strokeEnd来访问形状样式属性。

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

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

如果我使用animationWithKeyPath是path

形状被绘制并animatable.It被指定形状的路径。

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

的路径是一样的直线和圆弧各个组件的集合，可以得出，也animated.It是Quartz 2D的基本概念。

在下面的代码我使用strokeEnd

一般来说，如果我们要访问的形状样式属性，我们可以使用 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属性定义起始点时沿着完成抚摸的路径的相对点。

来源

2016-08-24 11:20:34 user3182143

动画为iOS中的图层

回答

相关问题