Android动态使用VectorDrawable过程详解

目录
  • 导言
  • 案例演示
  • 问题解决

接上篇继续,讲解使用动态的VectorDrawable

上篇链接:

Android三种方式生成矢量图之VectorDrawable类使用详解

导言

VectorDrawable有两个优点,一个是缩放不失真,另一个是使PNG的体积,大幅度减小,那么如果仅仅只有这两个优点,其实我是并不需要使用VectorDrawable,或者说,这并不能成为我们使用VectorDrawable的重要原因。

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

那就是VectorDrawable可以使用动画,使用掌握VectorDrawable使用动画的动态技巧,才是核心之一!!!

案例演示

既然是动态的VectorDrawable,那我们就需要有一个动画的效果文件。

首先,我们创建一个属性动画的目录 res --> 右键new --> Android Resource Directory --> 选择animator–> 点击OK 完成创建

接下来,我们在这目录下,创建一个动画文件。此次我们设置一个平移的动画图形

<?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>

有了动画文件,需要一个目标图形,就是让这个动画效果作用于哪个图片上。

我们选中drawable --> New --> Vector Asset 进行设置,由于此次是演示,所以,随便选择一张

我们要让这个图形,有左右移动的效果。

现在我们目标效果和动画图形都有了,那我们如何才能让他们组合起来呢?

让他们组合起来,我们需要使用一样东西,配置动画粘合剂——animated-vector

animated-vector连接了vector和animated,组成动画

我们在drawable下新建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链接的是动画

那里面的name属性是什么意思呢?,让我们去看静态的VectorDrawable,在path标签中,我们可以给图形设置一个name属性,比如说,我们可以给他命名arrow,这个name属性,就代表了整个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>

既然粘合剂写好了,那我们让他展示出我们的动画效果。回到我们的activity_main.xml文件中,设置一个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>

设置ImageView的点击效果:

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()
            }
        }
    }
}

运行之后点击我们会发现并没有效果,并报了一个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

问题解决

那这是什么原因哪?这就是我们使用动态的VectorDrawable,需要注意的第一个重要点。

首先我们打开图像文件arrow.xml,通常情况下,我们只需要使用它的path标签和pathData属性,就可以描绘一个VectorDrawable,但是我们针对这个path标签使用属性动画的时候,就需要注意了,有些属性并不存在于path标签中,那么我们就不能使用属性动画改变它的属性。那我们该如何处理呢?

在VectorDrawable中,Android给我们提供了另外一个标签,叫做group,我们使用他吧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">
    <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标签有什么用呢?可以对path进行分组,那我们拆成两个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">
    <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标签分成了两个,并把name属性,赋值到了group中。

相对应的,我们修改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>

之后运行程序:

这样,我们就实现了左边的动画效果,我们如法炮制,让右边也动起来。

我们在animator文件夹中,添加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>

运行即可,看效果

ok了,由于是属性动画,可以设置旋转等多种效果。大家可以去随意尝试!!!

