Android利用vectordrawable实现轨迹动画

时间:2022-11-21 11:56:41

 
 

 

Google终于在Android5.0中引入了矢量图,矢量图的特点很多,比如不管怎么放大都不会变形,大小也比png小很多,而且利用矢量图我们可以很简单的实现一些看似很复杂的动画效果

Android利用vectordrawable实现轨迹动画

虽然动画看着挺复杂,但有了vectordrawable,在使用svg图片的情况下,用两个xml文件就能实现这种效果

第一步:

更改app内的build.gradle文件:

Android利用vectordrawable实现轨迹动画

然后在你drawable文件夹下引入你想用的svg图片,这个是我准备使用的一张svg图片

Android利用vectordrawable实现轨迹动画

第二步:

在res文件夹下新建“animator”文件夹,记住,是“animator”,不是“anim”

第三步:

在“animator”文件夹下新建一个objectAnimator属性动画xml文件,我取名为“anim_path.xml”

Android利用vectordrawable实现轨迹动画

关键就是android:propertyName="trimPathStart"属性

第四步:

在drawable文件夹下新建animated-vector属性的xml文件

animated-vector就相当于粘合剂,将svg图片和你编写的属性动画,粘合在一起

Android利用vectordrawable实现轨迹动画

红框标出来的drawable,引用的就是你导入的svg图片

name:就是svg图片中定义的name

animation:引用的就是在animator文件夹下新建的属性动画文件

第五步:

怎样使用呢?看代码

Android利用vectordrawable实现轨迹动画

看红框标出的部分,这里引用的是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