post Image
Swift3.0でアニメーション1 ~ Animate()メソッド編~

アニメーションを勉強したかったので書きました!

swiftでどんなアニメーションや方法があるか基本的なものを広く紹介していきたいと思います。

結論からいうとこんなアニメを作ります。
animation1.gif

Step 1. アニメ方法に応じてConstraintを設定する

view.bounds.center.yもしくはx軸を使って動かすこともできますが、
今回はConstraintsの値をアニメで変更させます.

まずは色のついたBoxを並べて全部以下のconstraintをつけました
– width
– height
– top
– centerY constraint

それぞれどのconstraintを使うかは以下の図に書いてあります。
Screen Shot 2017-07-22 at 10.47.24 PM.png

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して、画面の外に配置しておく.また、赤ボックスだけ不透明度0に設定しておく。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: {
        //アニメーション1

        }, completion: {(finished: Bool) in

            UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
          //アニメーション2:アニメーション1が終わったら実行される

            }, completion: nil)
        })

完成コードはこちら

今後こんなトピックも載せる予定。
[Animatorクラスで動かす、UITimingCurveProviderの使い方、CGAffinetransform, Present and Dismiss ViewController, UIViewControllerAnimatedTransitioning]等
次回はAnimatorを使っていきます。


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。