Android vector animation: each person will get a gold digger yellow cart

After reading this article, everyone sent a yellow car, digging gold medal of ~

I have to say, vector graphics are rarely used in projects, but they smell good! Scalable vector graphics (SVG) is a set of syntax specifications commonly used in the front end, whereas VectorDrawable (vector graphics in Android) only implements part of SVG’s syntax. Using a VectorDrawable instead of a bitmap can reduce the size of APK because you can resize the same file for different screen densities without compromising image quality, and you can make some duplicated renderings.

Common vector diagrams can be obtained from two places:

IconFont
Android Stuido comes with itVector Asset Studiotool

“The Android version is incompatible“

Is vector graph not promoted due to compatibility low version problem? But most mobile operating systems are Android 5.0 now.

VectorDrawable is supported only to Android 4.4, and as low as Android 2.1 through the support library.

Vector animation AnimatedVectorDrawable is only supported up to Android 5.0, and as low as Android 3.0 through the support library. “Gralde Configuration”

    android {
      defaultConfig {
        vectorDrawables.useSupportLibrary = true
      }
    }
  dependencies { // Requires Android support library 23.2 or higher and Android PluginforGradle 2.0 or higher implementation 'com. Android. Support: appcompat - v7:23.2.0'  } Copy the code

“Decompression appreciation:“

The vector diagram

Get a Vector image using Android Studio’s Vector Asset Studio tool.

Configure Vector Assert to your preference.Resource files are generated in the Drawable folder, such as hereic_menu.xmlFile:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
 android:tint="? attr/colorControlNormal">  <path  android:fillColor="@android:color/white"  android:pathData="M3, 18 h18v - 2 l3, 16 v2zm3, 13 h18v - 2 l3, 11 v2zm3 v2h18l21 6, 6 l3, 6 z"/> </vector> Copy the code

If you don’t know about vector graphics, you probably don’t understand the content of the pathData attribute in the path tag.

Set the vector size on the vector tag,width and height to 24dp. The viewportWidth and viewportHeight properties represent the size of the canvas and represent the number of equal slices of the vector image, which is divided into 24*24. It can be understood that there are 24*24 small squares on a 24DP * 24DP picture. Through these small squares, different patterns can be drawn.

Path can be understood as the path, the content of the picture drawing. The fillColor property represents the fillColor, and the pathData property represents the content to draw on the image.

The value of the pathData attribute is the syntactic content of SVG, so you can see what the value of the pathData attribute means in the following sections.

Common commands:

“M x,y” moves to the coordinate (x,y). M3,18 means move the brush to the coordinate (3,18)
“L x,y” draws a line from the current position to the specified position (x,y).
“H x” draw a horizontal line to position X.
“V y” draw a vertical line to position y.
The “Z” closes, connecting the end and the beginning
“A rx and ry, xRotationAnagle radianFlag, sweepFlag, x, y” painting lines, understood as A part of the ellipse, rx and ry said x axis and y axis radius, namely the length of the elliptical axis problem; XRotationAnagle represents the rotation of the X-axis. RadianFlag 0 means to take small radian, 1 means to take large radian; SweepFlag 0 indicates anticlockwise; 1 indicates a clockwise arc; The end position of the X and y arcs, and the starting position is where the brush is.
“C x1,y1,x2,y2,x3,y3” cubic Bezier curves
“S x2,y2,x,y” smooth cubic Bezier curves
“Q x1,y1,x2,y2” quadratic Bezier curve
“T x,y” mapping

Ps: Upper case indicates absolute coordinates, lower case indicates relative coordinates.

Interpret the pathData tag content:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
 android:tint="? attr/colorControlNormal">  <path  android:fillColor="@android:color/white"  android:pathData="M3,18 h18 v-2 L3,16 v2 z M3,13 h18 v-2 L3,11 v2 z M3,6 v2 h18 L21,6 L3,6 z"/> </vector> Copy the code

M3,18 move the brush to the coordinate (3,18);

H18 draws a horizontal line from coordinates (3,18) to coordinates (21,18);

V-2 draws a vertical line from coordinate 21,18 to coordinate 21,16;

L3,16 draw a line from coordinate 21,18 to coordinate 3,16;

V2 draws a vertical line from coordinates (3,16) to coordinates (3,18);

Z closes the starting point and ending point.

At this point, the bottom line will be drawn, and the other two lines will follow the same principle.

Note: Do not separate the pathData value into the String. XML file. Otherwise, a pathData error will be reported when PNG images are generated on models compatible with 5.0 or less.

What other attributes are available to the path tag besides the pathData attribute?

`path`The label

Available attributes for the PATH tag:

name: path name that can be referenced elsewhere, such as vector diagram animation reference;
strokeWidth: Line width, unit:viewportHeightorviewportWidth1 equally divided in; .
strokeColor: Line color;
strokeAlpha: Line transparency.0f->1f;
strokeLineJoin: The shape of the corner of the line. Rounded cornersroundOblique cutting sharp Anglemiter, bevelbevelFor example, the four corners of a square;
strokeLineCap: Line Line cap shape. Rounded cornersround, squaresquare, armbutt;
strokeMiterLimit: Upper limit of the ratio of slash miter to strokeWidth. If the scale value exceeds this value, instead of showing sharp angles, bevel bevels are displayed. whenstrokeLineJoinProperty set tomiterTo take effect.

fillColor: Fill color;
fillType: Indicates the filling typenonZero,evenOdd;
fillAlpha: filling transparency;
trimPathStart: Snips the ratio from the beginning of the path, leaving the rest,0f->1f;
trimPathEnd: Intercepts the content of the ratio from the starting position of the path, leaving the intercepted content,0f->1f;
trimPathOffset:trimPathStartortrimPathEndThe offset0f->1f;

Such as:

The XML layout is as follows:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
 <path  android:name="triangle"  android:pathData="M3,18 h18 v-5 L3,13 v5"  android:strokeWidth="1"  android:strokeLineJoin="round"  android:strokeAlpha="0.9"  android:strokeColor="@color/white"  android:trimPathStart="0.1"  android:strokeLineCap="round"  android:trimPathOffset="0.15"  /> </vector> Copy the code

PreView looks like this:

`group`The label

A group tag is a combination of multiple PATH tags. A subtag can also be a group tag. Its attributes apply to all subtags and have the following attributes:

nameDefinition:groupLabel name;
translateX: X-axis displacement;
translateY: y axis displacement;
rotation: rotation;
scaleX: X-axis scaling;
scaleY: y axis scaling;
pivotX: Scale and rotate the reference point X;
pivotY: Scale and rotate reference point Y; Chestnut:

XML layout code:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <group  android:name="triangleGroup"  android:rotation="10"  android:translateX="1"  android:translateY="1"  android:scaleX="0.5 f"  android:scaleY="0.5 f"  android:pivotX="0.5"  android:pivotY="0.5">  <path  android:fillColor="@color/colorPrimary"  android:pathData="M6, 6 L9, 12 H3 z"  android:strokeWidth="0.5"  android:strokeColor="@color/white"  android:strokeLineJoin="round" />   <path  android:fillColor="@color/chart_color_1"  android:pathData="12 H15 z M18, 6 L21,"  android:strokeWidth="0.5"  android:strokeColor="@color/white"  android:strokeLineJoin="bevel" />   </group> </vector> Copy the code

Effect:

Vector animation

As long as you are bold, there is no vector graph that can not be achieved, plus a point of animation effect that is more cool hanging. How much do you know about property animation? Good article link ==> : Android properties animation, watch this article enough

“Vector animation steps“

Implement vector graph
Implement property animation
Implement vector properties animation binder
Layout reference, the code begins animation

Path animation

Trajectory animation mainly uses attribute animation to set the trimPathStart or trimPahtEnd attributes of the vector graph. The prerequisite for the correct implementation of trajectory animation is that the vector graph is drawn with one stroke, and there cannot be multiple brush moves.

Example:

Create it in the Drawable foldervector_text.xmlFile:

<? xml version="1.0" encoding="utf-8"? ><vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="240dp"
    android:viewportWidth="24"
 android:viewportHeight="24">   <path  android:name="pathText"  android:pathData="M9,6 L12,12 L15,6.5 18,12 21,6"  android:strokeWidth="0.5"  android:strokeColor="@color/white"  android:strokeLineCap="round"  android:strokeLineJoin="round" /> </vector> Copy the code

Drew a white W:

In 2.animatorCreate a folderanimator_text.xmlFile. Defines a property animation that manipulates vector graphicstrimPathEndProperties.

<? xml version="1.0" encoding="utf-8"? ><set
    xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
 android:duration="2000"  android:propertyName="trimPathEnd"  android:valueFrom="0"  android:valueTo="1"  android:repeatMode="reverse"  android:repeatCount="infinite"  android:valueType="floatType" /> // The color of the vector <objectAnimator  android:duration="2000"  android:propertyName="strokeColor"  android:valueFrom="@color/white"  android:repeatMode="reverse"  android:repeatCount="infinite"  android:valueTo="@android:color/holo_blue_dark"  android:valueType="colorType" />  </set> Copy the code

indrawableCreate a folderanimator_vector_text.xmlFiles, combined vector graphics and property animations, become the glue between the two. Due to compatibility issues, need indrawable-v21Folder created.

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_text">
    <target
        android:name="pathText"
        android:animation="@animator/animator_text" />
</animated-vector> Copy the code

The drawable value of the moving-vector tag is the vector file name defined in the first step. The name attribute of the target tag is defined in the vector diagram; The animation property is the property animation file name defined in the second part.

In the layout in referenceanimator_vector_textfile

    <ImageView
        android:id="@+id/iv"
        app:srcCompat="@drawable/vector_animator_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
Copy the code

Start the animation in code:

    val animatable = iv.drawable as Animatable
    animatable.start()
Copy the code

“Effect:“

Path animation

Path animation is the process of using the same key points in the vector map to change.

Path animation is not supported before Android 5.0.

Example:

Create it in the Drawable foldervector_line.xmlFile:

<? xml version="1.0" encoding="utf-8"? ><vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="240dp"
    android:viewportWidth="24"
 android:viewportHeight="24">   <path  android:name="pathLine"  android:pathData="M9,6 L12,6 L15,6 18,6 21,6"  android:strokeWidth="0.5"  android:strokeColor="@color/white"  android:strokeLineCap="round"  android:strokeLineJoin="round" /> </vector> Copy the code

We defined several key points and drew a line:

In 2.animatorCreate a folderanimator_morphing.xmlFile. Defines a property animation that manipulates vector graphicspathDataProperties.valueFromIs the first step to create a line vector propertypathDataThe value of thevalueToisWThe vector diagram ofpathDataThe value of the.

<? xml version="1.0" encoding="utf-8"? ><set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="2000"
        android:propertyName="pathData"
 android:valueFrom="M9,6 L12,6 L15,6 18,6 21,6"  android:valueTo="M9,6 L12,12 L15,6.5 18,12 21,6"  android:valueType="pathType" /> </set> Copy the code

indrawableCreate a folderanimator_vector_line.xmlFiles, combined vector graphics and property animations, become the glue between the two. Due to compatibility issues, need indrawable-v21Folder created.

<? xml version="1.0" encoding="utf-8"? ><animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_line">
    <target
        android:name="pathLine"
 android:animation="@animator/animator_morphing" /> </animated-vector> Copy the code

In the layout in referenceanimator_vector_textfile

    <ImageView
        android:id="@+id/iv"
        app:srcCompat="@drawable/vector_animator_line"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
Copy the code

Start the animation effect in code:

    val animatable = iv.drawable as Animatable
    animatable.start()
Copy the code

“rendering“

Here is the end, the following is belongs to everyone’s yellow car ~

Everybody’s yellow car

Example demo demo, with 2 hours to give you the production of the yellow car, hope not to abandon:

Create the vertor_bicycle. XML folder under the drawable folder as follows:

<? xml version="1.0" encoding="utf-8"? ><vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="300dp"
    android:height="300dp"
    android:viewportWidth="200"
 android:viewportHeight="200">  <! -- Left wheel --> <group  android:name="leftWheel"  android:pivotX="40"  android:pivotY="70">   <path  android:name="leftWheelAxle"  android:pathData="M 40,70 L23,80M 40,70 L40,50 M 40,70 L57,80"  android:strokeWidth="1"  android:strokeColor="@color/white" />    <path  android:pathData="M 60,70 A 20,20,0,1,1,60,69 z"  android:strokeWidth="1"  android:strokeColor="@color/white" />   </group> <! -- Right wheel --> <group  android:name="rightWheel"  android:pivotX="130"  android:pivotY="70">   <path  android:name="rightWheelAxle"  android:pathData="M 130,70 L113,80 M 130,70 L130,50 M 130,70 L147,80"  android:strokeWidth="1"  android:strokeColor="@color/white" />   <path  android:pathData="M 150,70 A 20,20,0,1,1,150,69 z"  android:strokeWidth="1"  android:strokeColor="@color/white" />  </group> <! -- Car chain box --> <path  android:name="chainBox"  android:fillColor="@color/colorPrimary"  android:pathData="M 35,62 h54 v12 H35 z"  android:strokeWidth="1"  android:strokeColor="@color/white" /> <! - frame - > <path  android:pathData="M 50,69 L 65,40 L 80,69 M 86,65 L110,31 V L130 20, 70"  android:strokeWidth="2"  android:strokeColor="@color/colorPrimary"  android:strokeLineJoin="round" /> <! -- Front wheel baffle --> <path  android:pathData="73 A 20,20,0,1,1,125,85 M105,"  android:strokeWidth="2"  android:strokeColor="@color/colorPrimary"  android:strokeLineJoin="round"  android:trimPathEnd="0.4" /> <! - handlebar - > <path  android:pathData="M 110,31 V20 l-10,-4 h-3 M110,21 l-4,-10 h-3"  android:strokeWidth="2"  android:strokeColor="@color/white"  android:strokeLineCap="round"  android:strokeLineJoin="round" /> <! - car basket -- -- > <path  android:fillColor="@color/white"  android:pathData="M 111,41 h 21 v-12 h 111 z"  android:strokeWidth="1"  android:strokeColor="@color/white"  android:strokeLineCap="square"  android:strokeLineJoin="round" /> <! - the nuggets LOGO -- -- > <path  android:fillColor="@color/colorPrimary"  android:pathData="M 121,30 L122,31 L121,32 L120,31 z"  android:strokeWidth="0.5"  android:strokeColor="@color/colorPrimary"  android:strokeLineCap="square"  android:strokeLineJoin="miter" />  <path  android:pathData="M119, 33 L121, 35, L123, 33M118, 34 L121, 37, L124, 34. ""  android:strokeWidth="0.5"  android:strokeColor="@color/colorPrimary"  android:strokeLineCap="square"  android:strokeLineJoin="miter" /> <! -- -- -- > leather seats <path  android:fillColor="@color/white"  android:pathData="M 55,40 h 20 v-4 H56 v-3h-2"  android:strokeWidth="1"  android:strokeColor="@color/white"  android:strokeLineCap="square"  android:strokeLineJoin="round" /> <! -- Foot pedal --> <group  android:name="pedal"  android:pivotX="82"  android:pivotY="68">  <path  android:pathData="M of 82 L, 98"  android:strokeWidth="0.5"  android:strokeColor="@color/white"  android:strokeLineCap="round" />   <path  android:fillColor="@color/white"  android:pathData="M 96,80 A 2,2,0,1,1,96,81 z"  android:strokeWidth="1"  android:strokeColor="@color/white" />  </group> </vector> Copy the code

“Preview:“

In 2.animatorCreate a folderanimator_wheel.xmlFile to achieve wheel and pedal rotation properties animation:

<? xml version="1.0" encoding="utf-8"? ><set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:interpolator="@android:interpolator/linear"
        android:propertyName="rotation"
 android:repeatCount="infinite"  android:valueType="floatType"  android:valueFrom="0f"  android:valueTo="360f"  android:repeatMode="restart"  android:duration="2000"/> // You can add other animation effects, such as color changes</set> Copy the code

inanimatorCreate a folderanimator_bicycle_left_to_right.xmlLayout file, realize the bike from left to right moving properties animation:

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="translationX"
    android:valueFrom="-600f"
    android:valueTo="900f"
    android:valueType="floatType"
 android:repeatCount="infinite"  android:repeatMode="restart"  android:duration="9000"  android:interpolator="@android:interpolator/linear"  /> Copy the code

indrawableCreate a folderverctor_animator_bicycle.xmlFile, realize bike vector map and property animation glue, that is, the final vector map animation. Need to be created in the drawable-v21 folder due to compatibility issues.

<? xml version="1.0" encoding="utf-8"? ><animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vertor_bicycle">

    <target
 android:animation="@animator/animator_wheel"  android:name="leftWheel"/>   <target  android:animation="@animator/animator_wheel"  android:name="rightWheel"/>   <target  android:animation="@animator/animator_wheel"  android:name="pedal"/> </animated-vector> Copy the code

Reference in the layoutverctor_animator_bicycle.xmlFile,

<? xml version="1.0" encoding="utf-8"? ><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
 android:background="@color/black">   <ImageView  android:id="@+id/iv"  app:srcCompat="@drawable/verctor_animator_bicycle"  android:layout_width="match_parent"  android:layout_height="wrap_content" />   <TextView  android:id="@+id/btnStart"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_alignParentBottom="true"  android:layout_centerHorizontal="true"  android:layout_marginBottom="50dp"  android:background="@color/white"  android:padding="10dp"  android:text="Start"  android:textColor="@color/colorPrimary"  android:textSize="16sp" /> </RelativeLayout> Copy the code

inAppCompatActivityThe code calls:

    btnStart.setOnClickListener {
        val animatable = iv.drawable as Animatable
        animatable.start()
    }
Copy the code

The effect picture at this time:7. Add left-to-right property animation:

    btnStart.setOnClickListener {
        val animatable = iv.drawable as Animatable
        animatable.start()

        val animator = AnimatorInflater.loadAnimator(this, R.animator.animator_bicycle_left_to_right)
 animator.setTarget(iv)  animator.start()  } Copy the code

Effect:

Ok, everyone’s yellow bike has been built, please give the article a like to receive, if not satisfied, you can customize the yellow bike oh ~

“What bike? I just want a thumbs up“

Reference article:

Android property animation, read this article enough

Android transition animation, make APP more vibrant

website

Android 5.0+ Advanced animation development series vector animation

Android Vector has a tortuous road to compatibility

My lot

This article is formatted using MDNICE

Android vector animation: each person will get a gold digger yellow cart

The vector diagram

pathThe label

groupThe label

Vector animation

Path animation

Path animation

Everybody’s yellow car

Related Posts

Bytecode instruction shorthand table

Java Advanced 07, Serialization –Serializable, Parcelable, and Json

[UK] What are the changes in Android Wear 2.0?

`path`The label

`group`The label