Swift5でUIViewを3秒でアニメーションを実装させる方法【Swift/Objective-C】

2020年8月27日

UIViewクラスを継承しているUILabelやUIButtonなどはUIViewのクラス関数であるanimate関数を使用することで様々なアニメーションを簡単に行うことができます。

UIView.animate によるアニメーション

Swift5

UIView.animate(withDuration: 1.0, // アニメーションの秒数
               delay: 0.5, // アニメーションが開始するまでの秒数
               options: [.curveLinear, .repeat], // アニメーションのオプション 等速 | 繰り返し
               animations: {
                // アニメーション処理
                self.view.backgroundColor = UIColor.black
                
}, completion: { (finished: Bool) in
    // アニメーション終了に行う処理
    self.view.backgroundColor = UIColor.white
})

Objective-C

// アニメーションのオプション 等速 | 繰り返し
UIViewAnimationOptions animationOption = UIViewAnimationOptionCurveLinear  | UIViewAnimationOptionRepeat ;
 
[UIView animateWithDuration:1.0f // アニメーションの秒数
                  delay:0.5f // アニメーションが開始するまでの秒数
                options:animationOption
             animations:^{
                 // アニメーション処理
                 self.view.backgroundColor = [UIColor blackColor];
             }
             completion:^(BOOL finish){
                 // アニメーション終了に行う処理
                self.view.backgroundColor = [UIColor whiteColor];
             }];

アニメーションが可能なプロパティ

プロパティ意味
frame座標とサイズ
bounds座標とサイズ
center中心座標
transform移動、拡大縮小、回転
backgroundcolor背景色
contentStretchストレッチ方法
alpha透明度

アニメーションに設定できるオプション

オプション意味
UIViewAnimationOptionRepeat繰り返し
UIViewAnimationOptionCurveEaseInOut加速して開始、減速して終了
UIViewAnimationOptionCurveEaseIn加速して開始
UIViewAnimationOptionCurveEaseOut減速して終了
UIViewAnimationOptionCurveLinear等速
UIViewAnimationOptionBeginFromCurrentState現在の状態から開始する
UIViewAnimationOptionAutoreverse再生が終了した後に逆再生する
UIViewAnimationOptionAllowAnimatedContentアニメーション中にアニメーションを許可
UIViewAnimationOptionAllowUserInteraction中断を許可

UIView.transition によるアニメーション

Swift5

UIView.transition(with: self.animetionView, // アニメーションさせるview
                  duration: 1.0, // アニメーションの秒数
                  options: [.transitionFlipFromLeft, .curveLinear], // アニメーションの指定 左から右に回転, 等速
                  animations: {
                    // アニメーション中の処理
                    self.animetionView.backgroundColor = UIColor.yellow
},
                  completion:  { (finished: Bool) in
                    // アニメーション終了に行う処理
                    self.animetionView.backgroundColor = UIColor.blue
})

Objective-C

[UIView transitionWithView:self.animetionView
                  duration:1.0 // アニメーションの秒数
                   options:UIViewAnimationTransitionFlipFromLeft | UIViewAnimationOptionCurveLinear // アニメーションの指定 左から右に回転 | 等速
                animations:^{
    // アニメーション中の処理
    self.animetionView.backgroundColor = [UIColor yellowColor];
} completion:^(BOOL finished) {
    // アニメーション終了に行う処理
    self.animetionView.backgroundColor = [UIColor blueColor];
}];

アニメーションが可能なプロパティ

プロパティ意味
frame座標とサイズ
bounds座標とサイズ
center中心座標
transform移動、拡大縮小、回転
backgroundcolor背景色
contentStretchストレッチ方法
alpha透明度

アニメーションに設定できるオプション(速度や繰り返しなど)

オプション意味
UIViewAnimationOptionRepeat繰り返し
UIViewAnimationOptionCurveEaseInOut加速して開始、減速して終了
UIViewAnimationOptionCurveEaseIn加速して開始
UIViewAnimationOptionCurveEaseOut減速して終了
UIViewAnimationOptionCurveLinear等速
UIViewAnimationOptionBeginFromCurrentState現在の状態から開始する
UIViewAnimationOptionAutoreverse再生が終了した後に逆再生する
UIViewAnimationOptionAllowAnimatedContentアニメーション中にアニメーションを許可
UIViewAnimationOptionAllowUserInteraction中断を許可
UIViewAnimationTransitionFlipFromLeft左から右に回転するアニメーション
UIViewAnimationTransitionFlipFromRight右から左に回転するアニメーション
UIViewAnimationOptionTransitionFlipFromTop上から下に回転するアニメーション
UIViewAnimationOptionTransitionFlipFromBottom下から上に回転するアニメーション
UIViewAnimationOptionTransitionCurlUpページをめくるようなアニメーション
UIViewAnimationOptionTransitionCurlDownページを戻すようなアニメーション
UIViewAnimationOptionTransitionCrossDissolve
指定アニメーション処理に徐々に変化するアニメーション