到此这篇关于Android动态使用VectorDrawable过程详解的文章就介绍到这了,更多相关Android VectorDrawable内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android三种方式生成矢量图之VectorDrawable类使用详解

    目录 生成矢量图VectorDrawable的三种方式 静态VectorDrawable的使用 配置引用和参数 在控件中使用 生成矢量图VectorDrawable的三种方式 第一种: 选中drawable文件夹,右键New --> Vector Asset --> 选中Clip Art ,在这里面可以选择一些矢量图 ,点击Next,然后 Finish即可. 第二种:(前提:自己有一张svg或psd的图片) 选中drawable文件夹,右键New --> Vector Asset --&

  • 如何玩转Android矢量图VectorDrawable

    从5.0(API等级21)开始,android开始支持矢量图了.关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内,具体可以参考矢量图百科.不过这里要提一下它的优点: 保存最少的信息,文件大小比位图要小,并且文件大小与物体的大小无关 任意放大矢量图形,不会丢失细节或影响清晰度,因为矢量图形是与分辨率无关的. 从以上两个优点来看,在项目中使用矢量图至少可以缩小我们apk包的尺寸,而且可以在屏幕适配时提供很大的方便,因为矢量图是分辨率无关的. 前面也说了,矢量图从21才开始支持.那么如果我

  • Android矢量图之VectorDrawable类自由填充色彩

    2014年6月26日的I/O 2014开发者大会上谷歌正式推出了Android L,它带来了全新的设计语言Material Design,新的API也提供了这个类VectorDrawable .也就是android支持SVG类型的资源也就是矢量图.想到矢量图,自然就会想到位图,何为矢量图,何为位图?先来说说位图吧,我们经常用的png,jpg就是位图了,他是由一个单元一个单元的像素组成的.当小icon遇到大屏幕手机的时候,icon如果被撑开那就是马赛克一样啦.这可不是我们想要的.而矢量图正式和它相

  • Android动态使用VectorDrawable过程详解

    目录 导言 案例演示 问题解决 接上篇继续,讲解使用动态的VectorDrawable 上篇链接: Android三种方式生成矢量图之VectorDrawable类使用详解 导言 VectorDrawable有两个优点,一个是缩放不失真,另一个是使PNG的体积,大幅度减小,那么如果仅仅只有这两个优点,其实我是并不需要使用VectorDrawable,或者说,这并不能成为我们使用VectorDrawable的重要原因. 那我们使用它的重要原因是什么呢? 那就是VectorDrawable可以使用动

  • Spring JDK动态代理实现过程详解

    这篇文章主要介绍了Spring JDK动态代理实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 创建项目 在 MyEclipse 中创建一个名称为 springDemo03 的 Web 项目,将 Spring 支持和依赖的 JAR 包复制到 Web 项目的 WEB-INF/lib 目录中,并发布到类路径下. 2. 创建接口 CustomerDao 在项目的 src 目录下创建一个名为 com.mengma.dao 的包,在该包下

  • Android 实现定时任务的过程详解

    在Android开发中,通过以下三种方法定时执行任务: 一.采用Handler与线程的sleep(long)方法(不建议使用,java的实现方式) 二.采用Handler的postDelayed(Runnable, long)方法(最简单的android实现) 三.采用Handler与timer及TimerTask结合的方法(比较多的任务时建议使用) android里有时需要定时循环执行某段代码,或者需要在某个时间点执行某段代码,这个需求大家第一时间会想到Timer对象,没错,不过我们还有更好的

  • Android Touch事件分发过程详解

    本文以实例形式讲述了Android Touch事件分发过程,对于深入理解与掌握Android程序设计有很大的帮助作用.具体分析如下: 首先,从一个简单示例入手: 先看一个示例如下图所示: 布局文件 : <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id=&

  • Android 动态改变布局实例详解

    Android 动态改变布局                最近项目需求,动态的改变布局,为了增加客户体验,尤其是在输入框出现小键盘的时候,为了避免小键盘遮挡APP内容就需要动态改变布局: 先看下实现效果图: 其实是一个软件的登录界面,初始是第一个图的样子,当软键盘弹出后变为第二个图的样子,因为登录界面有用户名.密码.登录按钮,不这样的话软键盘弹出后会遮住登录按钮(其实之前的实现放到了ScrollView里面,监听软键盘弹出后滚动到底部,软键盘隐藏后滚动到顶部,也是可以的). 最简单的方法就是多

  • android studio2.3如何编译动态库的过程详解

    前言 最近在工作中需要编译android下的动态库,本以为是一件简单的事,没想到因为工具,以及google本身被墙的原因,折腾了好久. 在windows外的平台搞事情,寿命都得缩短. 过程如下 一种方案是用eclipse+ndk+adt插件,总之是eclipse下适配android ndk的一套东西,我搜了一些文档,看到一大堆冗余的名字,文件,感觉不对味,放弃. 另一种方案是android studio,初看觉得是大公司出品,且针对的是自家系统的IDE,能保持个一贯性,没想到各个版本差别挺大,一

  • Android 应用的安装过程详解

    Android 应用安装过程: 首先一个android项目,然后编译和打包,将.java文件编译为.class,.class编译为.dex,将所有文件打包为一个apk,只编译代码,不编译资源. .apk里面的.arsc是资源的索引,当资源比较多的时候,可以索引. signing-签名,系统在确认应用被覆盖之前,除了检测包名是否一致,还会检测签名是否相同.所以签名是一个公司的机密,起到版权保护的作用. 我们部署一个项目,不是把项目安装到手机上,而是先把apk安装包上传拷贝到手机上,在手机里面安装这

  • Python绘制动态水球图过程详解

    先来看看绘制的动态水球图: 没有安装PyEcharts的,先安装PyEcharts: # 安装pyecharts模块,直接安装就是最新的版本pip install pyecharts 安装好PyEcharts之后,就可以将需要使用的模块进行导入: from pyecharts import options as optsfrom pyecharts.charts import Liquid 水球图数据很简单,就是一个完成率数字,所以不用定义或导入,也无需做转换. 接下来就可以绘制水球图了: c

  • Python使用eval函数执行动态标表达式过程详解

    英文文档: eval(expression, globals=None, locals=None) The arguments are a string and optional globals and locals. If provided, globals must be a dictionary. If provided, localscan be any mapping object. The expression argument is parsed and evaluated as

  • Activiti如何动态获取流程图过程详解

    本文中使用的activiti版本是5.22.0 一.绘图原理 activiti中提供了一个可以用来绘制流程图的类DefaultProcessDiagramGenerator,这个类在5.22.0及以上的版本中 是以一个单独jar包的方式提供的,所以还需要引入相应的依赖. <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-image-generator</artifactI

随机推荐