快捷導(dǎo)航

Android中使用Vectors(2)繪制優(yōu)美的路徑動畫

更新時(shí)間：2016年03月08日 10:58:20 作者：SpikeKing

這篇文章主要介紹了Android中使用Vectors(2)繪制優(yōu)美的路徑動畫的相關(guān)資料,需要的朋友可以參考下

隨著互聯(lián)網(wǎng)技術(shù)的不斷進(jìn)步，Android的Vector圖像的時(shí)代已經(jīng)到來. 在Google的最新支持庫v23.2中, AppCompat類已經(jīng)使用Vector圖像, 使得AAR包減少9%, 大約70KB, 惠及所有高版本的應(yīng)用. 當(dāng)然我們也可以使用Vector, 瘦身應(yīng)用. Vector圖像是SVG格式在Android的表現(xiàn)形式. SVG圖像適應(yīng)屏幕, 圖片較小, 還有很多優(yōu)點(diǎn), 參考.

關(guān)于Vectors的分析, 主要分為兩節(jié):

(1) 使用SVG圖像瘦身應(yīng)用, 參考.

(2) 繪制優(yōu)美的路徑動畫, 參考.

本文是第二節(jié), 關(guān)于Vector動畫.

Android

SDK Manager提示支持庫更新

Support

使用Vector動畫主要有三個部分: Vector圖像, 路徑動畫, Animated-Vector圖像.

本文源碼的Github下載地址.

動畫

Animation

1. Vector圖像

SVG格式的圖片, 轉(zhuǎn)換為Vector圖像資源, 可以使用AS2.0的轉(zhuǎn)換工具, 也可以是在線轉(zhuǎn)換工具, 參考. 圖像需要路徑(path)樣式, 便于繪制, 如

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="256dp"
android:height="256dp"
android:viewportHeight="70"
android:viewportWidth="70">
<path
android:name="heart1"
android:pathData="..."
android:strokeColor="#E91E63"
android:strokeWidth="1"/>
<path
android:name="heart2"
android:pathData="..."
android:strokeColor="#E91E63"
android:strokeWidth="1"/>
</vector>

2. 路徑動畫

使用屬性動畫, 控制繪制狀態(tài).

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="6000"
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"/>

ObjectAnimator的trimPathEnd屬性決定繪制path的數(shù)量, 其余部分不會繪制, 其取值區(qū)間是0到1. duration屬性表示持續(xù)時(shí)間, 6000即6秒.

3. Animated-Vector圖像

把Vector圖像的路徑(path), 應(yīng)用于路徑動畫(objectAnimator), 控制繪制.

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/v_heard">
<target
android:name="heart1"
android:animation="@animator/heart_animator"/>
<target
android:name="heart2"
android:animation="@animator/heart_animator"/>
...
</animated-vector>

4. 顯示動畫

需要Android 5.0(21)以上版本, 才能使用Vector動畫, 即AnimatedVectorDrawable類.

// 只支持5.0以上.
private void animateImage() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// 獲取動畫效果
AnimatedVectorDrawable mAnimatedVectorDrawable = (AnimatedVectorDrawable)
ContextCompat.getDrawable(getApplication(), R.drawable.v_heard_animation);
mIvImageView.setImageDrawable(mAnimatedVectorDrawable);
if (mAnimatedVectorDrawable != null) {
mAnimatedVectorDrawable.start();
}
}
}

AnimatedVectorDrawable的start方法就是動畫啟動功能.

使用Vector動畫比gif動畫節(jié)省應(yīng)用資源, 可以給用戶更好的體驗(yàn). 推薦一個有趣的SVG庫.

以上所述是小編給大家介紹的Android中使用Vectors(2)繪制優(yōu)美的路徑動畫，希望對大家有所幫助！

您可能感興趣的文章: