Android-svg Animated example line diagram animation

In Android 5.X, Google has introduced a lot of line graphics animations. When the page changes, the icon on the page is no longer a blunt switch, but rather a very vivid animation effect, converted to another form.

To achieve the effect of the first to create a static SVG graphics, that is, static vectordrawable.

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Vectorxmlns:android= "Http://schemas.android.com/apk/res/android"3 Android:height= "200DP"4 Android:width= "200DP"5 Android:viewportwidth= " the"6 Android:viewportheight= " the"7 8     >9     <GroupTen         Android:name= "Test" One         > A         <PathAndroid:strokecolor= "@android: Color/holo_purple" - Android:strokewidth= "2" - Android:pathdata=" the M, - L " - Android:name= "path1" -             /> +         <PathAndroid:strokecolor= "@android: Color/holo_blue_bright" - Android:strokewidth= "2" + Android:pathdata=" A M, at • " - Android:name= "path2" -             /> -     </Group> -  - </Vector>

Path1 and path2 draw two straight lines, each with three points to control, that is, the starting point, the midpoint and the end point, forming the initial state.

The next step is to implement the path1 transformation of the Objectanimator animation.

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Setxmlns:android= "Http://schemas.android.com/apk/res/android">3     <Objectanimator4         android:duration= "+"5 Android:propertyname= "Pathdata"6 Android:valuefrom="7 M,8 L "9 Android:valueto= "M",Ten • " One Android:valuetype= "PathType" A Android:interpolator= "@android: Anim/bounce_interpolator" -         /> - </Set>

Path2 's Animation

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Setxmlns:android= "Http://schemas.android.com/apk/res/android">3     <Objectanimator4         android:duration= "+"5 Android:propertyname= "Pathdata"6 Android:valuefrom="7 M,8 L "9 Android:valueto= "M",Ten L " One Android:valuetype= "PathType" A Android:interpolator= "@android: Anim/bounce_interpolator" -         /> - </Set>

It is important to note that in SVG's path transform attribute animation, the number of nodes before and after the transformation must be the same, which is why the previous need to use three points to draw a line, because you want to use the midpoint to animate the transformation.

With Vectordrawable and Objectanimator, the only thing left to do is to use animatedvectordrawable to glue them together.

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Animated-vectorxmlns:android= "Http://schemas.android.com/apk/res/android"3 android:drawable= "@drawable/demo"4     >5     <Target6         android:animation= "@animator/anim_path1"7 Android:name= "path1"/>8     <Target9         android:animation= "@animator/anim_path2"Ten Android:name= "path2"/> One </Animated-vector>

Finally, you can start the animation in your code

1         Mimageview = (ImageView) Findviewbyid (R.id.id_imageview); 2         ((animatable) mimageview.getdrawable ()). Start ();

Android-svg Animated example line diagram animation