Android中利用矢量影片制作支付寶支付成功樣式

之前我們學習了矢量影片，今天就利用適量影片制作一個支付寶支付成功后打鉤的影片，其實這個影片簡單描述如下：首先它會畫一個圈，接著在圈內打個對勾，這個效果在很多地方都可以使用，比如提交成功，壓縮成功等一系列耗時操作之后顯示，好了，廢話不多說，還是老規矩，一步一步跟著來，

1.分析

這個影片包含了兩部分，一部分是畫圈影片，另一部分是打鉤影片，畫圈影片結束后才開始打鉤影片，所以他們是有順序的，

2.畫圈影片

animated_pay_circle.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_pay_circle_white">

    <target
        android:name="circle"
        android:animation="@animator/anim_pay" />

</animated-vector>

anim_pay.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="trimPathEnd"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType" /><!--trimPathStart就是利用0到1的百分比來按照軌跡繪制SVG影像，類似的，還有trimPathEnd這個屬性，-->

vector_pay_circle_white.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100"
    android:width="100dp">

    <path
        android:name="circle"
        android:pathData="
            M 10,50
            A 40 40 0 1 0 10 49"
        android:strokeAlpha="1"
        android:strokeColor="@android:color/holo_blue_dark"
        android:strokeLineCap="round"
        android:strokeWidth="5" />

</vector>

布局檔案中activity_main.xml

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

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/iv"
        android:layout_centerInParent="true"/>

</RelativeLayout>

Activity中MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ImageView iv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = findViewById(R.id.iv);
        startVectorAnim(R.drawable.animated_pay_circle);
        //準備后續影片的開始

    }

    // 開始播放矢量影片
    private void startVectorAnim(int drawableId) {
        // 從指定資源編號的矢量檔案中獲取圖形物件
        Drawable mDrawable = getResources().getDrawable(drawableId);
        int dip_50 = dip2px(this, 50);
        iv.setImageDrawable(mDrawable);
        // 將該圖形強制轉換為影片圖形，并開始播放
        ((Animatable) mDrawable).start();
    }

    private int dip2px(Context context, float dpValue) {
        // 獲取當前手機的像素密度
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f); // 四舍五入取整
    }
}

到這里我們就可以先運行一下了，可以看到有一個畫圈的影片已經完成，

2.判斷畫圈結束

接著我們就要判斷畫圈影片結束，為打鉤影片做準備，細心的同學已經看到Activity中我已經留了注釋，所以我們修改Activity如下：

public class MainActivity extends AppCompatActivity {

    private ImageView iv;
    private Drawable mDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = findViewById(R.id.iv);
        startVectorAnim(R.drawable.animated_pay_circle);
        //準備后續影片的開始
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            // 為畫圈影片注冊一個矢量影片圖形的監聽器
            ((AnimatedVectorDrawable) mDrawable)
                    .registerAnimationCallback(new VectorAnimListener());
        } else {
            // 延遲1秒后啟動打勾影片的播放任務
            new Handler().postDelayed(mHookRunnable, 1000);
        }
    }

    // 開始播放矢量影片
    private void startVectorAnim(int drawableId) {
        // 從指定資源編號的矢量檔案中獲取圖形物件
        mDrawable = getResources().getDrawable(drawableId);
        int dip_50 = dip2px(this, 50);
        iv.setImageDrawable(mDrawable);
        // 將該圖形強制轉換為影片圖形，并開始播放
        ((Animatable) mDrawable).start();
    }

    private int dip2px(Context context, float dpValue) {
        // 獲取當前手機的像素密度
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f); // 四舍五入取整
    }

    // 定義一個影片圖形的監聽器
    @TargetApi(Build.VERSION_CODES.M)
    private class VectorAnimListener extends Animatable2.AnimationCallback {
        // 在影片圖形開始播放時觸發
        public void onAnimationStart(Drawable drawable) {}

        // 在影片圖形結束播放時觸發
        public void onAnimationEnd(Drawable drawable) {
            // 開始播放打勾的矢量影片
//            startVectorAnim(R.drawable.animated_pay_success);
        }
    }

    // 定義一個打勾影片的播放任務
    private Runnable mHookRunnable = new Runnable() {
        @Override
        public void run() {
            // 開始播放打勾的矢量影片
//            startVectorAnim(R.drawable.animated_pay_success);
        }
    };
}

3.完成打鉤影片

我們既然確定了畫圈影片結束的時刻，就可以開始打鉤了，

animated_pay_success.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_pay_success_white">

    <target
        android:name="hook"
        android:animation="@animator/anim_pay" />

</animated-vector>

vector_pay_success_white.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100"
    android:width="100dp">

    <path
        android:name="circle"
        android:pathData="
            M 10,50
            A 40 40 0 1 0 10 49"
        android:strokeAlpha="1"
        android:strokeColor="@android:color/holo_blue_dark"
        android:strokeLineCap="round"
        android:strokeWidth="5" />
    <path
        android:name="hook"
        android:pathData="
            M 30,50
            L 45 65
            L 75 35"
        android:strokeAlpha="1"
        android:strokeColor="@android:color/holo_blue_dark"
        android:strokeLineCap="butt"
        android:strokeWidth="5" />

</vector>

修改我們的Activity代碼如下

public class MainActivity extends AppCompatActivity {

    private ImageView iv;
    private Drawable mDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = findViewById(R.id.iv);
        startVectorAnim(R.drawable.animated_pay_circle);
        //準備后續影片的開始
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            // 為畫圈影片注冊一個矢量影片圖形的監聽器
            ((AnimatedVectorDrawable) mDrawable)
                    .registerAnimationCallback(new VectorAnimListener());
        } else {
            // 延遲1秒后啟動打勾影片的播放任務
            new Handler().postDelayed(mHookRunnable, 1000);
        }
    }

    // 開始播放矢量影片
    private void startVectorAnim(int drawableId) {
        // 從指定資源編號的矢量檔案中獲取圖形物件
        mDrawable = getResources().getDrawable(drawableId);
        int dip_50 = dip2px(this, 50);
        iv.setImageDrawable(mDrawable);
        // 將該圖形強制轉換為影片圖形，并開始播放
        ((Animatable) mDrawable).start();
    }

    private int dip2px(Context context, float dpValue) {
        // 獲取當前手機的像素密度
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f); // 四舍五入取整
    }

    // 定義一個影片圖形的監聽器
    @TargetApi(Build.VERSION_CODES.M)
    private class VectorAnimListener extends Animatable2.AnimationCallback {
        // 在影片圖形開始播放時觸發
        public void onAnimationStart(Drawable drawable) {}

        // 在影片圖形結束播放時觸發
        public void onAnimationEnd(Drawable drawable) {
            // 開始播放打勾的矢量影片
            startVectorAnim(R.drawable.animated_pay_success);
        }
    }

    // 定義一個打勾影片的播放任務
    private Runnable mHookRunnable = new Runnable() {
        @Override
        public void run() {
            // 開始播放打勾的矢量影片
            startVectorAnim(R.drawable.animated_pay_success);
        }
    };
}

這樣我們就完成了一個打鉤的適量影片，