Android高級動畫篇之SVG矢量動畫范例
更新時間：2021年11月11日 15:02:26 作者：FranzLiszt1847
矢量動畫即是在計(jì)算機(jī)中使用數(shù)學(xué)方程來描述屏幕上復(fù)雜的曲線，利用圖形的抽象運(yùn)動特征來記錄變化的畫面信息的動畫，本篇帶你了解在Android中的矢量動畫
效果視頻
目錄結(jié)構(gòu)
SVG常用指令
L ：為從當(dāng)前點(diǎn)繪制到直線給定的點(diǎn)，后面跟著的為x,y坐標(biāo)
M ：為將畫筆移動到某一點(diǎn)，但只是移動畫筆，并沒有繪制過程，所有沒有產(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)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Android 矢量室內(nèi)地圖開發(fā)實(shí)例
- Android中Activity過渡動畫的實(shí)例講解
- Android activity動畫不生效原因及解決方案總結(jié)
- Android 幀動畫使用詳情
- Android動畫之TranslateAnimation用法案例詳解
- Android實(shí)現(xiàn)簡單點(diǎn)贊動畫
- Android如何實(shí)現(xiàn)翻轉(zhuǎn)動畫效果（卡片翻轉(zhuǎn)）
- Android實(shí)現(xiàn)雅虎新聞?wù)虞d視差動畫效果
- Android實(shí)現(xiàn)旋轉(zhuǎn)動畫的兩種方式案例詳解
相關(guān)文章
Android實(shí)現(xiàn)城市選擇三級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)城市選擇三級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Android實(shí)現(xiàn)讀取NFC卡卡號示例
本篇文章主要介紹了Android實(shí)現(xiàn)讀取NFC卡卡號示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了Android手機(jī)鬧鐘用法,以實(shí)例形式較為詳細(xì)的分析了Android實(shí)現(xiàn)鬧鐘功能的頁面布局及具體功能相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Android應(yīng)用閃屏頁延遲跳轉(zhuǎn)的三種寫法
這篇文章主要介紹了 Android應(yīng)用閃屏頁延遲跳轉(zhuǎn)的三種寫法,需要的朋友可以參考下2017-03-03
Android入門：廣播發(fā)送者與廣播接收者詳細(xì)介紹
本篇文章主要介紹了Android入門：廣播發(fā)送者與廣播接收者，詳細(xì)介紹了廣播收發(fā)的原理和代碼，有需要的可以了解一下。2016-11-11
Activity與Service之間交互并播放歌曲的實(shí)現(xiàn)代碼
以下是對Activity與Service之間交互并播放歌曲的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下2013-07-07
android現(xiàn)有項(xiàng)目輕微改動適配平板心得
這篇文章主要介紹了android現(xiàn)有項(xiàng)目輕微改動適配平板心得，對android適配感興趣的同學(xué)可以參考下2021-04-04
Android基礎(chǔ)知識之tween動畫效果,Android一共提供了兩種動畫,這篇文章主要介紹了Android動畫效果之tween動畫，感興趣的小伙伴們可以參考一下2016-06-06
Android滑動到頂部和底部時出現(xiàn)的陰影如何去掉
本文給大家介紹android滑動到頂部和底部時出現(xiàn)的陰影去掉的解決方法，本文還涉及到listview各個屬性的用法介紹，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
android實(shí)現(xiàn)圖片閃爍動畫效果的兩種實(shí)現(xiàn)方式(實(shí)用性高)
本文通過兩種方法給大家講解了android實(shí)現(xiàn)圖片閃爍動畫效果，實(shí)用性非常高，對這兩種方法感興趣的朋友一起通過本文學(xué)習(xí)吧2016-09-09