Interpolator を作ったリッチな View の Animation

Interpolatorが何かとかそういうのはググってください!
一番厄介なAnimationの変化率の式をどうやって作っていくかかなーと思うのでそこら辺を詳しく書いていきます｡

Interpolatorの作成

android.view.animation.Interpolatorを実装すればInterpolatorになります｡
で､ getInterpolation(float v) の中身を実装していく感じになります｡

例えばBounceInterpolatorのコードでは

42    public float getInterpolation(float t) {
43        // _b(t) = t * t * 8
44        // bs(t) = _b(t) for t < 0.3535
45        // bs(t) = _b(t - 0.54719) + 0.7 for t < 0.7408
46        // bs(t) = _b(t - 0.8526) + 0.9 for t < 0.9644
47        // bs(t) = _b(t - 1.0435) + 0.95 for t <= 1.0
48        // b(t) = bs(t * 1.1226)
49        t *= 1.1226f;
50        if (t < 0.3535f) return bounce(t);
51        else if (t < 0.7408f) return bounce(t - 0.54719f) + 0.7f;
52        else if (t < 0.9644f) return bounce(t - 0.8526f) + 0.9f;
53        else return bounce(t - 1.0435f) + 0.95f;
54    }

こんな感じになっており､コレを見慣れた式に直すと

こんな感じになるわけです｡

グラフと式みてもらえると分かるんですが､これ全部2次方程式なんですよ｡
時間でMaxが1な横軸､縦軸が1で100%な感じ(2だと200%で倍になる感覚)でつかめると思います｡

そう､基本的に高3までの数学で余裕でイケるんですね!!
素晴らしき高校数学｡

高校数学の素晴らしさは置いといて､次にサクッとサンプル作ってみます｡

拡大して､元に戻り､その後バウンドするようなInterpolator

BounceInterpolatorを少しパクらせてもらって､こんな感じのグラフを作成します｡

数式はこんな感じで｡

グラフの方をみてもらえれば分かるんですがx=0.5の時にy=1.3になるようになっています｡
そのため､設定したDuration * 0.5経った頃に元の大きさから130%大きくなります｡
で､その後は､まぁ､ボンボンとなるわけですね!!!!!

sin波も高校数学で､あー高校数学素晴らしい｡

これ､実際どういう動きになるのかというと､www.youtube.com
コレの星の部分のAnimationになります｡

一応今回作ったInterpolatorはこんな感じ｡
gist.github.com
作ったグラフから式を書き写しただけですね｡

他にも作った

amyu.hatenadiary.com
amyu.hatenadiary.com

最後に

Interpolatorの何が素晴らしいって､Interpolatorを極めればかなりAnimationをリッチに出来るというところです!!!!
かなり良いです!!!
Interpolatorを使いこなせてなかったころ､Viewの拡大縮小は､拡大のアニメーションが終わったあとに縮小のアニメーションを入れる､といった感じに実装していました｡
しかし!! こんな簡単にInterpolator作ってAnimatorなどにセットするだけで､リッチな感を出したAnimationが作れるって良くないですか!!!!
大体が2次方程式から､正弦波など､ある程度は授業でやったグラフで作れるというのがほんとうに良いですね｡

あと､サンプルで書いた動画のViewはそのうち全部コード公開すると思います｡
今は闇の力が働いて公開できないので､待っててください!!!

Interpolator職人に俺はなる!!!!
おわり

参考

Android Animations Tutorial 5: More on Interpolators | Cogito Learning