First understanding of vector diagram (asking questions)

Early years to contact vector animation (one of the new features of android5.0), but has not been used, every time do need to rush, TAB icon click effect directly switch two pictures, finally one day, PM is not busy, began to start on the UI, said TAB switching effect to change ah, change to be the same as some east.

Something like this:




A burst of ecstasy, this is the best use of vector map scene, vector map trajectory animation ah.

I immediately went to the blog to read the article about vector animation, learned that UX can provide icon SVG, get path from SVG, after half a day’s effort, wait for SVG, import online SVG edit, view path and import it directly into our vector

SVG is pretty cool, except the yellow line on the right says “Very long vector Path”

Try using trajectory animation, overturned car!!

If UX doesn’t make a mistake, then the SVG editing tool has identified a problem, but whoever the problem is, we decided to give up using SVG for the following reasons:

1. The path identified by SVG is too long.

2. The trajectory animation done with it does not meet the UI requirements.

3. It is also too troublesome to modify the path based on SVG. There are so many decimal places and they are all relative paths, so it is difficult to calculate the modification.

Let’s design our own vector graphics and get ux out of the way.

Ii. Vector animation (Analysis problems)

Vector animation is vector + animation = (Animated -vector).

To construct a Vector graph, encapsulated by a Vector, you need to know the syntax of the path path.

Animation: XML animation design, not the same as the old ones, here is also the property animation.

Path Syntax of a Path

Based on the current experience: all capital letters are absolute coordinates, all lowercase are relative coordinates.

M: moveTo moves to absolute coordinates (60,80) like android path Api code

V/H can be lineTo the point (29,40) without using L29,40 from other points

You can draw both ellipses and circles

Example: M50,30 A25, 30-100 0,0 50,75

A represents the arc, 25 and 30 represent the lengths of the two half-axes of the ellipse (equal to draw A circle, i.e. radius of the circle).

-100 is the Angle of rotation of the ellipse relative to the coordinate system, not radians but degrees. (For a circle, no matter how many degrees you rotate it, it doesn’t change.)

0,0 is the mark to draw the large arc (1) or small arc (0) part + mark to draw clockwise (1) or counterclockwise (0) direction. 50,75 are the coordinates of the end of the arc.

Second order Bessel: denoted by Q, an equal ratio relationship needs to be satisfied, and all F points satisfying the condition form a Bessel curve.

Practice: Use the second-order Bezier curve to make the four rounded corners of the rounded rectangle.


These points are characteristic:














Other cases are calculated based on these values: The lower left, when the graph is a rectangle, the coordinate of the lower left (base point) is (15,65). Then, based on the situation in the upper left, calculate the control point x of the second-order curve, and the difference of y is 1. It should be (16,64), why not (16,66). The calculation of point A and C is also based on the base point, with A difference of 8. Point A can easily be obtained as (23,65) and point C (15,57). The other ones, upper right, lower right, similar, can be calculated exactly this way.

The first vector animation (problem solving)

  • 3.1. Draw the vector map of the cabin

    • 3.1.1. Draw the cabin

Android :pathData=”M55,85 L22,85 22,50 A3, 3-1 0,1 14,43 L42,15 Q50,6 58,15 L86,43 A3, 3-1 0,1 78,50 L78,85 70,85″

M55,85, our canvas (android:viewportWidth=”100″ android:viewportHeight=”100″) is 100*100, first mark this starting point (55,85), easy, L22,85, 22,50, The following 22,55 does not have an English letter, in AS default is L, direct line. 22,50 A3, 3-1 0,1, 14,43 contains A to draw the arc, the two points of the arc (22,50) (14,43), you ask me why the radius is 3,3, I can only tell you, this is based on the preview debugging in AS, -1, 0,1 need not explain. L42,15, Q50, 658,15, the vertex of the cabin is a second-order Bezier curve, the left-right symmetric Bezier curve is the simplest, the right-hand arc, calculated by referring to the points of the left-hand arc. The last dot is connected.

    • 3.1.2 draw the small arc in the middle

    Android :pathData=”M41 60 Q50,72 59,60″

    • 3.1.3 draw solid color gradient ball

Gradient, vectorDrawable, is an example of this on the Developer website.

  • 3.2 animation processing

Animation requirements: draw the path of the cabin, but also draw the middle arc, and so they draw the end of the ball, do right down to the top left, and then left to the bottom right animation.

Trajectory animation is actually using the trimPathEnd property, how many properties of a VectorDrawable? You can view the document by yourself

Q: The difference between group and path in animated-vector.

A group can wrap a group or a path. A group is more like a parent of a path, so it is isolated from other paths. The group is responsible for the zooming, panning, and rotation animation of the path. The transparency animation is not controlled by the group, but by the Path itself, as determined by their apis.

Focus on transparency animation: If you want to hide an icon, set strokeAlpha or fillAlpha to 0, strokeAlpha if you stroke, and fillAlpha if you fill. To display, use animation, duration 1:

<target android:name="bubble">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="1"
                android:propertyName="fillAlpha"
                android:startOffset="400"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
Copy the code

Trajectory animation android:trimPathEnd is clipping from the end, Android :trimPathStart clipping from the beginning.

<target android:name="rect_11_path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="400"
                android:interpolator="@android:interpolator/accelerate_decelerate"
                android:propertyName="trimPathEnd"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
Copy the code

Four, the actual combat encountered pit

Q. TranslationX is not supported for FullPath.

The problem is that translationX is not a path animation, it is a group animation. Wrap the path with a group and animate the group with a translationX animation.

Q. Compile appear under Caused by: org. Gradle. API. GradleException: Can’t process attribute android:strokeColor=”@color/color_home_select”: references to other resources are not supported by build-time PNG generation.

The above problem occurs when we compile the vector by referencing the color attribute values/colors

 android:strokeColor="@color/color_home_select"
Copy the code

Then change it to a specific color value #198CFE

 android:strokeColor="#198CFE"
Copy the code

Q. There was no error when running, but the gradient of the ball could not be displayed. The gradient was also written in accordance with the official document, but it could not be displayed.

That’s because your Gradle is too low

    classpath 'com. Android. Tools. Build: gradle: 3.0.1'
    distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
Copy the code

Change to the following:

    classpath 'com. Android. Tools. Build: gradle: 3.2.1'
    distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip
Copy the code

VectorDrawableDemo

VectorDrawableDemo