Android L New API verctor animation 1--svg Path

Import

1, Vectordrawable is a new API in Android L, allowing you to create XML-based vectors and combine animatedvectordrawable for animation effects.

2, Android l new support vector tag, you can use path to create animation, while supporting the SVG format.

About SVG
1. SVG refers to scalable vector graphics (Scalable vector graphic)
2. SVG is used to define vector-based graphics for the network
3. SVG uses XML format to define graphics
4, SVG image in the case of enlarged or changed the size of its graphics quality will not be lost
5, SVG is the World Wide Web Alliance standard
6, SVG and such as the DOM and XSL, such as the standard is a whole

Combined with Android, this session explains the path tag in SVG

<Path>

1. When using the path tag, it is like using instructions to control a brush, for example: Move the brush to a coordinate position, draw a line, draw a curve, end

2. Path properties

3. D attribute

There is a very important attribute ' D ' in the path label. The ' D ' property is a string that describes the path location and shape to be created. The ' D ' attribute contains multiple sequential instructions, such as move (moving), draw lines, draw curves, and draw arcs and curves, and so on. Each instruction is a letter followed by a parameter.

<Path> directives

1. Supported directives:

m = MoveTo (m x, y): Moves the 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): Draws a vertical line to the specified Y-coordinate position
c = Curveto (c x1,y1,x2,y2,endx,endy): Three-time beta curve
s = Smooth Curveto (s X2,y2,endx,endy)
Q = Quadratic belzier curve (q X,y,endx,endy): Two-time beta curve
t = smooth quadratic belzier curveto (t endx,endy): Map
A = Elliptical arc (a rx,ry,xrotation,flag1,flag2,x,y): Arc
Z = Closepath (): Close path

2, the use of the principle:

The ① axis is centered on (0,0), the x-axis is horizontal to the right, and the y-axis is horizontally downward.
② All instructions are case-sensitive. Uppercase absolute positioning, reference global coordinate system, lowercase relative positioning, reference parent container coordinate system
③ the space between the instruction and the data can be omitted
④ the same instruction appears multiple times can use only one

Note that the ' M ' process, just moved the brush, no painting anything. It is also possible to draw discontinuous lines at the same time on the back.

3. Detailed instruction Analysis

3.1, L H v instruction

The instruction for drawing a line is "L", from the current dot to the given point. The parameter after "L" is a point coordinate, such as "L 200 400". If you draw horizontal or vertical lines, you can use the "H" and "V" directives, followed by an X (H instruction) or y-coordinate (V-directive).

M start x, start y L (straight) end x, end y H (horizontal line) end x V (vertical) End Y

such as: M 10,20 L 80,50 m 10,20 V m 10,20 H 90

3.2. a directive

Allow not to be closed. Can be imagined as a section of an ellipse, with a total of seven parameters:

A Rx,ry,xrotation,flag1,flag2,x,y


Rx,ry refers to the half-axis size of the ellipse
Xrotation refers to the x-axis of the ellipse and the horizontal direction of the clockwise angle, you can imagine a horizontal ellipse around the center point clockwise rotation xrotation angle.
The FLAG1 has only two values, 1 represents a large angle arc, and 0 is a small angle arc.
FLAG2 has only two values, determines the direction from start to end, 1 is clockwise, and 0 is counterclockwise
X, y is the end coordinate


such as: M 200,250 a 150,30 0 1 0 0,70

SVG editor

SVG parameters are fixed, so you can use the program to implement, and the syntax is complex, so, generally through the SVG editor to edit

There are many online, here is a http://editor.method.ac/

You can generate code directly after editing.

Here's an introduction to SVG, which explains how to use SVG in Android and create a path animation effect.

Above.

Android L New API verctor animation 1--svg Path