锐客网

  1. 首页 > 睿知 > it技术 > >

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

androidIT知识svg动画

敢说敢作敢为， 无怨无恨无悔。这篇文章主要讲述Android-svg动画示例之线图动画相关的知识，希望能为你提供帮助。
在android 5.X中，Google大量引入线图动画。当页面发生改变时，页面上的icon不再是生硬的切换，而是通过非常生动的动画效果，转换成另一种形态。

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

文章图片

要实现如图的的效果，首先要创建一个静态的svg图形，即静态的VectorDrawable。
1 < ?xml version="1.0" encoding="utf-8"?> 2 < vector xmlns:android="http://schemas.android.com/apk/res/android" 3android:height="200dp" 4android:width="200dp" 5android:viewportWidth="110" 6android:viewportHeight="110" 7 8> 9< group 10android:name="test" 11> 12< path android:strokeColor="@android:color/holo_purple" 13android:strokeWidth="2" 14android:pathData="https://www.songbingjia.com/android/15M 20, 80 16L 50, 80 80, 80" 17android:name="path1" 18/> 19< path android:strokeColor="@android:color/holo_blue_bright" 20android:strokeWidth="2" 21android:pathData="https://www.songbingjia.com/android/22M 20, 20 23L 50, 20 80, 20" 24android: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 4android:duration="1000" 5android:propertyName="pathData" 6android:valueFrom=" 7M 20, 80 8L 50, 80 80, 80" 9android:valueTo="M 20, 80 10L 50, 50 80, 20" 11android:valueType="pathType" 12android: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 4android:duration="1000" 5android:propertyName="pathData" 6android:valueFrom=" 7M 20, 20 8L 50, 80 80, 80" 9android:valueTo="M 20, 20 10L 50, 50 80, 80" 11android:valueType="pathType" 12android: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" 3android:drawable="@drawable/demo" 4> 5< target 6android:animation="@animator/anim_path1" 7android:name="path1"/> 8< target 9android:animation="@animator/anim_path2" 10android:name="path2"/> 11 < /animated-vector>

最后在代码中启动动画即可
1mImageView = (ImageView) findViewById(R.id.id_imageView); 2((Animatable)mImageView.getDrawable()).start();

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

    推荐阅读


    上一篇：[文献阅读] Segmentation and Image Analysis of Abnormal Lungs at CT: Current Approaches, Challenges, and

    下一篇：android_浅析canvas的save()和restore()方法