レイヤーに 2 つのサブレイヤーがある UIView があります。1 つは CAShapeLayer で、もう 1 つは CALayer です。
CAShapeLayer には、bezierPathWithOvalInRect を使用して設定されたパスがあり、CABasicAnimation を使用してアニメーション化されます。「strokeEnd」プロパティは、特定の期間にわたって 0.0 から 1.0 にアニメーション化されます。これにより、期間全体にわたって楕円形の描画が最初から最後まで見られるようになります。
CALayer の内容は単に鉛筆画に設定されており、CAKeyframeAnimation を使用してアニメーション化されています。「位置」プロパティは、CAKeyframeAnimation のパス プロパティを CAShapeLayer と同じパスに設定し、CABasicAnimation と同じ期間にアニメーション化されます。これには、鉛筆が同じ期間に同じパスに沿って移動する効果があり、鉛筆が楕円形を描いているように見えます。
iOS6 で美しく動作します。ただし、iOS7 ではタイミングがずれています。位置と strokeEnd のアニメーションは同期していません。特定の瞬間、特に時間 0、duration/4、duration/2、duration*3/4、duration で同期しています。その間、同期はオフになります。
たとえば、楕円の代わりに長方形または三角形を使用すると、iOS6 および iOS7 でうまく機能します。唯一の問題は、iOS7 の楕円です。
基本的に、各アニメーションが異なるレイヤーをアニメーション化する 2 つの異なるアニメーションを同期する方法を知る必要があります。
2 つのレイヤーを作成するコードは次のとおりです。
self.drawingLayer = [CAShapeLayer layer];
self.drawingLayer.frame = self.view.bounds;
self.drawingLayer.bounds = drawingRect;
self.drawingLayer.path = path.CGPath;
self.drawingLayer.strokeColor = [[UIColor blackColor] CGColor];
self.drawingLayer.fillColor = nil;
self.drawingLayer.lineWidth = 10.0f;
self.drawingLayer.lineJoin = kCALineJoinRound;
self.drawingLayer.lineCap = kCALineJoinRound;
[self.view.layer addSublayer:self.drawingLayer];
UIImage *pencilImage = [UIImage imageNamed:@"pencil.png"];
self.pencilLayer = [CALayer layer];
self.pencilLayer.contents = (id)pencilImage.CGImage;
self.pencilLayer.contentsScale = [UIScreen mainScreen].scale;
self.pencilLayer.anchorPoint = CGPointMake(0.0, 1.0); //bottom left corner
self.pencilLayer.frame = CGRectMake(0.0f, 0.0f, 100.0f, 100.0f);
[self.view.layer addSublayer:self.pencilLayer];
そして、2 つの異なるアニメーションを作成して開始するコードを次に示します (self.drawingLayer は CAShapeLayer で、self.pencilLayer は CALayer です)。
CABasicAnimation *drawingAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawingAnimation.duration = 10.0;
drawingAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawingAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[self.drawingLayer addAnimation:drawingAnimation forKey:@"strokeEnd"];
CAKeyframeAnimation *pencilAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pencilAnimation.duration = drawingAnimation.duration;
pencilAnimation.path = self.drawingLayer.path;
pencilAnimation.calculationMode = kCAAnimationPaced;
pencilAnimation.delegate = self;
pencilAnimation.fillMode = kCAFillModeForwards;
pencilAnimation.removedOnCompletion = NO;
[self.pencilLayer addAnimation:pencilAnimation forKey:@"position"];
アップデート
問題を示すテストアプリを次に示します。