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