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
| 指定アニメーション処理に徐々に変化するアニメーション |