iOSアプリケーションのアニメーションまとめ

[UIView animateWithDuration:3.0f
                animations:^{
                      viewBlue.center = 
                      CGPointMake(
                      viewBlue.center.x,
                      viewBlue.center.y + 100);
                }
                completion:^(BOOL finished){
                         if(finished){
                             NSLog(@"finished animation");
                         }
                     }];

②CABasicAnimation

    /* 移動 */
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    
    // アニメーションのオプションを設定
    animation.duration = 3; // アニメーション速度
    animation.repeatCount = 1; // 繰り返し回数
    
    // 始点と終点を設定
    animation.fromValue = [NSValue valueWithCGPoint:viewBlue.layer.position]; // 始点
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(viewBlue.layer.position.x,
                                                              viewBlue.layer.position.y + 100)]; // 終点
    
    // アニメーションを追加
    [viewBlue.layer addAnimation:animation forKey:@"move-layer"];

③CATransaction<

    [CATransaction begin];//start animation!
    [CATransaction setCompletionBlock:^{//終了処理
        //終了判定するアニメーションを指定
        CAAnimation *animationForKeyFrame = [viewBlue.layer animationForKey:@"position"];
        [viewBlue.layer removeAnimationForKey:@"position"];
        if(animationForKeyFrame){//終了判定
            NSLog(@"finished animation");
        }
    }];
    {
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
        [animation setValue:@"animation1" forKey:@"id"];//アニメーションにanimation1というキーを指定
        //アニメーションが終了しても(終了した位置で)残るよう：以下２行
        animation.fillMode = kCAFillModeForwards;
        animation.removedOnCompletion = NO;
        animation.duration = 3.0f;//アニメーション時間
        animation.fromValue = [NSValue valueWithCGPoint:viewBlue.center];//開始位置
        animation.toValue = [NSValue valueWithCGPoint:CGPointMake(viewBlue.center.x,
                                                                  viewBlue.center.y + 100)];//終了位置
        [viewBlue.layer addAnimation:animation forKey:@"position"];//アニメーションをビュー(レイヤー)にセット
    }
    [CATransaction commit];//アニメーションの実行

①、②、③ では①が最も簡単ですが、

③が最も柔軟にいろいろなことができそうです。

例えば、現在のアニメーションから別のアニメーションに移行させる時等です。

ゲーム中では様々なアクションにより、部品位置をアニメーションで変えるので

リアルタイムに変更するには③が最も多用しそうですね。

柔軟である一方で、③の特徴(デメリット？)として

・コードが長くなる

・ビュー自体ではなく、(ビューより更に根本的な)レイヤーに対してアニメーションを与える

メリットとしては

・任意の軌道を動かすアニメーション

・連続的にスムーズなアニメーション

などができるらしいです。

ちょww、レイヤーって何よっていう問題が出てきたので

次回レイヤーについて書こうと思います。

※ちらっとパーティクルについても調べていたんですが、

このレイヤーについて知らないとパーティクルも整理できなさそうだったので。。

続きます。

Change before you have to.

androidアプリ開発、iosアプリ開発、rails、deep learning .etc.を使った社会実験。

iOSアプリケーションのアニメーションまとめ