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

たちはCABasicAnimationを使用してパスで画像をアニメーション化することができます1

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には、すべてのレイヤーキーパス、シェイプレイヤーキーパス、CAレイヤーキーパス、テキストレイヤーキーパス、マスクレイヤーキーパス、UIViewレイヤーキーパス、エフェクト、エフェクトなどの位置、リプリケータのキーパスが含まれます。

パスを描画するためのあなたの質問によると、pathとstrokeEnd.Butを使うことができますが、シェイプスタイルのプロパティにアクセスするためには、ほとんどの場合strokeEndを用意します。

私はstrokeEndがベジェパスでマスク画像をアニメーション化するのに最適なものだと思います。

以下は、パスとストロークのコードを示します。また、私は両方を使用しません。

Iは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は石英2Dの基本的な概念であることができる線と円弧状個々の構成要素の集合です。以下のコードで

は、私たちはシェイプスタイルのプロパティにアクセスしたい場合strokeEndは

一般的に、我々はパスとアニメートをなでる停止することで strokeEnd

相対位置を使用することができます。

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

このプロパティの値は1.0に0.0でなければなりません。このプロパティのデフォルト値は1.0です。事strokeStartプロパティと組み合わせる

次

またstrokeEnd定義は、このプロパティは、脳卒中へのパスの部分領域を定義します。 このプロパティの値は、ストロークを終了するパスに沿った相対ポイントを示し、strokeStartプロパティは開始ポイントを定義します。