Android svg動畫-線圖動畫

??在Android 5.X中,Google大量引入線圖動畫。當頁面發生改變時,頁面上的icon不再是生硬的切換,而是通過非常生動的動畫效果,轉換成另一種形態。



??要實現如圖的的效果,首先要創建一個靜態的svg圖形,即靜態的VectorDrawable。

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

    >
    <group
        android:name="test"
        >
        <path android:strokeColor="@android:color/holo_purple"
            android:strokeWidth="2"
            android:pathData="
                              M 20, 80
                              L 50, 80 80, 80"
            android:name="path1"
            />
        <path android:strokeColor="@android:color/holo_blue_bright"
            android:strokeWidth="2"
            android:pathData="
                              M 20, 20
                              L 50, 20 80, 20"
            android:name="path2"
            />
    </group>

</vector>

??path1與和path2分別繪制了兩條直線,每條直線有三個點來控制,即起點、中點和終點,形成了初始狀態。
??接下來實現path1的變換的objectAnimator動畫。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1000"
        android:propertyName="pathData"
        android:valueFrom="
                          M 20, 80
                          L 50, 80 80, 80"
        android:valueTo="M 20, 80
                         L 50, 50 80, 20"
        android:valueType="pathType"
        android:interpolator="@android:anim/bounce_interpolator"
        />
</set>

??path2的動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1000"
        android:propertyName="pathData"
        android:valueFrom="
                          M 20, 20
                          L 50, 80 80, 80"
        android:valueTo="M 20, 20
                         L 50, 50 80, 80"
        android:valueType="pathType"
        android:interpolator="@android:anim/bounce_interpolator"
        />
</set>

??這里需要注意的是:在svg的路徑變換屬性動畫中,變換前后的節點數必須相同,這也是為什么前面需要使用三個點來繪制一條直線的原因,因為要使用中點來進行動畫變換。
??有了VectorDrawable和ObjectAnimator,剩下的只需要使用AnimatedVectorDrawable來將它們粘合在一起。

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/demo"
    >
    <target
        android:animation="@animator/anim_path1"
        android:name="path1"/>
    <target
        android:animation="@animator/anim_path2"
        android:name="path2"/>
</animated-vector>

??最后在代碼中啟動動畫即可

mImageView = (ImageView) findViewById(R.id.id_imageView);
((Animatable)mImageView.getDrawable()).start();
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容