【swift】Springを使ってボタンにアニメーションをつける

いまさらですが、Springは簡単にアニメーションを付けられるライブラリで無料で公開されています。環境はSwift2.0 Xcode7.1です。

![687474703a2f2f636c2e6c792f696d6167652f3031325230443352337832672f646f776e6c6f61642f737072696e677377696674322e6a7067.jpeg](https://qiita-image-store.s3.amazonaws.com/0/60753/e3aa4d43-4f8d-8dba-f6a5-64c86cb0d80f.jpeg)

GitHub
https://github.com/MengTo/Spring


導入は公式のGitHub内に書いてありますが、英語なのでメモ用に日本語で書き残しておきたいと思います。
また、自分が導入するにあたって、つまずいた部分も何点かあるので参考なれればと思います。

#ライブラリのダウンロード

下図、右下の部分にDownloadZIPがあるのでクリックしてZIPをダウンロードします。

<img width="1143" alt="スクリーンショット 2015-11-10 0.21.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/5efd0a33-b0e7-e90d-f70a-2486771e3f60.png">

#Xcodeへ導入
ダウンロードしたら解凍をして、回答したフォルダの中にあるSpringフォルダをXcodeのプロジェクトの中にドラック＆ドロップします。
<img width="519" alt="スクリーンショット 2015-11-10 0.23.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/f3e5dd8a-2417-260f-39bd-f25e8a1e2eec.png">
<br>
ドラック＆ドロップをするとこんな下画面がでると思います。
以下２点に気をつけてください。
<b>
➀Destinationにチェックを入れる
②Added foldersのCreate groupsを選択する
</b>

<img width="734" alt="スクリーンショット 2015-11-10 0.26.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/eca92bee-cbd8-255d-18d9-0075d0790c7c.png">

私は、Create folder referencesを選択してxcodeへ導入していたのでアニメーションがうまくうごきませんでした。

Finishを押すと以下様にSpringライブラリがプロジェクトにはいると思います。
<img width="400" alt="スクリーンショット 2015-11-10 0.32.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/1bbcc77b-0f37-be18-a30a-85cb77624488.png">

#ボタンを動かす
ボタンを配置します。
<img width="593" alt="スクリーンショット 2015-11-10 20.55.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/68b07de6-fa02-4372-d9a2-00d3294242ae.png">
<br>
ボタンをクリックしてCustomClassのClassを編集します。
Classを「SpringButton」にします。右の下矢印を押すと候補としてあがっていると思います。
<img width="258" alt="スクリーンショット 2015-11-10 20.56.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/68dcb665-b075-f959-6721-ee17430e4b78.png">
<br>
クラスをつけるとSpringButtonの項目がでると思います。
AutostartをOn、AutohideをDefault、Animationをshakeにします。

<img width="255" alt="スクリーンショット 2015-11-10 20.56.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/e0eec76b-b3d2-4171-3c3d-e16f413d91f7.png">

これで、ビルドをしてエミュレータを起動すると作成したボタンが横に揺れると思います。

#コードでアニメーションをする方法
また、先程はSpringButtonで直接アニメーションを設定しましたが、コードで書くこともできます。
ボタンを配置して、クラスをSpringButtonにするまでは先程と一緒です。

ボタンをコントロール+ドラッグ＆ドロップでViewController.swiftにアウトレット接続します。ボタンのクラス設定をしているとTypeが自動的にSpringButtonになっています。

<img width="929" alt="スクリーンショット 2015-11-10 21.42.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/efdb1d8b-2c01-83ad-32fa-1a2a697d3633.png">

そして好きな場所にコードを書くことで、好きなタイミングでアニメーションを動かすことができます。今回は、Viewが呼び出されたと同時にアニメーションを起動します。

```swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet var button: SpringButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        button.animation = "shake"
        button.duration = 1.0
        button.animate()
    }
}
```
これで任意の場所で動かすことができました。

#いろんなアニメーション
さっきのAnimationの部分に以下の文字を入れると様々なアニメーションがつかえます。

```swift
shake
pop
morph
squeeze
wobble
swing
flipX
flipY
fall
squeezeLeft
squeezeRight
squeezeDown
squeezeUp
slideLeft
slideRight
slideDown
slideUp
fadeIn
fadeOut
fadeInLeft
fadeInRight
fadeInDown
fadeInUp
zoomIn
zoomOut
flash
```
durationなどを組み合わせることで、アニメーションの動きを遅くしたりなど様々なカスタマイズができるので試してみてください。

#全部のアニメーション
はじめにGitHubでダウンロードしたZIPの中にXcodeのプロジェクトが入っています。
これをそのまま起動しビルドをしてエミュレータで起動すると、簡単にどんなアニメーションがあるのか体験できます。参考にしてみてください。
<img width="261" alt="スクリーンショット 2015-11-10 21.53.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/60753/d99578fe-7153-b382-eb90-df8744ae6c6d.png">

#最後に
ライブラリの入れ方を間違わなければ簡単に導入できると思います。
簡単にアニメーションが使えるのでアプリらしくなったのではないでしょうか。