39

この複雑なアニメーションを繰り返してオートリバースするにはどうすればよいですか? オプションを追加する方法はありますか UIViewAnimationOptionAutoreverse | UIViewAnimationOptionこのアニメーション シーケンスを繰り返しますか?

   [UIView animateWithDuration:1.0f animations:^{

        someView.frame = someFrame1;

    } completion:^(BOOL finished) {

        [UIView animateWithDuration:0.5f animations:^{

            someView.frame = someFrame2;

        } completion:nil];

    }];
4

3 に答える 3

118

ポイント 1 から 2 へ、3 から 2 へ 1 へとアニメーション化して繰り返すにはanimateKeyframesWithDuration、iOS 7 以降で使用できます。

someView.frame = frame1;
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        someView.frame = frame2;
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        someView.frame = frame3;
    }];
} completion:nil];

自動レイアウトを使用している場合、制約定数の変更をアニメーション化できます。

[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        topConstraint.constant = 200;
        leftConstraint.constant = 200;
        [self.view layoutIfNeeded];
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        topConstraint.constant = 100;
        leftConstraint.constant = 300;
        [self.view layoutIfNeeded];
    }];
} completion:nil];

frameまたは、自動レイアウトを使用したアプローチは、制約を無効にすることであり、その後、値などを使用してアニメーション化できます。

以前のバージョンの iOS ではCAKeyframeAnimation、たとえば、パスに沿ってアニメーション化するために を使用できます。

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100.0, 100.0)];
[path addLineToPoint:CGPointMake(200.0, 200.0)];
[path addLineToPoint:CGPointMake(100.0, 300.0)];

CAKeyframeAnimation *animatePosition = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animatePosition.path = [path CGPath];
animatePosition.duration = 1.0;
animatePosition.autoreverses = YES;
animatePosition.repeatCount = HUGE_VALF;
[self.someView.layer addAnimation:animatePosition forKey:@"position"];

必要な数のポイントでこれを行うことができます。これは、曲線パス (円やベジエ曲線など) に沿ってアニメートする場合にも便利なテクニックです。

animateWithDuration:delay:options:animations:completion:2 点間をアニメートするには、次のようにを使用できます。

[UIView animateWithDuration:0.5
                      delay:0.0
                    options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveEaseInOut
                 animations:^{
                     // do whatever animation you want, e.g.,

                     someView.frame = someFrame1;
                 }
                 completion:NULL];

someViewこれにより、開始フレームとの間の動きがアニメートされsomeFrame1ます。

ちなみに、 と を組み合わせて使用​​するとUIViewAnimationOptionCurveEaseInOut、アニメーションが反転して繰り返されるときに、よりスムーズな効果が得られます。UIViewAnimationOptionAutoreverseUIViewAnimationOptionRepeat

于 2013-02-06T13:49:12.057 に答える