web-dev-qa-db-ja.com

UIViewアニメーションシーケンスを繰り返して自動反転させる方法

この複雑なアニメーションを繰り返して自動反転させる方法は？オプションを追加する方法はありますかUIViewAnimationOptionAutoreverse | UIViewAnimationOptionこのアニメーションシーケンスに繰り返しますか？

   [UIView animateWithDuration:1.0f animations:^{

        someView.frame = someFrame1;

    } completion:^(BOOL finished) {

        [UIView animateWithDuration:0.5f animations:^{

            someView.frame = someFrame2;

        } completion:nil];

    }];
iosobjective-cuiviewuiviewanimation
35
B.S.

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

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"];

あなたが望む多くのポイントでこれを行うことができます。これは、曲線のパス（円やベジェ曲線など）に沿ってアニメーション化する場合にも便利な手法です。

2つのポイント間でアニメーションを作成するには、次のようなanimateWithDuration:delay:options:animations:completion:を使用できます。

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

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

これは、開始フレームからsomeFrame1へのsomeViewの動きをアニメーション化します。

ところで、UIViewAnimationOptionCurveEaseInOutおよびUIViewAnimationOptionAutoreverseとUIViewAnimationOptionRepeatを組み合わせて使用​​すると、アニメーションが反転して繰り返されるときに、より滑らかな効果が得られます。

109
Rob

シンプルなウィグルシーケンスのSwift 4：

func animateWiggle() {
    // Set animation props
    let scaleDelta = CGFloat(0.10)

    // Set transforms
    let wiggleOutHorizontally = CGAffineTransform(scaleX: 1.0 + scaleDelta, y: 1.0)
    let wiggleOutVertically = CGAffineTransform(scaleX: 1.0, y: 1.0 + scaleDelta)

    // Run animation sequence
    UIView.animateKeyframes(withDuration: 1.0, delay: 0.0, options: [.autoreverse, .repeat], animations: {
        // Animate wiggle horizontally
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: {
            self.transform = wiggleOutHorizontally
        })

        // Animate wiggle vertically
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
            self.transform = wiggleOutVertically
        })
    },
    completion: nil)
}
4
Crashalot