[Android] Canvas Animation で円弧を動かす

Android7

円弧を動かして、バッテリーが50%とか、ターゲットの90%などの表現をしたい場合には静止画ではなくアニメーションを付けてみたくなります。ImageViewを使ったパラパラ漫画的なアニメーションがありますが、Canvasではもっとスムーズなアニメーションを作れます。
 
ボタンを押すと88%まで回転する例です
 

Android Studio 2.2.2
Android 7.1.1

 



Animation

 
シンプルにanimationを継承したクラスを使ってみます。

Canvasに矩形を描画します。
矩形は (left, top, right, bottom)で位置決めしますので、このY軸に相当するtop, bottomを変化させて
矩形が下に落ちていくアニメーションにしてみましょう。

MainActivity.java

 
最終到達位置を引数endPositionとして入れます
testAnimation = new TestAnimation(testView, endPosition);
アニメーションの起動期間を設定しています
testAnimation.setDuration(5000);
アニメーションの開始です
testView.startAnimation(testAnimation);

Animationを継承したクラスを作成します。
TestAnimation.java

 
矩形が落下するアニメーションができました。
 

 
applyTransformation(float interpolatedTime…
このinterpolatedTimeが0から1.0まで設定した時間で増加していきますので
そのプログレスに応じたY軸の位置を設定することになります
 
また、これと同じことをTimerTaskとHandlerを使ったアニメーションをこちらで試しています。
 

Arcのアニメーション作成

 
次は円弧が段々増加するアニメーションです。

View を継承した Canvas クラスを作成し、アニメーションさせる円弧を設定します。別にアニメーションさせるためにAnimationを継承したAnimationArcクラスを作成。

ここではpackage 名は「com.example.testcircleanimation」です
Arc.java

 
Animation を継承したクラスを作ります。ここでアニメーションの開始、終了、描画する対称を規定しています。
 
AnimationArc.java

 
MainActivity でアニメーションに期間などの情報を入れボタンで起動するようにします
 
MainActivity.java

 
レイアウトにカスタムCanvasを挿入して表示させます
activity_main.xml

 
ボタンでアニメーションが起動します

画像は端末のサイズとぴったり合わないのでcenterCropで余分な分は切り捨てます

 

cnvas1_1 cnvas2_1b cnvas3_1 canvasImage01 circle_animation02