Android TextureView、SurfaceViewで簡単にトゥイーンアニメーション 〜FPSAnimator〜

#Tweenアニメーションの作成

FPSAnimatorの基本的な使い方は<a href="http://qiita.com/MasayukiSuda/items/4e0eff096ae2e7183f3a">こちら</a>に記述しました。
今回の記事ではTweenAnimationに関して詳しく書きます。

##Bitmapをアニメーションさせる

1. BitmapDrawerを作成
インスタンス作成時に、Bitmap をコンストラクタに設定。

2. DisplayObjectを生成し、FPSTextureView、FPSSurfaceView or ContainerにAddする。
withの後にTweenアニメーションをするならばtween()、放物線運動のアニメーションを行うならparabolic()を記述。
今回はTweenアニメーションなのでtween()。

<img src="https://raw.githubusercontent.com/MasayukiSuda/FPSAnimator/master/art/scaleAndAlpha.gif" width="28%">

```
    BitmapDrawer bitmapDrawer = new BitmapDrawer(bitmap)
        .dpSize(this)
        .scaleRegistration(bitmap.getWidth() / 2, bitmap.getHeight() / 2);

    float x = 300;
    float y = 400;

    DisplayObject bitmapDisplay = new DisplayObject();
    bitmapDisplay.with(bitmapDrawer)
            .tween()
            .tweenLoop(true)
            .transform(x, y)
            .to(500, x, y, 0, 6f, 6f, 0, Ease.SINE_IN_OUT)
            .waitTime(300)
            .transform(x, y, Util.convertAlphaFloatToInt(1f), 1f, 1f, 0)
            .waitTime(300)
            .end();
```

##Textをアニメーションさせる

1. TextDrawerを作成
インスタンス作成時に、Stringの文字列と、textSizeやtextColorが設定されたPaintをコンストラクタに設定。
Paintにtypefaceを設定すれば、フォントを変えれますし、フォントアイコンを描画させることも可能です。

2. DisplayObjectを生成し、FPSTextureView、FPSSurfaceView or ContainerにAddする。
withの後にTweenアニメーションをするならばtween()、放物線運動のアニメーションを行うならparabolic()を記述。
今回はTweenアニメーションなのでtween()。

<img src="https://raw.githubusercontent.com/MasayukiSuda/FPSAnimator/master/art/tweenTextDemo.gif" width="60%">

```
    Paint paint = new Paint();
    paint.setColor(ContextCompat.getColor(this, R.color.colorAccent));
    paint.setTextSize(Util.convertDpToPixel(16, this));

    String tweenTxt = "TweenText";
    float textWidth = paint.measureText(tweenTxt);

    TextDrawer textDrawer = new TextDrawer(tweenTxt, paint)
            .rotateRegistration(textWidth / 2, textWidth / 2);

    DisplayObject textDisplay = new DisplayObject();
    textDisplay.with(textDrawer)
            .tween()
            .tweenLoop(true)
            .transform(0, 800)
            .waitTime(300)
            .to(1000, windowWidth - textWidth, 800, 720f, Ease.SINE_OUT)
            .waitTime(300)
            .to(1000, 0, 800, 0f, Ease.SINE_IN)
            .end();

```


#Tweenのプロパティ

| 関数名 | 機能 |
|:---|:-----|
|tweenLoop(boolean) | trueの場合、トゥイーンアニメーションが繰り返される。 |
|transform(float x, float y) <br><br> transform(float x, float y, int alpha, float scaleX, float scaleY, float rotation)| アニメーションはせず、即座に引数の値に変化する。 |
|toX(long animDuration, float x)<br><br> toX(long animDuration, float x, Ease ease) | xの値のアニメーションをさせる。値の単位はpixel |
|toY(long animDuration, float y)<br><br> toY(long animDuration, float y, Ease ease) | yの値のアニメーションをさせる。値の単位はpixel |
|alpha(long animDuration, float alpha)<br><br>alpha(long animDuration, float alpha, Ease ease) | 透明度のアニメーションをさせる。ただし、Max値はint255である。1.0〜0の範囲内で指定したい場合、Util.convertAlphaIntToFloat(float)という関数が用意されています。 |
|scale(long animDuration, float scaleX, float scaleY)<br><br>scale(long animDuration, float scaleX, float scaleY, Ease ease) | scaleのアニメーションをさせる。拡大の中心座標を操作したい場合、各DrawerにscaleRegistration関数が搭載されているので、そこで座標を設定する。 |
|rotation(long animDuration, float rotation)<br><br>rotation(long animDuration, float rotation, Ease ease)| 回転のアニメーションをさせる。回転の中心座標を操作したい場合、各DrawerにrotateRegistration関数が搭載されているので、そこで座標を設定する。 |
|waitTime(long animDuration) | アニメーションせず、その時のプロパティで描画する。 |
|call(AnimCallBack callBack) | トゥイーンの開始時や終了時など、特定のタイミングでコールバック関数を実行したい場合に使用 |
|to(long animDuration, float x, float y) <br><br> to(long animDuration, float x, float y, Ease ease)       <br><br> to(long animDuration, float x, float y, int alpha) <br><br> to(long animDuration, float x, float y,  int alpha, Ease ease) <br><br> to(long animDuration, float x, float y, float scaleX, float scaleY) <br><br> to(long animDuration, float x, float y, float scaleX, float scaleY, Ease ease) <br><br> to(long animDuration, float x, float y, float rotation)<br><br> to(long animDuration, float x, float y,<br> float rotation, Ease ease)<br><br> to(long animDuration, float x, float y, int alpha, <br>float scaleX, float scaleY, float rotation, Ease ease)        | 現在の状態から引数のターゲットの状態まで、animDurationの時間でトゥイーンアニメーションする。 |


記述例

```
    DisplayObject bitmapDisplay = new DisplayObject();
    bitmapDisplay
            .with(new BitmapDrawer(bitmap))
            .tween()
            .tweenLoop(true)
            .transform(bitmapX, bitmapY)
            .toX(1600, UIUtil.getWindowWidth(this) - bitmap.getWidth(), Ease.BACK_IN_OUT)
            .waitTime(1000)
            .alpha(1000, 0f)
            .alpha(1000, 1f)
            .scale(500, -1f, 1f, Ease.CUBIC_IN)
            .scale(500, 1f, 1f, Ease.CUBIC_OUT)
            .call(new AnimCallBack() {
                @Override
                public void call() {
                    Snackbar.make(mFPSTextureView, "Animation finished!", Snackbar.LENGTH_LONG)
                            .setAction("Action", null).show();
                }
            })
            .end();


```

#Easing
easingは28種類もありますね。
<img src="https://raw.githubusercontent.com/MasayukiSuda/FPSAnimator/master/art/easingDemo.gif" width="60%">

ぜひ、libraryにgithubのStarをお願いします。
<a href="https://github.com/MasayukiSuda/FPSAnimator">FPSAnimator</a>