This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Series of articles

Android uses SVG for animation

preface

In the previous article, I realized the effect of line animation with drawLine, then I looked at TrimPathStart/End under the introduction of the big guy, and I felt I needed to write an article.

The following is the main content of this article

First, look at a simple SVG diagram in Android

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="200"
    android:viewportHeight="200">

  <path
      android:name="start"
      android:pathData="M100 4 l-100 192 l192 0 z"
      android:strokeWidth="3"
      android:strokeColor="#a2d7dc"/>

</vector>

Copy the code

General animation effect (animation execution, in reverse order of drawing)

2. Definition of parameters in PathData (how triangles are drawn)

Parameter definition: The command in uppercase is the absolute coordinate command. Lowercase commands are relative coordinate commands

• The M=moveto command M or M moves to a new position
• Z=closepath run the Z or Z command to close the path
• L=lineto command L or L to draw a line from the current position to the specified position
• Horizontal lineto command H or H to draw a line horizontally to a specified position
• V=vertical lineto Run V or V to draw a straight line vertically to the specified position
• Quadratic Bezier curve command Q or Q, Bezier curve
• T=smooth quadratic Bezier curveto Command T smooth quadratic Bezier curve
• A= Octagonal arc command A Octagonal arc SEg

1. Interpretation of Demo drawing triangle:

The code is as follows:

 android:pathData="M100 4 l-100 192 l192 0 z"
 // For the sake of explanation
  android:pathData="M100 4 l-100 192 l192 0 l-92,-194"
Copy the code

M100 4: the starting point is 100,4 (x is 100, y is 4).

The l-100 192: L command is to draw a line from the current position to the specified position, where -100 is the decrease, counting 100-100 from the initial value,4+192, and the second point is 0,196 (x is 0, y is 196).

L192 0: same as above, calculate 0+192,196+0 from the previous point, the third point is 192,196 (x is 192, y is 196).

L-92,-194: Go back to the origin.

Actual drawing effect:

Three, the realization of animation effect

• Add support for vectorDrawables in Bulid. gradle(Module:app).

    defaultConfig {
        ...........
        // Added support for vectorDrawables
        vectorDrawables.useSupportLibrary = true

    }
Copy the code

2. SVG diagram drawn by the above steps:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="200"
android:viewportHeight="200">

<path
    android:name="start"
    android:pathData="M100 4 l-100 192 l192 0 l-92,-194"
    android:strokeWidth="3"
    android:strokeColor="#a2d7dc"/>

</vector>
Copy the code

3. Create an animator folder under the RES folder to save the animation file

Animation file code (this relatively simple will not be introduced).

      
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:propertyName="trimPathStart"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType">
</objectAnimator>
Copy the code

4. Create a new file under the Drawable folder to associate SVG with the animation

      
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/ your SVG name">
    <target
        android:animation="@animator/ Name of your animation"
        android:name="start"></target>
</animated-vector>
Copy the code

5. Reference the file from step 4 in ImageView

    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        app:srcCompat="@drawable/taiji_anim" />
Copy the code

Remember in root layout plus: XMLNS: app = “schemas.android.com/apk/res-aut…”

6. Start the animation in the Activity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView anim_path;

    private Drawable drawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        anim_path = (ImageView) findViewById(R.id.iv);
        anim_path.setOnClickListener(this);

}

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.iv:
                startAnim(anim_path);
                break; }}/** * Start animation **@param iv
     */
    private void startAnim(ImageView iv) {
        drawable = iv.getDrawable();
        if (drawable instanceofAnimatable) { ((Animatable) drawable).start(); }}}Copy the code

7. Achieve results

Fourth, expand tools

SVG download: Ali Gallery

SVG is converted to VectorDrawable tools: inloop. Making. IO/svg2android…