読者です 読者をやめる 読者になる 読者になる

明日こそ、定時

定時に帰りたい社畜SEが、定時で帰れた時の暇つぶしに読める記事を綴っています。雑記。好きなこといろいろと…

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

スポンサードリンク

Qiitaにも書いたのですが一応こちらにも。 いまさらですが、Springは簡単にアニメーションを付けられるライブラリで無料で公開されています。環境はSwift2.0 Xcode7.1です。 f:id:sasagin:20151110220124j:plain

GitHub github.com

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

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


下図、右下の部分にDownloadZIPがあるのでクリックしてZIPをダウンロードします。 f:id:sasagin:20151110220322p:plain:w400

Xcodeへ導入


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

f:id:sasagin:20151110220410p:plain:w400
ドラック&ドロップをするとこんな下画面がでると思います。 以下2点に気をつけてください。

➀Destinationにチェックを入れる
②Added foldersのCreate groupsを選択する

f:id:sasagin:20151110220451p:plain:w400

私は、Create folder referencesを選択してxcodeへ導入していたのでアニメーションがうまくうごきませんでした。 Finishを押すと以下様にSpringライブラリがプロジェクトにはいると思います。 f:id:sasagin:20151110220800p:plain:w400

ボタンを動かす


ボタンを配置します。

f:id:sasagin:20151110220955p:plain:w400

ボタンをクリックしてCustomClassのClassを編集します。 Classを「SpringButton」にします。右の下矢印を押すと候補としてあがっていると思います。

f:id:sasagin:20151110221051p:plain:w300

クラスをつけるとSpringButtonの項目がでると思います。 AutostartをOn、AutohideをDefault、Animationをshakeにします。

f:id:sasagin:20151110221003p:plain:w300

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

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


また、先程はSpringButtonで直接アニメーションを設定しましたが、コードで書くこともできます。 ボタンを配置して、クラスをSpringButtonにするまでは先程と一緒です。
ボタンをコントロール+ドラッグ&ドロップでViewController.swiftにアウトレット接続します。ボタンのクラス設定をしているとTypeが自動的にSpringButtonになっています。

f:id:sasagin:20151110221005p:plain:w400

そして好きな場所にコードを書くことで、好きなタイミングでアニメーションを動かすことができます。今回は、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のプロジェクトが入っています。 これをそのまま起動しビルドをしてエミュレータで起動すると、簡単にどんなアニメーションがあるのか体験できます。参考にしてみてください。 f:id:sasagin:20151110221009p:plain:w400


にほんブログ村 IT技術ブログ プログラム・プログラマーへ
にほんブログ村