VOYAGE GROUP　エンジニアブログ : animation

こんにちは、VOYAGE GROUPエンジニアのガイアです
最近はiOSアプリの開発を主にやってます。
今までのiOSアプリ開発でアニメーションはほぼ触ったことがなかったのですが、今回アニメーションを行う用件が出てきたので、今回やったことを紹介します。

今年の5月始め、facebookがアニメーションエンジン「Pop」を発表しました。
「Pop」はfacebookがリリースしたアプリ「Paper」で使われているアニメーションライブラリをオープンソース化したものです。海外では盛り上がっています。
GithubでPopのページを見ると注目度の高さが分かります。

iOSでアニメーションは初めてですが、せっかくなのでPopを使ってみました。

- Pop

github pop
https://github.com/facebook/pop

facebook engineer blog
https://code.facebook.com/posts/234067533455773/introducing-pop-the-animation-engine-behind-paper/

このページでPopにおける目標が3つあげられています。
この目標自体がこのPopを使う利点でもあります。

一般的なアニメーションを便利に利用する
ポップは拡張可能なフレームワークにする
開発者に優しいかつ強力なプログラミング·モデルを構築する

- install

CocoaPodsでインストールできます。

pod ‘pop’, ‘~> 1.0’

必要なところでインポートします。

#import <pop/POP.h>

- Code

では実際のコードを見ていきます。

SpringAnimation

Boundsを変更するばねのようなアニメーション

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
- POPSpringAnimationのインスタンスを作成
- LayerBoundsをアニメーションさせる

DecayAnimation

XYの位置を変更するDecayアニメーション

 POPDecayAnimation *animX = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
- POPDecayAnimationのインスタンスを作成
- LayerPositionのXをアニメーションさせる

2つアニメーションを定義すると合成される。

BasicAnimation

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
- POPBasicAnimationのインスタンスを作成
- kPOPViewAlpha:Alphaの値をアニメーション

普通のアニメーションも同様に記述できるため覚えることが少なくて済みます。

PropertyNamedを変更すればアニメーションする要素を変更できます。

割と簡単にアニメーションできてしまいます。
Popを使わずにアニメーションしようとすると実装方法は複数あります。
Objective-Cでアニメーションまとめ

PopではNSObjectにカテゴリで関数を追加しているため、CALayerやUIViewなどで同じアニメーションのコードを書けます。
これがコードが統一され、「開発者に優しいかつ強力なプログラミング·モデル」を提供できている要因の一つのようです。（ってfacebook engineer blog に書いてありました）

- 拡張可能

２番目のポップは拡張可能なフレームワークにするとはどういうことでしょう？
実はアニメーションのカスタムプロパティを作ることができるようです。
Playing with pop (iv)

試しにLabelの数値をカウントアップするプロパティを作ってみました。

プロパティがなくても割と簡単に作ってしまえるのはいいですね。

- おまけ複数アニメーションを直列で実行したい

Blockを使えばできますが、簡単にできるようにライブラリを提供してくれている人がいました。
このライブラリを使えばBlockが使えるだけでなく、Popの構文をさらに短縮してくれます。
POP+MCAnimate

install

pod 'POP+MCAnimate', '~> 1.0'

#define MCANIMATE_SHORTHAND
#import <POP+MCAnimate.h>

code

まずは構文の短縮です

同じ動作をするコードです

pop

pop+MCAnimate

さらにアニメーションをBlockで分けて記述することが可能です。
ばねのようなアニメーションの後X軸で回転するアニメーションです。

割と直感的に書けるのでいいと思いました。
（おそらくPopそのままでも直列のアニメーションを書けるとはおもいますが…)

実際にPopを使ってみて、まだまだできないこともありますができる限りPopを使いたいです。
（コードが統一されるため）
そして、こんな僕でも簡単にアニメーションが作れました !
ありがとうPop !

記事のサンプルコード https://github.com/Gaia-Murata/PopDemo

タグ：: #facebook; #pop; #animation; #iOS; #初心者

VOYAGE GROUP エンジニアブログ

animation

【初心者でも簡単】facebookのPopでiOSアニメーションやってみた