Vectors (2): Drawing Graceful Path animations

Welcome to follow my GitHub and follow my csdn.

ERA in the development of technology in progress, the era of Android vector images has arrived. In Google's latest support library v23.2, the AppCompat class already uses vector imagery, which reduces the AAR package by 9% to about 70KB, benefiting all high-version applications. Of course we can also use vector, slimming applications. Vector images are the SVG format in the form of Android. SVG image to adapt to the screen, the picture is small, there are many advantages, reference.

The analysis of vectors is divided into two main sections:
(1) Using SVG image slimming application, reference.
(2) Draw beautiful path animation, reference.

This article is the second section, about vector animation.

SDK Manager prompts support for library updates

There are three main parts of vector animation: vector image, path animation, Animated-vector image.

This is the source of GitHub.

Animation

1. Vector images

SVG format images, converted to vector image resources, you can use the AS2.0 conversion tool, can also be an online conversion tool, reference. The image requires a path style for easy drawing, such as

<vector  xmlns:android         = "http://schemas.android.com/apk/res/android"  android:width  = "256DP"  android:height  =" 256DP "  Android:viewportheight  = "
      
        class= hljs-attribute ">android": Viewportwidth 
       = "" ";     <pathandroid:name="Heart1"android:pathdata="..."  Android:strokecolor="#E91E63"android:strokewidth="1"/>                                    <pathandroid:name="Heart2"android:pathdata="..."  Android:strokecolor="#E91E63"android:strokewidth="1"/>                                 </vector>

2. Path animation

Use property animations to control the drawing state.

<?xml version="1.0" encoding="utf-8"?><objectAnimator    xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="6000"    android:propertyName="trimPathEnd"    android:valueFrom="0"    android:valueTo="1"    android:valueType="floatType"/>

The Trimpathend property of the Objectanimator determines the number of paths to draw, and the remainder is not plotted, and its value range is 0 to 1. The Duration property represents the duration, 6000 that is 6 seconds.

3. Animated-vector image

The path of the vector image is applied to the path animation (Objectanimator), which controls the drawing.

<animated-vector    xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/v_heard">    <target        android:name="heart1"        android:animation="@animator/heart_animator"/>    <target        android:name="heart2"        android:animation="@animator/heart_animator"/>    ...</animated-vector>

4. Display animations

Android 5.0 (21) or later is required to use vector animations, the animatedvectordrawable class.

    // 只支持5.0以上.    privatevoidanimateImage() {        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {            // 获取动画效果            AnimatedVectorDrawable mAnimatedVectorDrawable = (AnimatedVectorDrawable)                    ContextCompat.getDrawable(getApplication(), R.drawable.v_heard_animation);            mIvImageView.setImageDrawable(mAnimatedVectorDrawable);            ifnull) {                mAnimatedVectorDrawable.start();            }        }    }

The Start method of Animatedvectordrawable is the animated start function.

Using vector animations to save application resources than GIF animations can give users a better experience. Recommend an interesting SVG library.

This address: http://blog.csdn.net/caroline_wendy/article/details/50824624

OK, that ' s all! Enjoy it!

Vectors (2): Drawing Graceful Path animations