iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
2
Software Development

Android animation 30天上手系列 第 21

Day21 VectorDrawable Animation Morphs

  • 分享至 

  • xImage
  •  

上一篇講完畫向量圖VectorDrawable後,接來讓他動起來吧

demo

path_morph.xml 將路徑從一個形狀變形到另一個形狀。

要達到這樣的動畫效果,我們要先繪出2個矩形,再將第1個矩形轉變為第2個矩形。

第1個矩形:rect.xml
https://ithelp.ithome.com.tw/upload/images/20181104/201118966uZnEHcXCe.png

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="240dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="iconPath"
        android:fillColor="#274fe1"
        android:pathData="M8,5 V19 H16 V5" />
</vector>

第2個矩形:rect2.xml
https://ithelp.ithome.com.tw/upload/images/20181104/20111896kuAZZWe0a8.png

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="240dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="iconPath"
        android:fillColor="#274fe1"
        android:pathData="M5,8 V16 H19 V8" />
</vector>

anim_rect.xml 設定動畫:矩形的變化

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="pathData"
    android:valueFrom="M8,5 V19 H16 V5"
    android:valueTo="M5,8 V16 H19 V8"
    android:valueType="pathType" />

valueFrom、valueTo的每個命令必須具有相同數量的參數,這是為了讓動畫知道2個圖形的哪個點要對到哪個點。
下圖的數字標示即是2個圖的valueFrom、ValueTo對映。即會依照2個矩形對映的點來產生動畫。

rect

新增一個animated-vector drawable,設定動畫為@animator/anim_rect
animated-vector.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/rect">
    <target
        android:animation="@animator/anim_rect"
        android:name="iconPath"/>
</animated-vector>

這樣就完成動畫啦

除了變形狀,再加上顏色變化看看

animated_color

anim_rect.xml加上顏色變化的動畫

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:duration="600"
        android:interpolator="@android:interpolator/linear"
        android:propertyName="pathData"
        android:valueFrom="@string/rect_path"
        android:valueTo="@string/rect2_path"
        android:valueType="pathType" />
    <!--顏色變化-->
    <objectAnimator
        android:duration="600"
        android:propertyName="fillColor"
        android:valueFrom="#274fe1"
        android:valueTo="#333333"
        android:valueType="colorType" />
</set>

再看一個例子:三角形變矩形

triangle

三角形
一開始我們只用3個點來繪圖,這裡為了讓三角形轉為矩形,2個drawable的pathData必須有相同數量的參數。所以我們把三角形與正方式都調整5個點。開始動畫時,就會依每個對所在的位置產生動畫。

triangle

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:duration="600"
        android:interpolator="@android:interpolator/linear"
        android:propertyName="pathData"
        android:valueFrom="M8,5 V19 L16,19 L16,12 L16,5"
        android:valueTo="M8,5 V19 L13.5,15.5 L19,12 L13.5,8.5"
        android:valueType="pathType" />
</set>

完整程式:矩形變矩形動畫
https://github.com/evanchen76/VectorDrawableSample

完整程式:三角形變矩形動畫
https://github.com/evanchen76/VectorDrawableAnimation


上一篇
Day20 VectorDrawable 向量圖
下一篇
Day22 VectorDrawable Animation TrimPath
系列文
Android animation 30天上手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言