1

円をアニメーション化する CAShapeLayer があります。アニメーションでは、最初に円を時計回りに「描画」し、次に円を時計回りに再描画します。一種の「回転円」。別の言い方をすると、パス ストロークの終点を始点に移動してから、始点を終点に移動します。

アニメーション自体は機能しますが、時々グリッチが発生します。それは「描かれていない」はずの円全体を少し垣間見ることで現れます。

なぜこれが発生し、どうすれば修正できますか?

ありがとう、

// Shape creation
layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, self.width - 2 * OUTER_BORDER_WIDTH, self.width - 2* OUTER_BORDER_WIDTH)].CGPath;

// Animation queuing
-(void) applyNextAnimation
{

    CABasicAnimation* animation;

    if (self.animatingOpening)
    {
        animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation.fromValue = [NSNumber numberWithFloat:0.0f];
        animation.toValue = [NSNumber numberWithFloat:1.0f];
        self.animatingOpening = NO;
    }
    else
    {
    animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
        animation.fromValue = [NSNumber numberWithFloat:0.0f];
        animation.toValue = [NSNumber numberWithFloat:1.0f];
        self.animatingOpening = YES;
    }

    animation.duration = 1.0f;
    animation.autoreverses = NO;
    animation.delegate = self;
    animation.removedOnCompletion = YES;
    [self.outerCircleLayer addAnimation:animation forKey:@"stroke"];
}

// Animation stop callback
-(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if (self.isAnimating)
    {
        [self applyNextAnimation];
    }
}
4

1 に答える 1

1

レイヤーに対応するプロパティを設定していないため、点滅します。したがって、アニメーションが完了すると、レイヤーのモデルはまだアニメーション化前の状態であり、2 つのアニメーションの間に一瞬表示されます。

これはあなたが望むものにあなたを導きます...

if (self.animatingOpening)
{

    self.outerCircleLayer.strokeStart = 0.0;

    animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = [NSNumber numberWithFloat:0.0f];
    animation.toValue = [NSNumber numberWithFloat:1.0f];
    self.animatingOpening = NO;
}
else
{
    self.outerCircleLayer.strokeStart = 1.0;

    animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animation.fromValue = [NSNumber numberWithFloat:0.0f];
    animation.toValue = [NSNumber numberWithFloat:1.0f];
    self.animatingOpening = YES;
}

animation.duration = 1.0f;
animation.autoreverses = NO;

それはほとんど機能しますが、描画されていない状態から描画状態のアニメーションを開始するときに、より微妙な不具合に気付くでしょう。円の始まりには、開始時に小さな反転アニメーションがあります。これは、 strokeStart を 1.0 から 0.0 に設定することによってトリガーされる暗黙的なアニメーションです。すべてのアニメーション効果を制御できるように、これを取り除く必要があります。これは、CATransaction で disableActions を YES に設定することで最も簡単に実現できます。

[CATransaction setDisableActions:YES];

（すぐ上に追加if (self.animatingOpening)）

于 2015-10-15T13:07:10.523 に答える