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

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

Android Studio
2021.2.1

Animation

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

目次
1. Simple な Animation
2. Arcのアニメーション作成
3. サンプル動画

Simple な Animation

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

// アニメーションの起動期間を5秒に設定
testAnimation.setDuration(5000);

1 2	// アニメーションの起動期間を5秒に設定 testAnimation.setDuration(5000);

　
applyTransformationを使ってインターバルと位置を調整します。
　
MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private int yval = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TestView testView = new TestView(this);
        setContentView(testView);

        // 最終position
        int endPosition = 1000;
        TestAnimation testAnimation = new TestAnimation(testView, endPosition);
        // アニメーションの起動期間を設定
        testAnimation.setDuration(5000);
        testView.startAnimation(testAnimation);
    }

    public class TestView extends View {
        Paint paint = new Paint();

        public TestView(Context context) {
            super(context);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            paint.setColor(Color.argb(255, 125, 125, 125));
            // (left, top, right, bottom) 左上(400, 100)を起点に幅200の矩形
            canvas.drawRect(400, 100+yval, 600, 300+yval, paint);
        }

        public int getPosition() {
            return yval;
        }

        public void setPositon(int pos) {
            yval = pos;
        }
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.view.View;

public class MainActivity extends AppCompatActivity {

private int yval = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TestView testView = new TestView(this);

setContentView(testView);

// 最終position

int endPosition = 1000;

TestAnimation testAnimation = new TestAnimation(testView, endPosition);

// アニメーションの起動期間を設定

testAnimation.setDuration(5000);

testView.startAnimation(testAnimation);

}

public class TestView extends View {

Paint paint = new Paint();

public TestView(Context context) {

super(context);

}

@Override

protected void onDraw(Canvas canvas) {

paint.setColor(Color.argb(255, 125, 125, 125));

// (left, top, right, bottom) 左上(400, 100)を起点に幅200の矩形

canvas.drawRect(400, 100+yval, 600, 300+yval, paint);

}

public int getPosition() {

return yval;

}

public void setPositon(int pos) {

yval = pos;

}

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

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

//package your.package.name;

import android.view.animation.Animation;
import android.view.animation.Transformation;

public class TestAnimation extends Animation {

    private final int currentPosition;
    private final int endPosition;

    private final MainActivity.TestView testView;

    TestAnimation(MainActivity.TestView testView, int pos) {
        currentPosition = testView.getPosition();
        endPosition = pos;
        this.testView = testView;
    }

    @Override
    protected void applyTransformation(
            float interpolatedTime, Transformation transformation) {
        // interpolatedTime: 0.f -> 1.0f
        int pp = (int)((endPosition-currentPosition)*interpolatedTime);

        // 矩形のY軸位置をセット
        testView.setPositon(pp);
        testView.requestLayout();
    }
}

//package your.package.name;

import android.view.animation.Animation;

import android.view.animation.Transformation;

public class TestAnimation extends Animation {

private final int currentPosition;

private final int endPosition;

private final MainActivity.TestView testView;

TestAnimation(MainActivity.TestView testView, int pos) {

currentPosition = testView.getPosition();

endPosition = pos;

this.testView = testView;

}

@Override

protected void applyTransformation(

float interpolatedTime, Transformation transformation) {

// interpolatedTime: 0.f -> 1.0f

int pp = (int)((endPosition-currentPosition)*interpolatedTime);

// 矩形のY軸位置をセット

testView.setPositon(pp);

testView.requestLayout();

}

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

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

Arc のアニメーション作成

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

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

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint);

1	drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint);

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

//package com.example.testcanvasanimation;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class Arc extends View{

    private final Paint paint;
    private final RectF rect;

    // Animation 開始地点をセット
    private static final int AngleTarget = 270;
    // 初期 Angle
    private float angle = 10;

    public Arc(Context context, AttributeSet attrs) {
        super(context, attrs);

        // Arcの幅
        int strokeWidth = 60;
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        // Arcの色
        paint.setColor(Color.argb(255, 0, 0, 255));
        // Arcの範囲
        rect = new RectF();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 背景、半透明
        canvas.drawColor(Color.argb(64, 0, 0, 255));

        // Canvas 中心点
        float x = (float)getWidth()/2;
        float y = (float)getHeight()/2;
        // 半径
        float radius = (float)getWidth()/4;

        // 円弧の領域設定
        rect.set(x - radius, y - radius, x + radius, y + radius);

        // 円弧の描画
        canvas.drawArc(rect, AngleTarget, angle, false, paint);
    }

    // AnimationAへ現在のangleを返す
    public float getAngle() {
        return angle;
    }

    // AnimationAから新しいangleが設定される
    public void setAngle(float angle) {
        this.angle = angle;
    }
}

//package com.example.testcanvasanimation;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.view.View;

public class Arc extends View{

private final Paint paint;

private final RectF rect;

// Animation 開始地点をセット

private static final int AngleTarget = 270;

// 初期 Angle

private float angle = 10;

public Arc(Context context, AttributeSet attrs) {

super(context, attrs);

// Arcの幅

int strokeWidth = 60;

paint = new Paint();

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.STROKE);

paint.setStrokeWidth(strokeWidth);

// Arcの色

paint.setColor(Color.argb(255, 0, 0, 255));

// Arcの範囲

rect = new RectF();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 背景、半透明

canvas.drawColor(Color.argb(64, 0, 0, 255));

// Canvas 中心点

float x = (float)getWidth()/2;

float y = (float)getHeight()/2;

// 半径

float radius = (float)getWidth()/4;

// 円弧の領域設定

rect.set(x - radius, y - radius, x + radius, y + radius);

// 円弧の描画

canvas.drawArc(rect, AngleTarget, angle, false, paint);

}

