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

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

Android Studio 2.1.1
Android 6.0

 

sponsored link

Arcの作成

 
 
View を継承した Canvas クラスを作成し、アニメーションさせる円弧を設定します。別にアニメーションさせるための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