Android動態(tài)使用VectorDrawable過程詳解
接上篇繼續(xù),講解使用動態(tài)的VectorDrawable
上篇鏈接:
Android三種方式生成矢量圖之VectorDrawable類使用詳解
導言
VectorDrawable有兩個優(yōu)點,一個是縮放不失真,另一個是使PNG的體積,大幅度減小,那么如果僅僅只有這兩個優(yōu)點,其實我是并不需要使用VectorDrawable,或者說,這并不能成為我們使用VectorDrawable的重要原因。
那我們使用它的重要原因是什么呢?
那就是VectorDrawable可以使用動畫,使用掌握VectorDrawable使用動畫的動態(tài)技巧,才是核心之一?。?!
案例演示
既然是動態(tài)的VectorDrawable,那我們就需要有一個動畫的效果文件。
首先,我們創(chuàng)建一個屬性動畫的目錄 res --> 右鍵new --> Android Resource Directory --> 選擇animator–> 點擊OK 完成創(chuàng)建
接下來,我們在這目錄下,創(chuàng)建一個動畫文件。此次我們設置一個平移的動畫圖形
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:repeatMode="reverse" android:repeatCount="infinite" android:propertyName="translateX" android:valueFrom="0" android:valueTo="10" android:valueType="floatType"> </objectAnimator>
有了動畫文件,需要一個目標圖形,就是讓這個動畫效果作用于哪個圖片上。
我們選中drawable --> New --> Vector Asset 進行設置,由于此次是演示,所以,隨便選擇一張
我們要讓這個圖形,有左右移動的效果。
現(xiàn)在我們目標效果和動畫圖形都有了,那我們如何才能讓他們組合起來呢?
讓他們組合起來,我們需要使用一樣東西,配置動畫粘合劑——animated-vector
animated-vector連接了vector和animated,組成動畫
我們在drawable下新建arrow_anim.xml文件
<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_code_black_24dp"> <target android:animation="@animator/anim" android:name="arrow"/> </animated-vector>
drawable屬性代表連接的圖形vector,animation鏈接的是動畫
那里面的name屬性是什么意思呢?,讓我們去看靜態(tài)的VectorDrawable,在path標簽中,我們可以給圖形設置一個name屬性,比如說,我們可以給他命名arrow,這個name屬性,就代表了整個path。
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:name="arrow" android:fillColor="#FF000000" android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4zM14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/> </vector>
既然粘合劑寫好了,那我們讓他展示出我們的動畫效果?;氐轿覀兊腶ctivity_main.xml文件中,設置一個ImageView
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" app:srcCompat="@drawable/arrow_anim"/> </LinearLayout>
設置ImageView的點擊效果:
package com.zrc.vectordrawable import android.graphics.drawable.Animatable import android.graphics.drawable.Drawable import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) image.setOnClickListener{ val drawable:Drawable = image.drawable if (drawable is Animatable) { (drawable as Animatable).start() } } } }
運行之后點擊我們會發(fā)現(xiàn)并沒有效果,并報了一個Log
05-04 17:25:54.370 3180-3180/com.zrc.vectordrawable W/PropertyValuesHolder: Method setTranslateX() with type float not found on target class class androidx.vectordrawable.graphics.drawable.VectorDrawableCompat$VFullPath
問題解決
那這是什么原因哪?這就是我們使用動態(tài)的VectorDrawable,需要注意的第一個重要點。
首先我們打開圖像文件arrow.xml,通常情況下,我們只需要使用它的path標簽和pathData屬性,就可以描繪一個VectorDrawable,但是我們針對這個path標簽使用屬性動畫的時候,就需要注意了,有些屬性并不存在于path標簽中,那么我們就不能使用屬性動畫改變它的屬性。那我們該如何處理呢?
在VectorDrawable中,Android給我們提供了另外一個標簽,叫做group,我們使用他吧path標簽包裹起來
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group> <path android:name="arrow" android:fillColor="#FF000000" android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4zM14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/> </group> </vector>
那這group標簽有什么用呢?可以對path進行分組,那我們拆成兩個path標簽
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="left"> <path android:fillColor="#FF000000" android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4z"/> </group> <group android:name="right"> <path android:fillColor="#FF000000" android:pathData="M14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/> </group> </vector>
這樣,我們就把path標簽分成了兩個,并把name屬性,賦值到了group中。
相對應的,我們修改arrow_anim.xml文件:
<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_code_black_24dp"> <target android:animation="@animator/anim" android:name="left"/> </animated-vector>
之后運行程序:
這樣,我們就實現(xiàn)了左邊的動畫效果,我們如法炮制,讓右邊也動起來。
我們在animator文件夾中,添加anim_left.xml文件
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:repeatMode="reverse" android:repeatCount="infinite" android:propertyName="translateX" android:valueFrom="0" android:valueTo="-10" android:valueType="floatType"> </objectAnimator>
然后在arrow_anim中加入
<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_code_black_24dp"> <target android:animation="@animator/anim" android:name="left"/> <target android:animation="@animator/anim_right" android:name="right"/> </animated-vector>
運行即可,看效果
ok了,由于是屬性動畫,可以設置旋轉等多種效果。大家可以去隨意嘗試?。?!
到此這篇關于Android動態(tài)使用VectorDrawable過程詳解的文章就介紹到這了,更多相關Android VectorDrawable內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Android使用GridView實現(xiàn)日歷的簡單功能
這篇文章主要為大家詳細介紹了Android使用GridView實現(xiàn)日歷的簡單功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Android adb安裝apk時提示Invalid APK file的問題
這篇文章主要介紹了Android adb安裝apk時提示Invalid APK file的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08Android使用BottomNavigationBar實現(xiàn)導航欄功能
這篇文章主要介紹了Android使用BottomNavigationBar實現(xiàn)導航欄功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08androidstudio3.0使用butterknife報錯解決的解決方法
這篇文章主要介紹了androidstudio3.0使用butterknife報錯解決的解決方法,非常具有實用價值,需要的朋友可以參考下2018-01-01Android提高之SQLite分頁表格實現(xiàn)方法
這篇文章主要介紹了Android提高之SQLite分頁表格實現(xiàn)方法,在項目開發(fā)中有很高的實用價值,需要的朋友可以參考下2014-08-08Android EditText輸入框實現(xiàn)下拉且保存最近5個歷史記錄思路詳解
今天給大家介紹Android EditText輸入框實現(xiàn)下拉且保存最近5個歷史記錄功能,android實現(xiàn)文本框下拉利用sharedpreferences來保存每次app啟動和關閉時已經填寫的數值,具體代碼跟隨小編一起看看吧2021-07-07