はCGPathに

Question

の描画部分をアニメーション化するにはどうすれば次のシナリオにアプローチしたいです添付した画像のようなアニメーションを追加するには、このクリアされた領域が四角形のパスの周りを移動し続けるので、何度も繰り返し描画される矩形の視覚効果が得られます。 [古いヘビのゲームでのスネークの動き]

私はCABasicAnimationを使ってアニメーションを試みましたが、文字通り何かを達成できませんでした。

Answer 1

strokeStartとstrokeEndの両方をアニメーション化し、CAAnimationGroupを使用して同時に発生させる必要があります。

私はこれを見つけました。これは類似していますが迅速です。私はそれが助けるかもしれないと思う。

できない場合は実装しようとします。しかし、今はできません。

ハッピーコーディング。

Answer 2

このコードをお試しください。

UIBezierPath *drawablePath = [UIBezierPath bezierPathWithRect:CGRectMake(100.0, 100.0, 150.0, 100.0)]; 
    CAShapeLayer *squareLayer = [[CAShapeLayer alloc] init]; 
    squareLayer.path = drawablePath.CGPath; 
    squareLayer.strokeColor = [UIColor redColor].CGColor; 
    squareLayer.lineWidth = 5.f; 
    squareLayer.fillColor = [UIColor clearColor].CGColor; 
    squareLayer.strokeEnd = 1.f; 
    //squareLayer.strokeEnd = 0.9; // this line use draw half line but some animation issue. 
    [self.view.layer addSublayer:squareLayer]; 

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.fromValue = (id)[NSNumber numberWithFloat:0.10]; 
    drawAnimation.toValue = (id)[NSNumber numberWithFloat:1.f]; 
    drawAnimation.duration = 5.f; 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
    [squareLayer addAnimation:drawAnimation forKey:@"drawRectStroke"]; 

このコードは、矩形をアニメーションで描画するために使用します。