Android L New API Verctor Animation 1 -- SVG Path,

Android L New API Verctor Animation 1 -- SVG Path,
Import

1. VectorDrawable is an API added in Android L. It allows you to create XML-based vector graphs and use AnimatedVectorDrawable to achieve animation effects.

2. Android L supports Vector tags, allows you to use Path to create animations, and supports SVG format.

Introduction to SVG
1. SVG refers to Scalable Vector Graphics)
2. SVG is used to define vector-based images for Networks
3. SVG defines images in XML format
4. There is no loss in the image quality of SVG images when they are enlarged or changed.
5. SVG is the standard of the World Wide Web Alliance
6. SVG is integrated with W3C standards such as DOM and XSL.

In combination with Android, this article describes the path tag in SVG.

<Path>

1. When the path label is used, it is like using commands to control a paint brush. For example, moving the paint brush to a Coordinate Position draws a line, draws a curve, and ends.

2. path attributes

D = "path data" coordinate pathLength = "<number>" path length

3. D attributes

The path tag has a very important attribute 'D '. The 'd' attribute is a string that describes the path location and shape to be created. The 'd' attribute contains multiple consecutive commands, such as moving, drawing lines, drawing curves, and drawing arcs and curves. Each Command is a letter followed by a parameter.

<Path> command

1. Supported commands:

M = moveto (m x, Y): Move the paint brush to the specified coordinate position.
L = lineto (l x, Y): draws a straight line to the specified Coordinate Position
H = horizontal lineto (h x): draws a horizontal line to the specified X coordinate position
V = vertical lineto (v y): Draw a vertical line to the specified Y coordinate position
C = curveto (C X1, Y1, X2, Y2, ENDX, ENDY): three-time contest Curve
S = smooth curveto (S X2, Y2, ENDX, ENDY)
Q = quadratic belgiscurve (q x, Y, ENDX, ENDY): Second Betas curve
T = smooth quadratic beltillercurveto (t endx, ENDY): ing
A = elliptical Arc (a rx, RY, XROTATION, FLAG1, FLAG2, X, Y): Arc
Z = closepath (): Close the path

2. Usage principles:

① The coordinate axis is centered on (0, 0), the X axis is horizontal to the right, and the Y axis is horizontal downward.
② All commands are case sensitive. Absolute upper-case positioning, with reference to the global coordinate system; relative lower-case positioning, with reference to the parent container Coordinate System
③ Spaces between commands and data can be omitted
④ One command can be used for multiple times

Note that when 'M' is processed, it only moves the paint brush and does not draw anything. It can also draw non-consecutive lines at the same time.

3. Detailed instruction Analysis

3.1. l h v command

The command to draw a straight line is "L", from the current dot to the given point. The parameter after "L" is a coordinate, such as "L 200 400 ". If you draw a horizontal or vertical line, you can use the "H" and "V" commands, followed by the x (H command) or y coordinate (V command ).

M start point X, start point y l (straight line) end point X, end point y h (horizontal line) end point x v (vertical line) End Point Y

For example, M 10, 20 L 80, 50 M 10, 20 V 50 M 10, 20 H 90

3.2. A command

Do not close. It can be imagined as a certain segment of an elliptic, with a total of seven parameters:

A rx, RY, XROTATION, FLAG1, FLAG2, X, Y


RX, RY refers to the half axis of the elliptic
XROTATION refers to the angle between the X axis and the clockwise direction of the horizontal direction of the elliptic. It can be imagined that a horizontal elliptic rotates the XROTATION angle clockwise around the center point.
FLAG1 has only two values. 1 indicates a large angle arc, and 0 indicates a small angle arc.
FLAG2 has only two values. It is determined from the start point to the end point. 1 is clockwise and 0 is counter-clockwise.
X and Y are the terminal coordinates.


For example, m 200,250 a, 30 0 1 0 0, 70

SVG Editor

SVG parameters are fixed in writing, so they can be fully implemented using programs and are complex in writing. Therefore, they are generally edited using the SVG editor.

There are a lot of online, here provides a http://editor.method.ac/

Code can be directly generated after editing.

The following describes how to use SVG in Android and create path animation effects.

Above.