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具有位置，路徑，變換，不透明度，陰影...，其中包括所有圖層關鍵路徑，形狀圖層關鍵路徑，CA圖層關鍵路徑，文本圖層關鍵路徑，遮罩圖層關鍵路徑，UIView圖層關鍵路徑，效果，發射和復制器關鍵路徑。

根據您對繪制路徑的問題，我們可以使用path和strokeEnd。但是大多數都准備一下strokeEnd以訪問形狀樣式屬性。

因此，我認為strokeEnd是用貝塞爾曲線路徑對蒙版圖像進行動畫處理的最佳方法。

在下面，我給出path和strokeEnd的代碼，並對兩者進行區分。

如果我使用animationWithKeyPath是路徑

要渲染和可動畫化的形狀。它指定形狀路徑。

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

路徑是可以繪制和動畫化的單個組件（如直線和圓弧）的集合，是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屬性定義起點 。