使用SVG實現的一個Android播放/暫停按鈕

時間 2019-12-05

標籤使用 svg 實現一個 android 播放暫停按鈕欄目 Android 简体版

原文原文鏈接

好久沒寫文章了，寫這篇文章的目的是騙幾個贊，結尾有說明。先上效果圖：php

很是簡單的一個按鈕，實現了從播放到暫停而且從暫停到播放的狀態。java

這個主要是依賴Android內置的vector、objectAnimator和animated-vector組合實現的動畫效果。android

1. Vector部分

vector主要功能室以svg語法的形式繪製靜態圖像。它的主要優點在於繪製簡單圖形時能夠矢量圖的形式展現，不會由於放大或縮小而失真。git

首先建立icon-play.xml,並填寫以下內容：github

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="48dp" android:height="48dp" android:viewportWidth="48" android:viewportHeight="48">
    <!--背景圓-->
    <path android:name="bg_circle" android:fillColor="#e91e63" android:pathData="M0,24 A24,24 0 1,1 48,24 A24,24 0 1,1, 0,24z" />
    <!--線-->
    <path android:name="line" android:fillColor="#ffffff" android:pathData="M15,33 L15,15 Q15,12 18,12 L18,12 Q21,12 21,15 L21,33 Q21,36 18,36 L18,36 Q15,36 15,33 M27,33 L27,15 Q27,12 30,12 L30,12 Q33,12 33,15 L33,33 Q33,36 30,36 L30,36 Q27,36 27,33 " />
</vector>
複製代碼

顯示效果以下：app

vector的畫布座標與view中的畫布座標一致，左上角是原點，向右是x正方向，向下是y正方向。vector節點下的width和height與經常使用xml佈局中的屬性是一致的，而viewportWidth和viewHeight是將畫布平分爲對應的份數，也就是將width平均分紅viewWidth份，從而能夠自由定製座標系的單位長度。socket

path節點下的一系列屬性都與paint類似，能夠設置顏色，strokeColor，strokeWidth,fillColor等。pathData便是svg的路徑。這裏分兩段繪製，其中圓角部分採用的一階貝塞爾曲線。svg

而後建立icon-puase.xml文件，並填寫內容以下：佈局

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="48dp" android:height="48dp" android:viewportWidth="48" android:viewportHeight="48">

    <!--背景圓-->
    <path android:name="bg_circle" android:fillColor="#e91e63" android:pathData="M0,24 A24,24 0 1,1 48,24 A24,24 0 1,1, 0,24z" />

    <path android:name="triangle" android:fillColor="#ffffff" android:pathData="M15,33 L15,15 Q15,11 18,12 L24,16 Q24,16 24,16 L24,32 Q24,32 24,32 L18,36 Q15,37 15,33 M24,32 L24,16 Q24,16 24,16 L33,22 Q35,23.3 35,24 L35,24 Q35,24.7 33,26 L24,32 Q24,32 24,32 " />
</vector>
複製代碼

這裏的形式與icon-play.xml一致，不一樣的地方在於pathData部分。效果以下：動畫

爲了要實現文章開頭的效果，最右側的圓角部分採用了一種曲折的方式實現，計算了方程的斜率來計算出貝塞爾曲線的控制點。

注意：先後兩個XML文件的pathData形式必定要一致，不然將會拋出異常

這樣就繪製好了開始和結束的狀態了。

2. objectAnimator部分

建立play_pause_anim.xml,實現從play狀態到pause狀態的過渡:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially">
    <objectAnimator android:duration="1000" android:propertyName="pathData" android:valueFrom="M15,33 L15,15 Q15,12 18,12 L18,12 Q21,12 21,15 L21,33 Q21,36 18,36 L18,36 Q15,36 15,33 M27,33 L27,15 Q27,12 30,12 L30,12 Q33,12 33,15 L33,33 Q33,36 30,36 L30,36 Q27,36 27,33" android:valueTo="M15,33 L15,15 Q15,11 18,12 L24,16 Q24,16 24,16 L24,32 Q24,32 24,32 L18,36 Q15,37 15,33 M24,32 L24,16 Q24,16 24,16 L33,22 Q35,23.3 35,24 L35,24 Q35,24.7 33,26 L24,32 Q24,32 24,32" android:valueType="pathType" />
</set>
複製代碼

android:propertyName設置爲pathData，android:valueType設置爲pathType，這樣valueFrom和valueTo就會按照svg路徑來運動。

而後建立pause_play_anim.xml,實現從pause到play狀態的轉換：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially">
    <objectAnimator android:duration="1000" android:propertyName="pathData" android:valueFrom="M15,33 L15,15 Q15,11 18,12 L24,16 Q24,16 24,16 L24,32 Q24,32 24,32 L18,36 Q15,37 15,33 M24,32 L24,16 Q24,16 24,16 L33,22 Q35,23.3 35,24 L35,24 Q35,24.7 33,26 L24,32 Q24,32 24,32" android:valueTo=" M27,33 L27,15 Q27,12 30,12 L30,12 Q33,12 33,15 L33,33 Q33,36 30,36 L30,36 Q27,36 27,33 M15,33 L15,15 Q15,12 18,12 L18,12 Q21,12 21,15 L21,33 Q21,36 18,36 L18,36 Q15,36 15,33 " android:valueType="pathType" />
</set>
複製代碼

3. animated-vector部分

這個是最終的粘合劑，將svg於objectAnimator結合起來。

建立icon_pause_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/icon_pause">
    <target android:name="triangle" android:animation="@animator/pause_play_anim" />
</animated-vector>
複製代碼

建立icon_play_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/icon_play">
    <target android:name="line" android:animation="@animator/play_pause_anim" />
</animated-vector>
複製代碼

而後咱們就能夠將動畫展現出來了。定義一個imageview：

<ImageView android:id="@+id/icon" android:layout_width="match_parent" android:layout_height="match_parent" android:onClick="start" app:srcCompat="@drawable/icon_play_anim" />
複製代碼

java代碼以下：

public void start(View view) {
    isChecked = !isChecked;
    imageView.setImageResource(isChecked ? R.drawable.icon_play_anim : R.drawable.icon_pause_anim);
    Drawable drawable = imageView.getDrawable();
    if (drawable instanceof Animatable) {
        ((Animatable) drawable).start();
    }
}
複製代碼

全部的都作好了。