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-09
Android實(shí)現(xiàn)系統(tǒng)狀態(tài)欄的隱藏和顯示功能
這篇文章主要介紹了Android實(shí)現(xiàn)系統(tǒng)狀態(tài)欄的隱藏和顯示功能,文中還給大家?guī)硭姆N方法,大家可以根據(jù)自己需要參考下2018-07-07
Android實(shí)現(xiàn)右邊抽屜Drawerlayout效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)右邊抽屜Drawerlayout效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
Android 使用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-03
Android控件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

