Recently, when introducing background color MP4 animation into homepage animation, the background color of the animation can not be well integrated into different browsers and monitors with the same background color. This embarrassing situation arises as follows:
There is always a root demarcation line at the boundary of the motion picture. Even if the background color is adjusted to fit the boundary, it will always show different degrees of demarcation line in different monitors.
So I decided to code the whole motion picture.
It’s a little hard to make such a set of motion maps, only depending on the front-end attack lion. After all, it needs a lot of drawing of line maps. Without professional UI support, it’s difficult to design standard and beautiful motion maps.
Take the picture I made this time.
The whole system is composed of CSS operation PNG and SVG to build the circulation route
First of all, UI students need to plan the overall layout, distance and material.
Then, according to the overall layout and distance, the material is thrown up.
Most importantlySvg renderingFlow Circuit
This kind of circuit diagram, UI students usually draw the following:
<path class="st0" d="M208,224.6c-0.5,0-1-0.1-1.5-0.4c-0.9-0.5-1.5-1.5-1.5-2.6l-0.6-36.3c0-0.6,0.4-1,1-1c0,0,0,0,0,0 c0.5,0,1,0.4,1,1l0.6,36.3c0,0.5,0.4,0.8,0.5,0.9c0.2,0.1,0.6,0.2,1,0l67.5-40.3c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2,0-0.6-0.5-0.9 l-82.9-49.8c-0.9-0.5-1.5-1.5-1.5-2.6c0-1.1,0.6-2,1.5-2.6l98.5-58.6c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2-0.1-0.6-0.5-0.9l-50-29.2 c-0.9-0.5-1.5-1.5-1.5-2.5c0-1,0.5-2,1.4-2.6l9.4-6c0.5-0.3,1.1-0.2,1.4,0.3s0.2,1.1-0.3,1.4l-9.4,6c-0.4,0.3-0.5,0.7-0.5,0.9 s0.1,0.6,0.5,0.8l50,29.2c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-98.5,58.6c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9 l82.9,49.8c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-67.5,40.3C209.1,224.5,208.5,224.6,208,224.6z"/> <path class="st0" d="M324.9,158.7c-0.2,0-0.4,0-0.5-0.1l-64.2-39.3c-0.9-0.5-1.4-1.5-1.4-2.6c0-1.1,0.5-2,1.5-2.6l99-59.4 c0.4-0.3,0.5-0.7,0.5-0.9s0-0.6-0.5-0.9l-71.3-42.7c-0.5-0.3-0.6-0.9-0.3-1.4s0.9-0.6,1.4-0.3l71.3,42.7c0.9,0.5,1.5,1.5,1.5,2.6 s-0.5,2-1.5,2.6l-99,59.4c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9l64.2,39.3c0.5,0.3,0.6,0.9,0.3,1.4 C325.6,158.6,325.2,158.7,324.9,158.7z"/>
All in all, it’s a long and messy period…
This is because when AI draws svg, each line is composed of two lines and some curved rules (Bessel curve). It is recommended to use the SVG editor given by UI classmates to open it and quote it directly, because “Bessel Curve” is not really free to live in Hold.
Attach the SVG path instruction below
Comparing the above code, we can see that path D is fromM starts as the starting coordinate point of the pathfromZ ends this closed curve。
Lines are drawn by L or L, representing absolute paths and relative paths, respectively.
Curves are drawn by Bessel Curve Rules
C(C x1, y1, x2, y2, x,y )
In order to show Bessel’s meaning more conveniently, the following illustrations are given:
But geese, when they really use instructions to knock on code drawings with their bare hands, they really find that this is a pit…. After all, we still need to measure distance, pixels, find the starting point, the end point, the most headache is to use Bessel to draw the curvature of the broken line… It’s better to learn UI at this time. Of course, we have no right to stop the gods from exploring.
So I stepped on these pits and I used the UI to draw the SVG directly.
- Direct up path
<svg> <path /> <svg>
First of all, it’s certainly possible to draw lines, but our goal is not only to draw lines, but also to add animation effects online.
I use a small gradient flow to represent the flow of data, so first I need to give the line segment–Gradation
In SVG, there are two main types of gradients:
- Linear Gradient
- Radial Gradient
The difference is that:
Radial gradient can be used to define the coordinates and radius of the origin of the gradient center, which is more convenient to add on-line.
<radialGradient cx="194.1" cy="128.9" r="20" gradientUnits="userSpaceOnUse" id="linearGradientCordPath1"> <stop stop-color="#ffff00" offset="0%"></stop> <stop stop-color="#ffff00" offset="25%"></stop> <stop stop-color="#22A1FF" offset="100%"></stop> </radialGradient>
Gradient color ranges can consist of two or more colors. Each color passes through one<stop>Label to specify. The offset attribute is used to define the start and end positions of the gradient. The general effect is as follows:
Then we need to make the gradient color.Move up
<animate attributeName="cx" values="252.3;242.6;292.6;194.1;277;205;205.4;" dur="3s" calcMode="linear" repeatCount="indefinite"></animate> <animate attributeName="cy" values="25;34.1;68.5;128.9;183.9;221.6;184.3;" dur="3s" calcMode="linear" repeatCount="indefinite"></animate>
AttributeName’s attribute names are x-axis and y-axis directions. Values are the coordinate points of each key value passed by. Adobe AI can be used to open SVG on-line and get the coordinates of the key points directly. The coordinates of the key points can be written into CX and cy’s value respectively. Dur time can be adjusted and indefinite cycle can be added: