0

画面に円を描くiPhoneアプリを作っています。タイマー (5 秒ごと) を使用して円を「成長」させ、5 秒待ってから再び成長させます。円のサイズの増加をアニメーション化するときに問題が発生しました（パスと CAShapeLayer レイヤーを使用しています）。サイズ (from と to) はアニメーションで問題ありません。開始時に円が左上に移動し、そこから大きくなります。どんな助けや提案も素晴らしいでしょう。ありがとう

これが実装されるクラスは、UIView に追加される UIControl です。

//Called in init method
(void) initalPop {
  //Circle
  self.bubble = [CAShapeLayer layer];
  self.bubble.bounds = self.bounds;
  self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
  self.bubble.fillColor = [
    [UIColor greenColor] CGColor
  ];
  self.bubble.strokeColor = [
    [UIColor greenColor] CGColor
  ];
  self.bubble.lineWidth = 4.0;
  CGMutablePathRef path = CGPathCreateMutable();
  CGPathAddEllipseInRect(path, nil, self.bounds);
  self.bubble.path = path;
  [self.layer addSublayer: self.bubble];
}
//Called when timer goes off
- (void) StageGrow {
  CGFloat growSize = 50.0;
  //Change the size of us and center the circle (but dont want to animate this
  [CATransaction begin];
  [CATransaction setValue: (id) kCFBooleanTrue forKey: kCATransactionDisableActions];
  self.bounds = CGRectMake(0, 0, self.bounds.size.width + growSize, self.bounds.size.height + growSize);
  self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
  [CATransaction commit];
  [self ActualGrowCircle];
} - (void) ActualGrowCircle {
  CGMutablePathRef oldPath = CGPathCreateMutable();
  CGPathAddEllipseInRect(oldPath, nil, self.bubble.bounds);
  CGMutablePathRef path = CGPathCreateMutable();
  CGPathAddEllipseInRect(path, nil, self.bounds);
  CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @"path"];
  animation.duration = 2.0;
  animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
  animation.repeatCount = 1;
  animation.delegate = self;
  animation.autoreverses = NO;
  animation.fromValue = (__bridge id) oldPath;
  animation.toValue = (__bridge id) path;
  self.bubble.bounds = self.bounds;
  self.bubble.path = path;
  [self.bubble addAnimation: animation forKey: @"animatePath"];
}
4

2 に答える 2

0

それを解決しました。長い目で見れば、アニメーションをグループ化したところ、すべてがうまくいきました (以下のコードを参照)。助けてくれてありがとうロブ。

-(void)ActualGrowCircle {
    CGMutablePathRef newPath = CGPathCreateMutable();
    CGPathAddEllipseInRect(newPath, nil, self.bounds);

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.repeatCount = 1;
    animation.autoreverses = NO;
    animation.fromValue = (__bridge id)self.bubble.path;
    animation.toValue = (__bridge id)newPath;

    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"bounds"];
    animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation2.repeatCount = 1;
    animation2.autoreverses = NO;
    animation2.fromValue = [NSValue valueWithCGRect:self.bubble.bounds];
    animation2.toValue = [NSValue valueWithCGRect:self.bounds];

    CAAnimationGroup *group = [CAAnimationGroup animation];
    [group setAnimations:[NSArray arrayWithObjects: animation2, animation, nil]];
    group.duration = 0.5;
    group.delegate = self;

    self.bubble.bounds = self.bounds;
    self.bubble.path = newPath;
    [self.bubble addAnimation:group forKey:@"animateGroup"];

    CGPathRelease(newPath);


}
于 2013-05-20T07:30:43.290 に答える
0

バブルをサイズ (100, 100) からサイズ (150, 150) に拡大するとします。

長方形の楕円として作成oldPathします (0、0、100、100)。

長方形の楕円として作成pathします (0、0、150、150)。

バブル レイヤーの境界を (0, 0, 150, 150) に設定し、この変更をアニメートしません。

つまりoldPath、泡レイヤーの上端と左端に合わせて表示されます。

これを修正する 1 つの方法oldPathは、バブルの新しい境界を中心とする長方形を作成することです。

CGRect oldBubbleRect = CGRectInset(self.bounds, growSize / 2, growSize / 2);
CGPathRef oldPath = CGPathCreateWithEllipseInRect(oldBubbleRect, NULL);

ところで、作成しているパスをリークしています。CGPathReleaseそれらを使い終わったら、それらを呼び出す必要があります。

于 2013-04-07T05:30:31.443 に答える