VectorDrawable - Part Two
In the previous article, we looked at how to convert an existing svg file to VectorDrawable, which allows you to replace many bitmaps with one that is smaller in size and easier to maintain. However, these are not all the utility that can be extracted from VectorDrawable. It can be animated. This is what we will consider in this article, forcing the android logo to shrug.
The animation we conceived is a simple movement along the Y axis. We want to move the head and arms, but leave the body motionless. At first glance, this all looks rather complicated, because these are all elements of a single Drawable. But in Lollipop, along with VectorDravable, a component was introduced that greatly simplifies our task. Namely - AnimatedVectorDrawable. In the previous article, we gave each path element a name, and now we can apply animation to a different path within VectorDrawable. In practice, this turned out to be a bit difficult, because the path does not have attributes such as translateX and translateY that we can control the animator. The group element has the attributes we need, so we wrapped our heads and hands in the grope:
<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="500" android:viewportHeight="500" android:width="500px" android:height="500px"> <group android:name="android"> <group android:name="head_eyes"> <path android:name="head" android:fillColor="#9FBF3B" android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" /> <path android:name="left_eye" android:fillColor="#FFFFFF" android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" /> <path android:name="right_eye" android:fillColor="#FFFFFF" android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" /> </group> <group android:name="arms"> <path android:name="left_arm" android:fillColor="#9FBF3B" android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" /> <path android:name="right_arm" android:fillColor="#9FBF3B" android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" /> </group> <path android:name="body" android:fillColor="#9FBF3B" android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" /> </group> </vector> Now we can write drawable with animated-vector to apply animation to the necessary groups of our image:
<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/android"> <target android:animation="@animator/shrug" android:name="head_eyes" /> <target android:animation="@animator/shrug" android:name="arms" /> </animated-vector> I know that it was possible to combine the head and the hands into one group, but consciously divided into two to show how several groups can be animated using one animated-vector.
The parent element "animated-vector" defines VectorDrawable, which we will animate. And the internal elements of the target determine the type of animation and the group to which this animation will be applied.
There are different parameters that can be animated for various elements, such as vector, group, clip-path and path. Therefore you need to look at VectorDravable JavaDocs to find out what elements to use for a particular animation. For example, changing the tint parameter is necessary for the vector element, whereas changing the fill color needs to be done for the path parameter.
Let's write a simple animation of changing the position of Y to shrug our android:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:propertyName="translateY" android:valueType="floatType" android:valueFrom="0" android:valueTo="-10" android:repeatMode="reverse" android:repeatCount="infinite" android:duration="250" /> </set> In order to run this animation we need to do a couple of things. First we need to change the Drawable that we installed on the ImageView in our layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".VectorDrawablesActivity"> <ImageView android:id="@+id/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/animated_android" android:contentDescription="@null" /> </RelativeLayout> If we run the application, we will see a static image, because the animation needs to be run from the activity:
public class VectorDrawablesActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_vector_drawables); ImageView androidImageView = (ImageView) findViewById(R.id.android); Drawable drawable = androidImageView.getDrawable(); if (drawable instanceof Animatable) { ((Animatable) drawable).start(); } } } If we start the application now, we will see that the animation works and applies only to the parts of the image we need:
In the next article, we will explore and explore some really cool animation methods that can be done with AnimatedVectorDrawable.
The source code for this article is available here .
')
Source: https://habr.com/ru/post/301610/
All Articles