Android-svg动画示例之线图动画

Posted 2020-09-08

在android 5.X中，Google大量引入线图动画。当页面发生改变时，页面上的icon不再是生硬的切换，而是通过非常生动的动画效果，转换成另一种形态。

要实现如图的的效果，首先要创建一个静态的svg图形，即静态的VectorDrawable。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <vector xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:height="200dp"
 4     android:width="200dp"
 5     android:viewportWidth="110"
 6     android:viewportHeight="110"
 7 
 8     >
 9     <group
10         android:name="test"
11         >
12         <path android:strokeColor="@android:color/holo_purple"
13             android:strokeWidth="2"
14             android:pathData="
15                               M 20, 80
16                               L 50, 80 80, 80"
17             android:name="path1"
18             />
19         <path android:strokeColor="@android:color/holo_blue_bright"
20             android:strokeWidth="2"
21             android:pathData="
22                               M 20, 20
23                               L 50, 20 80, 20"
24             android:name="path2"
25             />
26     </group>
27 
28 </vector>

path1与和path2分别绘制了两条直线，每条直线有三个点来控制，即起点、中点和终点，形成了初始状态。

接下来实现path1的变换的objectAnimator动画。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">
 3     <objectAnimator
 4         android:duration="1000"
 5         android:propertyName="pathData"
 6         android:valueFrom="
 7                           M 20, 80
 8                           L 50, 80 80, 80"
 9         android:valueTo="M 20, 80
10                          L 50, 50 80, 20"
11         android:valueType="pathType"
12         android:interpolator="@android:anim/bounce_interpolator"
13         />
14 </set>

path2的动画

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">
 3     <objectAnimator
 4         android:duration="1000"
 5         android:propertyName="pathData"
 6         android:valueFrom="
 7                           M 20, 20
 8                           L 50, 80 80, 80"
 9         android:valueTo="M 20, 20
10                          L 50, 50 80, 80"
11         android:valueType="pathType"
12         android:interpolator="@android:anim/bounce_interpolator"
13         />
14 </set>

这里需要注意的是：在svg的路径变换属性动画中，变换前后的节点数必须相同，这也是为什么前面需要使用三个点来绘制一条直线的原因，因为要使用中点来进行动画变换。

有了VectorDrawable和ObjectAnimator，剩下的只需要使用AnimatedVectorDrawable来将它们粘合在一起。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:drawable="@drawable/demo"
 4     >
 5     <target
 6         android:animation="@animator/anim_path1"
 7         android:name="path1"/>
 8     <target
 9         android:animation="@animator/anim_path2"
10         android:name="path2"/>
11 </animated-vector>

最后在代码中启动动画即可

1         mImageView = (ImageView) findViewById(R.id.id_imageView);
2         ((Animatable)mImageView.getDrawable()).start();