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

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

Android Studio 3.0.1
Android 8.0

 



Animation

 
ButtonやImageViewをアニメーションさせるにはProperty Animationandroid.view.animationを使うと簡単ですが、込み入ったアニメーション(円弧のアニメとか)は難しいところがあります。
 
Aimationクラスを継承してCanvasで描画する方法はある程度複雑な動きもカスタムで作りだせます。
 

 

Simple な Animation

 
簡単なAnimationを継承したクラスを使ってみます。
Canvasにある矩形(画像)が落下するアニメーションを考えてみます。
 
矩形は (left, top, right, bottom)で位置決めしますので、このY軸に相当するtop, bottomの位置を変化させて、矩形が下に落ちていくアニメーションにすればいいわけです。
 
アニメーションを実現させるためにタイマーを使う方法もありますが、Animation classにはsetDurationで時間を設定するメソッドがあります。
 

 
applyTransformationを使ってインターバルと位置を調整します。
 
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

 
リソース
strings.xml

 

サンプル動画

 

 
ボタンでアニメーションが起動します
 
画像は端末のサイズとぴったり合わないのでcenterCropで余分な分は切り捨てます

 

android-canvas android-canvas android-canvas canvas-image-text canvas_animation

 
References:
Canvas | Android Developers
Canvas and Drawables | Android Developers

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加


 


ページのトップへ戻る




シェアする

  • このエントリーをはてなブックマークに追加

フォローする