// AnimationAへ現在のangleを返す

public float getAngle() {

return angle;

}

// AnimationAから新しいangleが設定される

public void setAngle(float angle) {

this.angle = angle;

}

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

//package com.example.testcanvasanimation;

import android.view.animation.Animation;
import android.view.animation.Transformation;

public class AnimationArc extends Animation {

    private final Arc arc;

    // アニメーション角度
    private final float oldAngle;
    private final float newAngle;

    AnimationArc(Arc arc, int newAngle) {
        this.oldAngle = arc.getAngle();
        this.newAngle = newAngle;
        this.arc = arc;
    }

    @Override
    protected void applyTransformation(
            float interpolatedTime, Transformation transformation) {
        float angle = oldAngle + ((newAngle - oldAngle) * interpolatedTime);

        arc.setAngle(angle);
        arc.requestLayout();
    }
}

//package com.example.testcanvasanimation;

import android.view.animation.Animation;

import android.view.animation.Transformation;

public class AnimationArc extends Animation {

private final Arc arc;

// アニメーション角度

private final float oldAngle;

private final float newAngle;

AnimationArc(Arc arc, int newAngle) {

this.oldAngle = arc.getAngle();

this.newAngle = newAngle;

this.arc = arc;

}

@Override

protected void applyTransformation(

float interpolatedTime, Transformation transformation) {

float angle = oldAngle + ((newAngle - oldAngle) * interpolatedTime);

arc.setAngle(angle);

arc.requestLayout();

}

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

//package com.example.testcanvasanimation;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Arc arc;
    private int endAngle = 0;
    private final int animationPeriod = 2000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 88%に角度を合わせる
        endAngle = 88*360/100;

        arc = findViewById(R.id.arc);

        Button buttonStart = findViewById(R.id.button_start);
        buttonStart.setOnClickListener(v -> {
            AnimationArc animation = new AnimationArc(arc, endAngle);
            // アニメーションの起動期間を設定
            animation.setDuration(animationPeriod);
            arc.startAnimation(animation);

        });

        Button buttonReset = findViewById(R.id.button_reset);
        buttonReset.setOnClickListener(v -> {
            AnimationArc animation = new AnimationArc(arc, 0);
            animation.setDuration(0);
            arc.startAnimation(animation);
        });
    }
}

//package com.example.testcanvasanimation;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.Button;

public class MainActivity extends AppCompatActivity {

private Arc arc;

private int endAngle = 0;

private final int animationPeriod = 2000;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 88%に角度を合わせる

endAngle = 88*360/100;

arc = findViewById(R.id.arc);

Button buttonStart = findViewById(R.id.button_start);

buttonStart.setOnClickListener(v -> {

AnimationArc animation = new AnimationArc(arc, endAngle);

// アニメーションの起動期間を設定

animation.setDuration(animationPeriod);

arc.startAnimation(animation);

});

Button buttonReset = findViewById(R.id.button_reset);

buttonReset.setOnClickListener(v -> {

AnimationArc animation = new AnimationArc(arc, 0);

animation.setDuration(0);

arc.startAnimation(animation);

});

}

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:src="@drawable/sample_image"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/description"/>

    <com.example.testcanvasanimation.Arc
        android:id="@+id/arc"
        android:layout_marginTop="220dp"
        android:layout_marginStart="30dp"
        android:layout_width="170dp"
        android:layout_height="170dp" />

    <Button
        android:id="@+id/button_start"
        android:text="@string/start"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="10dp"
        android:layout_marginStart="20dp"
        android:layout_width="150dp"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button_reset"
        android:text="@string/reset"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="20dp"
        android:layout_width="150dp"
        android:layout_height="wrap_content" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ImageView

android:src="@drawable/sample_image"

android:scaleType="centerCrop"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:contentDescription="@string/description"/>

<com.example.testcanvasanimation.Arc

android:id="@+id/arc"

android:layout_marginTop="220dp"

android:layout_marginStart="30dp"

android:layout_width="170dp"

android:layout_height="170dp" />

<Button

android:id="@+id/button_start"

android:text="@string/start"

android:layout_alignParentBottom="true"

android:layout_alignParentStart="true"

android:layout_marginBottom="10dp"

android:layout_marginStart="20dp"

android:layout_width="150dp"

android:layout_height="wrap_content" />

<Button

android:id="@+id/button_reset"

android:text="@string/reset"

android:layout_alignParentBottom="true"

android:layout_alignParentEnd="true"

android:layout_marginBottom="10dp"

android:layout_marginEnd="20dp"

android:layout_width="150dp"

android:layout_height="wrap_content" />

</RelativeLayout>

　
リソース
strings.xml

<resources>
    <string name="app_name">TestCanvasAnimation</string>
    <string name="description">a sample image</string>
    <string name="start">Start</string>
    <string name="reset">Reset</string>
</resources>

<string name="app_name">TestCanvasAnimation</string>

<string name="description">a sample image</string>

<string name="start">Start</string>

<string name="reset">Reset</string>

</resources>

サンプル動画

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

android:scaleType="centerCrop"

1	android:scaleType="centerCrop"