Android高級動畫篇之SVG矢量動畫范例
效果視頻
目錄結(jié)構(gòu)
SVG常用指令
L :為從當(dāng)前點繪制到直線給定的點,后面跟著的為x,y坐標(biāo)
M :為將畫筆移動到某一點,但只是移動畫筆,并沒有繪制過程,所有沒有產(chǎn)生繪制動作
A :為繪制一段弧線,允許弧線不閉合
初始化狀態(tài)
效果圖
制作靜態(tài)SVG圖型
首先在drawablw目錄中建立一個svg_pic.xml文件夾
分別給兩條直線名為Path1和Path2
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" android:height="200dp" android:viewportHeight="100" android:viewportWidth="100"> <group> <path android:name="path1" android:pathData=" M 20,80 L 50,80 80,80" android:strokeColor="#cc0099" android:strokeLineCap="round" android:strokeWidth="5"/> <path android:name="path2" android:pathData=" M 20,20 L 50,20 80,20" android:strokeColor="#cc0099" android:strokeLineCap="round" android:strokeWidth="5"/> </group> </vector>
動畫變換
在res目錄下建立一個anim文件,在anim文件建立兩個動畫變化文件,分別為cross_anim1.xml和cross_anim2.xml
其中的valueFrom與valueTo屬性分別對應(yīng)了變換的起始坐標(biāo)
cross_anim1.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially"> <objectAnimator android:duration="500" android:propertyName="pathData" android:valueFrom="M 20,80 L 50,80 80,80" android:valueTo="M 20,80 L 50,50 80,80" android:valueType="pathType" android:interpolator="@android:anim/bounce_interpolator"> </objectAnimator> </set>
cross_anim2.xml
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially"> <objectAnimator android:duration="500" android:interpolator="@android:anim/bounce_interpolator" android:propertyName="pathData" android:valueFrom=" M 20,20 L 50,20 80,20" android:valueTo=" M 20,20 L 50,50 80,20" android:valueType="pathType"/> </set>
動畫黏合
最好通過animated-vector進(jìn)行粘合,在drawable目錄下創(chuàng)建link_anim.xml文件
drawable綁定svg靜態(tài)圖型的初始狀態(tài)
target將兩條直線的樣式與變換進(jìn)行綁定
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/svg_pic"> <target android:name="path1" android:animation="@anim/cross_anim1"/> <target android:name="path2" android:animation="@anim/cross_anim2"/> </animated-vector>
引用
<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:layout_gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@drawable/link_anim" android:onClick="anim"/> </LinearLayout>
public void anim(View view) { ImageView imageView = (ImageView)view; Drawable drawable = imageView.getDrawable(); if (drawable instanceof Animatable){ ((Animatable)drawable).start(); } }
解決低版本異常問題
在build.gradle文件的defaultConfig中添加如下語句
vectorDrawables.useSupportLibrary = true
到此這篇關(guān)于Android高級動畫篇之SVG矢量動畫范例的文章就介紹到這了,更多相關(guān)Android 矢量動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于Android Studio封裝SDK的那些事兒
這篇文章主要給大家介紹了關(guān)于Android Studio封裝SDK的那些事兒,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09Android實現(xiàn)系統(tǒng)狀態(tài)欄的隱藏和顯示功能
這篇文章主要介紹了Android實現(xiàn)系統(tǒng)狀態(tài)欄的隱藏和顯示功能,文中還給大家?guī)硭姆N方法,大家可以根據(jù)自己需要參考下2018-07-07Android實現(xiàn)右邊抽屜Drawerlayout效果
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)右邊抽屜Drawerlayout效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11詳細(xì)分析android的MessageQueue.IdleHandler
這篇文章主要介紹了android的MessageQueue.IdleHandler用法,很有參考價值,歡迎大家在下方留言區(qū)討論。2017-11-11