動畫爲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中的圖層

回答

相關問題