Android svg动画-线图动画

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



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

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportWidth="110"
    android:viewportHeight="110"

    >
    <group
        android:name="test"
        >
        <path android:strokeColor="@android:color/holo_purple"
            android:strokeWidth="2"
            android:pathData="
                              M 20, 80
                              L 50, 80 80, 80"
            android:name="path1"
            />
        <path android:strokeColor="@android:color/holo_blue_bright"
            android:strokeWidth="2"
            android:pathData="
                              M 20, 20
                              L 50, 20 80, 20"
            android:name="path2"
            />
    </group>

</vector>

  path1与和path2分别绘制了两条直线,每条直线有三个点来控制,即起点、中点和终点,形成了初始状态。
  接下来实现path1的变换的objectAnimator动画。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1000"
        android:propertyName="pathData"
        android:valueFrom="
                          M 20, 80
                          L 50, 80 80, 80"
        android:valueTo="M 20, 80
                         L 50, 50 80, 20"
        android:valueType="pathType"
        android:interpolator="@android:anim/bounce_interpolator"
        />
</set>

  path2的动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1000"
        android:propertyName="pathData"
        android:valueFrom="
                          M 20, 20
                          L 50, 80 80, 80"
        android:valueTo="M 20, 20
                         L 50, 50 80, 80"
        android:valueType="pathType"
        android:interpolator="@android:anim/bounce_interpolator"
        />
</set>

  这里需要注意的是:在svg的路径变换属性动画中,变换前后的节点数必须相同,这也是为什么前面需要使用三个点来绘制一条直线的原因,因为要使用中点来进行动画变换。
  有了VectorDrawable和ObjectAnimator,剩下的只需要使用AnimatedVectorDrawable来将它们粘合在一起。

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/demo"
    >
    <target
        android:animation="@animator/anim_path1"
        android:name="path1"/>
    <target
        android:animation="@animator/anim_path2"
        android:name="path2"/>
</animated-vector>

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

mImageView = (ImageView) findViewById(R.id.id_imageView);
((Animatable)mImageView.getDrawable()).start();
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容