Android高級動(dòng)畫篇之SVG矢量動(dòng)畫范例
效果視頻
目錄結(jié)構(gòu)
SVG常用指令
L :為從當(dāng)前點(diǎn)繪制到直線給定的點(diǎn),后面跟著的為x,y坐標(biāo)
M :為將畫筆移動(dòng)到某一點(diǎn),但只是移動(dòng)畫筆,并沒有繪制過程,所有沒有產(chǎn)生繪制動(dòng)作
A :為繪制一段弧線,允許弧線不閉合
初始化狀態(tài)
效果圖
制作靜態(tài)SVG圖型
首先在drawablw目錄中建立一個(gè)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>
動(dòng)畫變換
在res目錄下建立一個(gè)anim文件,在anim文件建立兩個(gè)動(dòng)畫變化文件,分別為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>
動(dòng)畫黏合
最好通過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高級動(dòng)畫篇之SVG矢量動(dòng)畫范例的文章就介紹到這了,更多相關(guān)Android 矢量動(dòng)畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Android 矢量室內(nèi)地圖開發(fā)實(shí)例
- Android中Activity過渡動(dòng)畫的實(shí)例講解
- Android activity動(dòng)畫不生效原因及解決方案總結(jié)
- Android 幀動(dòng)畫使用詳情
- Android動(dòng)畫之TranslateAnimation用法案例詳解
- Android實(shí)現(xiàn)簡單點(diǎn)贊動(dòng)畫
- Android如何實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫效果(卡片翻轉(zhuǎn))
- Android實(shí)現(xiàn)雅虎新聞?wù)虞d視差動(dòng)畫效果
- Android實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫的兩種方式案例詳解
相關(guān)文章
關(guān)于Android Studio封裝SDK的那些事兒
這篇文章主要給大家介紹了關(guān)于Android Studio封裝SDK的那些事兒,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09Android實(shí)現(xiàn)系統(tǒng)狀態(tài)欄的隱藏和顯示功能
這篇文章主要介紹了Android實(shí)現(xiàn)系統(tǒng)狀態(tài)欄的隱藏和顯示功能,文中還給大家?guī)硭姆N方法,大家可以根據(jù)自己需要參考下2018-07-07Android實(shí)現(xiàn)右邊抽屜Drawerlayout效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)右邊抽屜Drawerlayout效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Android View進(jìn)行手勢識(shí)別詳解
本文主要介紹 Android View進(jìn)行手勢識(shí)別,這里整理了相關(guān)資料和簡單示例,有興趣的小伙伴可以參考下2016-08-08Android 使用Zbar實(shí)現(xiàn)掃一掃功能
這篇文章主要介紹了Android 使用Zbar實(shí)現(xiàn)掃一掃功能,本文用的是Zbar實(shí)現(xiàn)掃一掃,因?yàn)楦鶕?jù)本人對兩個(gè)庫的使用比較,發(fā)現(xiàn)Zbar解碼比Zxing速度要快,實(shí)現(xiàn)方式也簡單,需要的朋友可以參考下2023-03-03Android控件CardView實(shí)現(xiàn)卡片效果
這篇文章主要為大家詳細(xì)介紹了Android控件CardView實(shí)現(xiàn)卡片效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02詳細(xì)分析android的MessageQueue.IdleHandler
這篇文章主要介紹了android的MessageQueue.IdleHandler用法,很有參考價(jià)值,歡迎大家在下方留言區(qū)討論。2017-11-11