1. MasayukiSuda

    Posted

    MasayukiSuda
Changes in title
+Android TextureView、SurfaceViewで簡単に放物線運動アニメーション 〜FPSAnimator〜
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,98 @@
+#放物線運動アニメーションの作成
+FPSAnimatorの基本的な使い方は<a href="http://qiita.com/MasayukiSuda/items/4e0eff096ae2e7183f3a">こちら</a>に記述しました。
+今回の記事では放物線運動アニメーションに関して詳しく書きます。
+
+##Textをアニメーションさせる
+
+1. TextDrawerを作成
+インスタンス作成時に、Stringの文字列と、textSizeやtextColorが設定されたPaintをコンストラクタに設定。
+Paintにtypefaceを設定すれば、フォントを変えれますし、フォントアイコンを描画させることも可能です。
+
+2. DisplayObjectを生成し、FPSTextureView、FPSSurfaceView or ContainerにAddする。
+withの後にTweenアニメーションをするならばtween()、放物線運動のアニメーションを行うならparabolic()を記述。
+今回は放物線運動なのでparabolic()。
+
+```
+ // ParabolicMotionText
+ Paint paint = new Paint();
+ paint.setColor(ContextCompat.getColor(context, R.color.colorPrimary));
+ paint.setTextSize(Util.convertDpToPixel(20, context));
+
+ TextDrawer textDrawer = new TextDrawer("Text", paint);
+
+ DisplayObject textDisplay = new DisplayObject();
+ textDisplay.with(textDrawer)
+ .parabolic()
+ .transform(800, 800) // 初期位置指定
+ .initialVelocityY(-40) // 初速度
+ .end();
+
+ mFPSTextureView.addChild(textDisplay);
+
+```
+
+
+##Bitmapをアニメーションさせる
+
+1. BitmapDrawerを作成
+インスタンス作成時に、Bitmap をコンストラクタに設定。
+
+2. DisplayObjectを生成し、FPSTextureView、FPSSurfaceView or ContainerにAddする。
+withの後にTweenアニメーションをするならばtween()、放物線運動のアニメーションを行うならparabolic()を記述。
+今回は放物線運動なのでparabolic()。
+
+```
+ final DisplayObject bitmapDisplay = new DisplayObject();
+ bitmapDisplay.with(new BitmapDrawer(mBitmap).dpSize(context))
+ .parabolic()
+ .transform(0, mFPSTextureView.getHeight())
+ .reboundBottom(false)
+ .accelerationX(8)
+ .initialVelocityY(-30)
+ .bottomHitCallback(new AnimCallBack() {
+ @Override
+ public void call() {
+ // canvasの底にヒットしたらremoveされる。
+ mFPSTextureView.removeChild(bitmapDisplay);
+ }
+ })
+ .end();
+
+ mFPSTextureView.addChild(bitmapDisplay);
+
+```
+
+<img src="https://raw.githubusercontent.com/MasayukiSuda/FPSAnimator/master/art/parabolicDemo.gif" width="60%">
+
+
+
+#Parabolicのプロパティ
+
+| 関数名 | 機能 |
+|:---|:-----|
+|transform(float x, float y) | 初期位置の指定 |
+|frequency(int) | FPSに対して、どれだけの頻度で表示場所を更新するかを入力できます。例えば、全体のFPSが30でfrequencyが2になっている場合、FPS15で放物線運動アニメーションが再生されます。 |
+|initialVelocityY(float velocityY) | 初速度の指定。0以下であれば上に動き、0以上であれば下に加速する。 |
+|accelerationY(float accelerationY) | Yの加速度の値。値の単位はpixel |
+|accelerationX(float accelerationX) | Xの加速度の値。値の単位はpixel |
+|coefficientRestitutionY(float coefficientRestitutionY) | 反発係数のY値。1以下であれば、跳ね返るたびに、跳ね返りが弱くなる。|
+|coefficientRestitutionX(float coefficientRestitutionX) | 反発係数のX値。1以下であれば、跳ね返るたびに、跳ね返りが弱くなる。 |
+|reboundBottom(boolean reboundBottom) | 跳ね返るかどうかの指定。falseであれば跳ね返らない。|
+|reboundLeft(boolean reboundLeft) | 跳ね返るかどうかの指定。falseであれば跳ね返らない。 |
+|reboundRight(boolean reboundRight) | 跳ね返るかどうかの指定。falseであれば跳ね返らない。 |
+|bottomBase(float bottomBase) | Y座標での、跳ね返りの位置指定。 |
+|rightSide(float rightSide) | X座標右側での、跳ね返りの位置指定。 |
+|leftSide(float leftSide) | X座標左側での、跳ね返りの位置指定。 |
+|bottomHitCallback(@NonNull AnimCallBack animCallBack) | 底にきた際にdispatchするcallbackの指定 |
+|leftHitCallback(@NonNull AnimCallBack animCallBack) | 左側の跳ね返りにきた際にdispatchするcallbackの指定 |
+|rightHitCallback(@NonNull AnimCallBack animCallBack) | 右側の跳ね返りにきた際にdispatchするcallbackの指定 |
+
+
+ぜひ、libraryにgithubのStarをお願いします。
+<a href="https://github.com/MasayukiSuda/FPSAnimator">FPSAnimator</a>
+
+
+
+
+
+