Posted at

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

More than 3 years have passed since last update.

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

687474703a2f2f636c2e6c792f696d6167652f3031325230443352337832672f646f776e6c6f61642f737072696e677377696674322e6a7067.jpeg

GitHub

https://github.com/MengTo/Spring

導入は公式のGitHub内に書いてありますが、英語なのでメモ用に日本語で書き残しておきたいと思います。

また、自分が導入するにあたって、つまずいた部分も何点かあるので参考なれればと思います。


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

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

スクリーンショット 2015-11-10 0.21.21.png


Xcodeへ導入

ダウンロードしたら解凍をして、回答したフォルダの中にあるSpringフォルダをXcodeのプロジェクトの中にドラック&ドロップします。

スクリーンショット 2015-11-10 0.23.14.png




ドラック&ドロップをするとこんな下画面がでると思います。

以下2点に気をつけてください。



➀Destinationにチェックを入れる

②Added foldersのCreate groupsを選択する

スクリーンショット 2015-11-10 0.26.30.png

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

Finishを押すと以下様にSpringライブラリがプロジェクトにはいると思います。

スクリーンショット 2015-11-10 0.32.20.png


ボタンを動かす

ボタンを配置します。

スクリーンショット 2015-11-10 20.55.34.png




ボタンをクリックしてCustomClassのClassを編集します。

Classを「SpringButton」にします。右の下矢印を押すと候補としてあがっていると思います。

スクリーンショット 2015-11-10 20.56.07.png




クラスをつけるとSpringButtonの項目がでると思います。

AutostartをOn、AutohideをDefault、Animationをshakeにします。

スクリーンショット 2015-11-10 20.56.33.png

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


コードでアニメーションをする方法

また、先程はSpringButtonで直接アニメーションを設定しましたが、コードで書くこともできます。

ボタンを配置して、クラスをSpringButtonにするまでは先程と一緒です。

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

スクリーンショット 2015-11-10 21.42.52.png

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

import UIKit

class ViewController: UIViewController {

@IBOutlet var button: SpringButton!

override func viewDidLoad() {
super.viewDidLoad()
button.animation = "shake"
button.duration = 1.0
button.animate()
}
}

これで任意の場所で動かすことができました。


いろんなアニメーション

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

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のプロジェクトが入っています。

これをそのまま起動しビルドをしてエミュレータで起動すると、簡単にどんなアニメーションがあるのか体験できます。参考にしてみてください。

スクリーンショット 2015-11-10 21.53.29.png


最後に

ライブラリの入れ方を間違わなければ簡単に導入できると思います。

簡単にアニメーションが使えるのでアプリらしくなったのではないでしょうか。