欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android動(dòng)態(tài)使用VectorDrawable過(guò)程詳解

 更新時(shí)間:2023年02月16日 10:59:27   作者:weixin_43912367  
這篇文章主要介紹了Android動(dòng)態(tài)使用VectorDrawable過(guò)程,2014年6月26日的I/O 2014開(kāi)發(fā)者大會(huì)上谷歌正式推出了Android L,它帶來(lái)了全新的設(shè)計(jì)語(yǔ)言Material Design,新的API也提供了這個(gè)類VectorDrawable

接上篇繼續(xù),講解使用動(dòng)態(tài)的VectorDrawable

上篇鏈接:

Android三種方式生成矢量圖之VectorDrawable類使用詳解

導(dǎo)言

VectorDrawable有兩個(gè)優(yōu)點(diǎn),一個(gè)是縮放不失真,另一個(gè)是使PNG的體積,大幅度減小,那么如果僅僅只有這兩個(gè)優(yōu)點(diǎn),其實(shí)我是并不需要使用VectorDrawable,或者說(shuō),這并不能成為我們使用VectorDrawable的重要原因。

那我們使用它的重要原因是什么呢?

那就是VectorDrawable可以使用動(dòng)畫(huà),使用掌握VectorDrawable使用動(dòng)畫(huà)的動(dòng)態(tài)技巧,才是核心之一?。。?/p>

案例演示

既然是動(dòng)態(tài)的VectorDrawable,那我們就需要有一個(gè)動(dòng)畫(huà)的效果文件。

首先,我們創(chuàng)建一個(gè)屬性動(dòng)畫(huà)的目錄 res --> 右鍵new --> Android Resource Directory --> 選擇animator–> 點(diǎn)擊OK 完成創(chuàng)建

接下來(lái),我們?cè)谶@目錄下,創(chuàng)建一個(gè)動(dòng)畫(huà)文件。此次我們?cè)O(shè)置一個(gè)平移的動(dòng)畫(huà)圖形

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:propertyName="translateX"
    android:valueFrom="0"
    android:valueTo="10"
    android:valueType="floatType">
</objectAnimator>

有了動(dòng)畫(huà)文件,需要一個(gè)目標(biāo)圖形,就是讓這個(gè)動(dòng)畫(huà)效果作用于哪個(gè)圖片上。

我們選中drawable --> New --> Vector Asset 進(jìn)行設(shè)置,由于此次是演示,所以,隨便選擇一張

我們要讓這個(gè)圖形,有左右移動(dòng)的效果。

現(xiàn)在我們目標(biāo)效果和動(dòng)畫(huà)圖形都有了,那我們?nèi)绾尾拍茏屗麄兘M合起來(lái)呢?

讓他們組合起來(lái),我們需要使用一樣?xùn)|西,配置動(dòng)畫(huà)粘合劑——animated-vector

animated-vector連接了vector和animated,組成動(dòng)畫(huà)

我們?cè)赿rawable下新建arrow_anim.xml文件

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_code_black_24dp">
    <target
        android:animation="@animator/anim"
        android:name="arrow"/>
</animated-vector>

drawable屬性代表連接的圖形vector,animation鏈接的是動(dòng)畫(huà)

那里面的name屬性是什么意思呢?,讓我們?nèi)タ挫o態(tài)的VectorDrawable,在path標(biāo)簽中,我們可以給圖形設(shè)置一個(gè)name屬性,比如說(shuō),我們可以給他命名arrow,這個(gè)name屬性,就代表了整個(gè)path。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="arrow"
        android:fillColor="#FF000000"
        android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4zM14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/>
</vector>

既然粘合劑寫(xiě)好了,那我們讓他展示出我們的動(dòng)畫(huà)效果。回到我們的activity_main.xml文件中,設(shè)置一個(gè)ImageView

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/arrow_anim"/>
</LinearLayout>

設(shè)置ImageView的點(diǎn)擊效果:

package com.zrc.vectordrawable
import android.graphics.drawable.Animatable
import android.graphics.drawable.Drawable
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        image.setOnClickListener{
            val drawable:Drawable = image.drawable
            if (drawable is Animatable) {
                (drawable as Animatable).start()
            }
        }
    }
}

運(yùn)行之后點(diǎn)擊我們會(huì)發(fā)現(xiàn)并沒(méi)有效果,并報(bào)了一個(gè)Log

05-04 17:25:54.370 3180-3180/com.zrc.vectordrawable W/PropertyValuesHolder: Method setTranslateX() with type float not found on target class class androidx.vectordrawable.graphics.drawable.VectorDrawableCompat$VFullPath

問(wèn)題解決

那這是什么原因哪?這就是我們使用動(dòng)態(tài)的VectorDrawable,需要注意的第一個(gè)重要點(diǎn)。

首先我們打開(kāi)圖像文件arrow.xml,通常情況下,我們只需要使用它的path標(biāo)簽和pathData屬性,就可以描繪一個(gè)VectorDrawable,但是我們針對(duì)這個(gè)path標(biāo)簽使用屬性動(dòng)畫(huà)的時(shí)候,就需要注意了,有些屬性并不存在于path標(biāo)簽中,那么我們就不能使用屬性動(dòng)畫(huà)改變它的屬性。那我們?cè)撊绾翁幚砟兀?/p>

在VectorDrawable中,Android給我們提供了另外一個(gè)標(biāo)簽,叫做group,我們使用他吧path標(biāo)簽包裹起來(lái)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <group>
        <path
            android:name="arrow"
            android:fillColor="#FF000000"
            android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4zM14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/>
    </group>
</vector>

那這group標(biāo)簽有什么用呢?可以對(duì)path進(jìn)行分組,那我們拆成兩個(gè)path標(biāo)簽

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <group android:name="left">
        <path
            android:fillColor="#FF000000"
            android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4z"/>
    </group>
    <group  android:name="right">
        <path
            android:fillColor="#FF000000"
            android:pathData="M14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/>
    </group>
</vector>

這樣,我們就把path標(biāo)簽分成了兩個(gè),并把name屬性,賦值到了group中。

相對(duì)應(yīng)的,我們修改arrow_anim.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_code_black_24dp">
    <target
        android:animation="@animator/anim"
        android:name="left"/>
</animated-vector>

之后運(yùn)行程序:

這樣,我們就實(shí)現(xiàn)了左邊的動(dòng)畫(huà)效果,我們?nèi)绶ㄅ谥疲層疫呉矂?dòng)起來(lái)。

我們?cè)赼nimator文件夾中,添加anim_left.xml文件

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:propertyName="translateX"
    android:valueFrom="0"
    android:valueTo="-10"
    android:valueType="floatType">
</objectAnimator>

然后在arrow_anim中加入

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_code_black_24dp">
    <target
        android:animation="@animator/anim"
        android:name="left"/>
    <target
        android:animation="@animator/anim_right"
        android:name="right"/>
</animated-vector>

運(yùn)行即可,看效果

ok了,由于是屬性動(dòng)畫(huà),可以設(shè)置旋轉(zhuǎn)等多種效果。大家可以去隨意嘗試?。?!

到此這篇關(guān)于Android動(dòng)態(tài)使用VectorDrawable過(guò)程詳解的文章就介紹到這了,更多相關(guān)Android VectorDrawable內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論