矢量图VectorDrawable轻松实现箭头左右移动动画
最近在学习利用矢量图VectorDrawable实现动画,发现矢量图也很强大,很多动画效果都可以简单实现,下面就是其中一个简单箭头左右移动的动画。
下面开始实现这个动画效果
1. 在res文件夹下创建animator文件夹
2. 然后在animator文件夹下生成一个anim动画文件
anim.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"android:duration="1000"android:repeatCount="infinite"android:propertyName="translateX"android:repeatMode="reverse"android:valueFrom="0"android:valueTo="-10">
</objectAnimator>
duration是指动画的时长
repeatCount是指重复次数
propertyName是指改变的属性
repeatMode是指重复的模式
valueFrom和valueTo就是指从哪移动到哪
3.在drawable文件夹中创建矢量图
在drawable文件夹右键选择New-》VectorAsset
选择左右箭头为我们要生成的矢量图vector.xml
4. 修改矢量图
vector.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="100dp"android:height="100dp"android:viewportWidth="24.0"android:viewportHeight="24.0"><path
android:fillColor="#FF000000"android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3zM21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
</vector>
矢量图生成后代码如上,但是我们要在path标签外添加一个group标签,并且添加name属性,否则我们的动画将不会运动。而且既然箭头分为左右两个,那么我们就要将它们区分开,我们就可以看到pathdata标签,里面有两个大写M开头的属性,那就是矢量图的相对坐标信息,我们将它们分为两个标签来区分。修改如下:
vector.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="100dp"android:height="100dp"android:viewportWidth="24.0"android:viewportHeight="24.0"><group android:name="left"><path
android:fillColor="#FF000000"android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3z"/></group><group android:name="right"><path
android:fillColor="#FF000000"android:pathData="M21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/></group>
</vector>
5. 创建“粘合剂”animated-vector
在drawable文件夹下再生成一个资源文件,但是将里面的selector标签改为animated-vector,这个文件其实就是用来把矢量图和我们的指定动画“粘合”起来,让它们分别知道哪个动画作用于哪个矢量图。
animatedvector.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"android:drawable="@drawable/vector"><target
android:animation="@animator/anim_left"android:name="left"></target><target
android:animation="@animator/anim_right"android:name="right"></target>
</animated-vector>
这里的target标签显然就是指我们所建立的动画文件,我们既然分为左右两个箭头,所以就将anim动画文件再复制出一个命名为left和right。而android:drawable属性就是指的我们所要用的矢量图了。
6. 配置主布局文件
在主布局文件中添加Imageview
<ImageView
android:onClick="Click"android:layout_width="wrap_content"android:layout_height="wrap_content"app:srcCompat="@drawable/animatedvector"/>
在Mainactivity中添加Click函数
public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}public void Click(View view){ImageView imageView = (ImageView)view;Drawable drawable = imageView.getDrawable();if (drawable instanceof Animatable){((Animatable)drawable).start();}}
}
就是获取我们主布局中imageView,然后转换为drawable,再判断如果属于动画,就调用start方法开始动画。启动应用后,点击矢量图就会呈现一开始的动画了,简单吧。
矢量图VectorDrawable轻松实现箭头左右移动动画相关推荐
- android+矢量图+插件,如何玩转Android矢量图VectorDrawable
从5.0(api等级21)开始,android开始支持矢量图了.关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内,具体可以参考矢量图百科.不过这里要提一下它的优点: 保存最少的信息,文件大 ...
- Android 5.0+高级动画开发 矢量图动画 轨迹动画 路径变换
第1章 课程介绍 为了成就更多高逼格的人才,我专门整理了Android5.0以后主推的实现酷炫动画的新技术,教你掌握实现动画的高逼格技巧.课程中我会详细讲解每个动画效果实现的原理和所用的技术,并带你一 ...
- Android tips(十二)--Android开发中使用矢量图
转载请标明出处:一片枫叶的专栏 本文我们将介绍一些关于Android矢量图的相关知识点.最新的项目中要求以矢量图替代传统的.png资源文件,所以特意学习了一下Android中的矢量图相关概念,不得不说 ...
- Android开发中使用矢量图
本文我们将介绍一些关于Android矢量图的相关知识点.最新的项目中要求以矢量图替代传统的.png资源文件,所以特意学习了一下Android中的矢量图相关概念,不得不说矢量图还是一个比较好的适配方案. ...
- [转载]点阵图(位图)与矢量图的区别
计算机绘图分为点阵图(又称位图或栅格图像)和矢量图形两大类,认识他们的特色和差异,有助于创建.输入.输出编辑和应用数字图像.位图图像和矢量图形没有好坏之分,只是用途不同而已.因此,整合位图图像和矢量图 ...
- Android使用矢量图(SVG, VectorDrawable)实践篇
供自己学习的笔记 原文链接:http://www.jianshu.com/p/0555b8c1d26a 前言 本文是以读者对SVG有一定了解为前提的,否则请先百(谷)度(歌)了解下. 实践都是从坑里爬 ...
- Android VectorDrawable 矢量图+属性动画 使用总结
代码已经同步到GitHub 然后看一下效果图: 前两个图标是让android的组件使用VectorDrawable 后面的是动画效果 后面会详细介绍. 什么是VectorDrawable Vector ...
- Android开发之将Android SVG 转 VectorDrawable矢量图的方法
Android SVG to VectorDrawable介绍两种方法如下 方法一 使用在线的三方网站即可我推荐两个: Android SVG to VectorDrawable Android SV ...
- Android 开发 VectorDrawable 矢量图 (三)矢量图动画
Android 开发 VectorDrawable 矢量图 (三)矢量图动画 简介--矢量动画2种方式与流程 矢量动画有一些不一样的细节,这里需要提前了解,否则容易在后续使用的时候困惑. 1.使用gr ...
最新文章
- 云消防大数据_大数据在智慧消防中的应用
- 分布式理论:CAP理论
- redis集群学习一些记录
- Node的Web应用框架Express的简介与搭建HelloWorld
- ImportError:cannot import name ‘WordCloud’的解决办法
- ALL in BERT:一套操作冲进排行榜首页
- C++ 贪吃蛇小游戏
- 前端学习(1287):node.js的组成
- 互联网晚报 | 8月28日 星期六 | 我国网民规模超10亿;vivo首款自研影像芯片下月首发;同程艺龙拟改名为同程旅行...
- 5G NR 标准:下一代无线通信技术
- win7专业版 .bat脚本运行_IT运维老司机:聊聊BAT批处理提升工作效率
- Java 爬取行政区划代码
- 《你可能不知道免像控的两个细节问题》
- python微信群发itchat
- mdadm彻底删除software RAID
- 我的2021秋招 | 互联网、银行、选调 经验分享
- java毕业设计阿博图书馆管理系统mybatis+源码+调试部署+系统+数据库+lw
- 信号与系统(3)- 受迫响应、自然响应以及零输入响应的求解
- 中国计算机设计大赛来啦!用飞桨驱动智慧救援机器狗
- python日历模块_Python日历模块总结
热门文章
- 中国电子产品检测包含那些类型2?
- 基于ssm的驾校管理系统
- 微信小程序学习用demo推荐:微信涂鸦、canvas学习
- 双引号后面要加句号吗_请问:用双引号的时候,一句话结尾的句号是放在引号里面还是外面......
- c++语言基础:delete和delete[]
- 自动驾驶(五十七)---------车身航迹推算
- MCSE中文认证考试原版介绍
- 在Linux上安装蓝牙驱动
- 基于flowable的upp(统一流程平台)运行性能优化(1)
- 关于设备指纹,你想了解的都在这里