アニメーションを勉強したかったので書きました！
swiftでどんなアニメーションや方法があるか基本的なものを広く紹介していきたいと思います。
結論からいうとこんなアニメを作ります。
Step 1. アニメ方法に応じてConstraintを設定する
view.bounds.center.yもしくはx軸を使って動かすこともできますが、
今回はConstraintsの値をアニメで変更させます.
まずは色のついたBoxを並べて全部以下のconstraintをつけました
- width
- height
- top
- centerY constraint
それぞれどのconstraintを使うかは以下の図に書いてあります。
Step 2. それぞれ使うconstraintをIBOutletで作る
@IBOutlet weak var orangeCenterYConstraint: NSLayoutConstraint!
@IBOutlet weak var pinkCenterYConstraint: NSLayoutConstraint!
@IBOutlet weak var greenTopConstraint: NSLayoutConstraint!
@IBOutlet weak var blueTopConstraint: NSLayoutConstraint!
@IBOutlet weak var redBox: UIView!
赤ボックスは不透明度を変えるだけなので、UIViewのOutletを作りました。
Step 3. あらかじめ画面外に配置しておく
画面の外から飛んでくるあにめは、viewWillAppear()をoverrideして、画面の外に配置しておく.また、赤ボックスだけ不透明度０に設定しておく。viewWillAppear()は画面が出る前の処理なので、この動きは特に見えない。
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
//それぞれ画面から出す
orangeCenterYConstraint.constant += view.bounds.width
pinkCenterYConstraint.constant += view.bounds.width
greenTopConstraint.constant += view.bounds.height
redBox.alpha = 0.0
}
オレンジとピンクのボックスは、centerYconstraintの値を、画面のwidthだけ増やしているので、右に隠れます。
緑はtop Constraintの値を増やしてます。
青のボックスは緑につられているので、設定してなくても画面外に出てくれます。
Step 4. アニメーションさせる
viewDidAppear()をoverrideしてアニメのメソッドを書き込む。この場合viewDidLoad()には何も書かない！
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
self.orangeCenterYConstraint.constant -= self.view.bounds.width
self.greenTopConstraint.constant -= self.view.bounds.height
self.view.layoutIfNeeded()
},completion:nil)
UIView.animate(withDuration: 1.5, delay: 0.5, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.1, options: .curveEaseIn, animations: {
self.pinkCenterYConstraint.constant -= self.view.bounds.width
self.view.layoutIfNeeded()
//終わったらアニメーションする
}, completion: {(finished: Bool) in
UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
self.redBox.alpha = 1
}, completion: nil)
UIView.animate(withDuration: 0.5, delay:1.5, options: .curveEaseIn, animations: {
self.blueTopConstraint.constant += 200
self.view.layoutIfNeeded()
}, completion: nil)
})
}
5. 説明しよう！
UIViewをanimate()するときの基本のコードはこれです。基本の属性：
- withDuration → アニメーションにかかる時間
- delay → アニメーションを遅らせる時間
- options → アニメーション方法
UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
// UIViewをアニメーションさせる
},completion:nil)
その他属性：
- usingSpringWithDamping → アニメーションが終わった後のバウンドにかける時間
- initialSpringVelocity → アニメーションのバウンドの速さ
UIView.animate(withDuration: 1.5, delay: 0.5, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.1, options: .curveEaseIn, animations: {
// UIViewをアニメーションさせる
}, completion:nil)
これをやるとピンクのボックスのように、バウンドして終わります。
アニメを繋げる
completion, をnilにせずに続きを書くと、そのアニメーションが終わった後に別なアニメが始まるようにできます。
UIView.animate(withDuration: 1.5, delay: 0.5, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.1, options: .curveEaseIn, animations: {
//アニメーション１
}, completion: {(finished: Bool) in
UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
//アニメーション２：アニメーション１が終わったら実行される
}, completion: nil)
})
完成コードはこちら
今後こんなトピックも載せる予定。
[Animatorクラスで動かす、UITimingCurveProviderの使い方、CGAffinetransform, Present and Dismiss ViewController, UIViewControllerAnimatedTransitioning]等
次回はAnimatorを使っていきます。