参考链接:https://developer.android.google.cn/guide/topics/graphics/drawable-animation#AnimVector
ps:我个人做的代码动画源文件会放在本文末尾,没兴趣看就点赞,导入工程就能调用。既然是文档笔记,就先解析官方文档的实现思路,再对比我自己的,我也会适当说明我遇到的难题。
之前,我已做完“歌单管理”内容,后面我就想能不能做一点图片切换的动画,比如播放/暂停图形切换?于是我就在安卓开发者官网看到了可绘制图形的动画切换效果。
在最右侧有个官方做的播放暂停的形切换动画示例gif动画展示,正适合音频应用使用。很遗憾,我最终没有在官网示例链接上找到这个动画效果的展示demo,那我就想我自己照着做一个,就仔细看了文档本章的内容并进行了实践。
虽然文档中建议使用三个文件完成此类动画效果,但是他们自己放的demo就是用的一个xml文件完成的相关动画,所以我也会用一个xml文件完成播放到暂停的动画切换,暂停到播放也只用一个。好了,想要完成此效果,就需要使用 AnimatedVectorDrawable。
首先解析第一个动画文件res/drawable/vectordrawable.xml的代码,这里就只说明文档中未提及的部分。这个文件定义了旋转前的图形,这里需要注意group和path的命名,定义命名是为了在生成AnimatedVectorDrawable时被调用到。动画对象和逻辑在build时会预编译并检查。pivotX,Y设置旋转正中心点(为viewportWidth,Height一半),rotation设置本图形相比原图形的旋转角度,顺时针转了45度,所以值为正数。
第二个文件res/drawable/animatorvectordrawable.xml,这个文件就是生成AnimatedVectorDrawable时直接调用的xml动画资源文件了,注意命名和调用的资源名。这里间接调用了三个资源文件,第一个drawable调用的自然是上前一段说的变形前图形了。第二个drawable调用的是图形旋转定义的资源文件,第三个drawable调用的是定义两个图形变形前后的资源文件了。看到这里,不要着急,往下面继续看就理解了。
第三个资源文件res/animator/rotation.xml,这个文件就是对图形旋转时的定义。duration就是图形旋转(起点到终点角度)的所需时长,propertyName旋转类型,枚举。valueFrom旋转起点角度,valueTo旋转终点角度。这时候旋转定义就出来了,就是用6秒的时间旋转一圈回到原点。
第四个资源文件res/animator/path_morph.xml,这个文件就是对图形变换的定义,一个图形根据路径点变换算法顺滑变换成另一个图形。duration图形变换所需时长。propertyName类型pathData,路径点。valueFrom是变换前图形的pathData,valueTo变换后图形的pathData,valueType值类型,反正就是路径点嘛。
当然其中的路径点变换算法不用我们自己写,这是由谷歌工程师写好了封装在AnimatedVectorDrawable java类里面了,生成并调用即可。
其实到这里就能够理解了,也能跟文档末尾的视频演示对的上了,但是他这里并没有提示是如何调用的,我这里就给各位补上代码。我这里调用的是我写的动画文件,所以除了文件名之外,其他都差不多。
那么这四个drawable文件能不能合并成一个xml文件呢,当然可以!这里我参考了官方的动画示例demo,然后根据我自己想法改写的。
遇到的难题:最主要两个图形的路径点的问题,并不是随便两张可绘制图形的路径点就行的,要相近,不然会在生成AnimatedVectorDrawable时抛异常。简书有一位博主就发布过相关的文章,播放和暂停路径点我就用的他提供的图形资源,各位感兴趣可以去看看。
遇到的第二个问题:动画效果是实现了,因为控件较小较小导致展示出的图形一个大一个小怎么办?使用setPadding控制即可,背景就使用系统自带的水波纹按压效果。
动画文件 百度云网盘链接: https://pan.baidu.com/s/10KsXKpNpLsEoxhWasZHbDQ?pwd=b5vh 提取码: b5vh (大小 800B 建议!!!)