Animated Vector Drawable to create an animation that changes the shape of an icon when pressed.
公開日: 2021年02月24日最終更新日: 2022年01月28日
I'd like to make a thing that animates the icons and switches them when you press a button. The code for the sample app we created is available on GitHub.
In learning about Animated Vector Drawable, I referred to the following.
https://github.com/DroidGirls/Meetup/tree/master/3_vector_drawable
You need to understand the pathData of vector drawable for morph animation.
It is written in Understand VectorDrawable's pathData and be able to freely handle morph animation from icon to icon.. Please check there as well.
About AniumatedVectorDrawable
Change the pathData of the vector image, rotate it, and morph it to realize the switching animation of the application icon.
A sample is available at Using AniumatedVectorDrawable.
If you look at the video at the bottom, you can see that it is an animation of a triangle shape changing into a square with a circular motion.
To achieve this animation, the following three elements are used in the xml file.
- VectorDrawable with
<vector>element <objectAnimator>element to define animations such as rotation and morph (deformation of the path)- AnimatedVectorDrawable with
<animated-vector>element, which refers to and summarizes the vector drawable and animation definitions above
Each of them can be defined in a separate file, but they can also be inlined as described in Inlining complex XML resources. It can also be inlined as described in
The above page states the following.
"The <aapt:attr > XML tag tells AAPT to treat the children of this tag as resources and extract them into their own resource files. The value of the attribute name specifies where to use the inline resource in the parent tag. AAPT will generate a resource file and resource name for all inline resources. AAPT generates resource files and resource names for all inline resources.
By using <aapt:attr>, AAPT will extract the contents of the tags you have inline as a resource file.
By using <aapt:attr>, AAPT will extract the content of the inline tags as a resource file. By using inline, you can reduce the time and effort to manage resources that are only used in one place by creating a file.
If the content is to be shared and used, it is better to file it for reference.
In this article, I will try inline XML just for the sake of interest.
Sample
The AnimatedVectorDrawable file you see here is triangle_to_rect.xml.
The following part defines a vector image in a static state.
<aapt:attr name="android:drawable">
<vector
android:width="64dp"
android:height="64dp"
android:viewportWidth="600"
android:viewportHeight="600">
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0">
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
</aapt:attr>The size to be drawn is specified as 64dp x 64dp, and the size of the canvas on which the vector image will be drawn is specified as 600px x 600px.
In the <group> tag, we add a 45-degree rotation around the center of the canvas (300, 300) by specifying the rotation.
The <path> tag specifies the path information of the triangle filled in black.
You can read more about pathData in Understand VectorDrawable's pathData to freely handle morph animation from icon to icon.
The next step is to specify the rotation animation. We define an animation that rotates the object from 45 degrees to 405 degrees in 6000ms by specifying the rotationGroup above as the target.
<target android:name="rotationGroup">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="45"
android:valueTo="405" />
</aapt:attr>
</target>Finally, here is an animation to change the pathData, defining a morph animation to change the pathData, i.e. change the shape of the icon.
It takes 3000ms to change the pathData from "M300,70 l 0,-70 70,70 0,0 -70,70z" (triangle) to "M300,70 l 0,-70 70,0 0,140 -70,0 z" (square).
<target android:name="v">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
</set>
</aapt:attr>
</target>An AnimatedVectorDrawable that does the opposite is rect_to_triangle.xml.
An example of a play/stop button is pause_to_play.xml and play_to_pause.xml xml).
Try pathData.
The path before and after the animation needs to match the commands. In this case, I created two patterns to try out different commands. The number and order of the commands specified by the letters M/m, L/l, v, h, and z correspond to each other.
The file is paths.xml.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="path_play">
M38,24
L38,24
L16,24
L16,10
z
M38,24
L38,24
L16,38
L16,24
z
</string>
<string name="path_pause">
M12,10
L20,10
L20,38
L12,38
z
M28,10
L36,10
L36,38
L28,38
z
</string>
<string name="path_play2">
M8,5
v14
h0
l11,-7
l0,0
v0
z
M8,5
v14
h0
l11,-7
h0
z
</string>
<string name="path_pause2">
M6,19
v0
h4
l0,-14
l-4,0
v14
z
M14,5
v14
h4
l0,-14
h-4
z
</string>
</resources>Feeleings
The Vector image pathData does not give you an immediate image of the image, but it is simple to understand. If something is hard to understand, you can use a tool to make it easier to see. If you can use animation properly, you can create a UI that is easy for users to understand, so I am glad that I did this research.