Google终于在Android5.0中引入了矢量图,矢量图的特点很多,比如不管怎么放大都不会变形,大小也比png小很多,而且利用矢量图我们可以很简单的实现一些看似很复杂的动画效果
虽然动画看着挺复杂,但有了vectordrawable,在使用svg图片的情况下,用两个xml文件就能实现这种效果
第一步:
更改app内的build.gradle文件:
然后在你drawable文件夹下引入你想用的svg图片,这个是我准备使用的一张svg图片
第二步:
在res文件夹下新建“animator”文件夹,记住,是“animator”,不是“anim”
第三步:
在“animator”文件夹下新建一个objectAnimator属性动画xml文件,我取名为“anim_path.xml”
关键就是android:propertyName="trimPathStart"属性
第四步:
在drawable文件夹下新建animated-vector属性的xml文件
animated-vector就相当于粘合剂,将svg图片和你编写的属性动画,粘合在一起
红框标出来的drawable,引用的就是你导入的svg图片
name:就是svg图片中定义的name
animation:引用的就是在animator文件夹下新建的属性动画文件
第五步:
怎样使用呢?看代码
看红框标出的部分,这里引用的是drawable文件,就是第四步说的那个粘合剂animated-vector,而且这里用的是srcCompat,不是background,也不是src,是“srcCompat”
然后,在class中给这张图片一个点击事件,启动动画
/** * 启动动画 * * @param imageView */ private void startAnim(ImageView imageView) { drawable = imageView.getDrawable(); if (drawable instanceof Animatable) { ((Animatable) drawable).start(); } }
其他的效果,具体看源码吧
https://github.com/git-wuxianglong/PathAnimation
。