How to Use SVG to generate awesome page preload sketch animation Effects

Online Demo

Local download

1. Introduction to SVG

A Scalable Vector image is based on a scalable Markup Language (subset of a standard universal Markup Language) and is used to describe a two-dimensional vector image format. It is an open standard developed by the World Wide Web alliance.

2. SVG features

Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are:

SVG images can be created and modified in a text editor

SVG images can be searched, indexed, scripted, or compressed

SVG is scalable

SVG images can be printed with high quality at any resolution

SVG can be amplified without decreasing the image quality

3. browser support

Internet Explorer 9, Firefox, opera, chrome, and Safari support inline SVG. Internet Explorer 8 or earlier, you can install Adobe SVG Viewer to support SVG.

4. SVG labels

The SVG code starts with <SVG> elements, including enable tags <SVG> and disable tags </SVG>. This is the root element. The width and height attributes can be used to set the width and height of the SVG document. The version attribute defines the SVG version used, and the xmlns attribute defines the SVG namespace.

5. Use SVG to create a sketch line Animation

1) Draw a sketch line first:

<SVG version = "1.1" xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 200 100"> <! -- Whether the fill attribute is filled with stroke for painting, color # aaaaaa stroke-width is the width of the drawing line. D is the specific data. The data here represents the coordinates, line, and so on, you can use the tool to generate --> <path fill = "NONE" stroke = "# AAA" stroke-width = "2" d = "m62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2-72.9 53.4-116 65-58.9 18.2 191 101 "/> </SVG>

You can use tools to generate sketch line parameters,

Introduction to basic SVG labels of related courses

2) SVG implements sketch animation and Its Principle

stroke-dasharray = "100 10"  stroke-dashoffset = "0"

Stroke-dasharray defines the length of the generated line segment, and the gap between the line segment and the line segment. Here there are two parameters

Stroke-dashoffset defines the position where the rendering starts to generate a line segment.

The sketch animation simulation effect and its principle of SVG implementation in related courses

3) Use css3 to achieve sketch animation effect

/* Define the keyframe animation * // * Add the animation to the path element */. path {stroke-dasharray: 265.07; stroke-dashoffset: 265.07; Animation: dash 3 s linear infinite;/* supports chrome */-WebKit-Animation: dash 3 s linear infinite ;} @ keyframes dash {from {stroke-dashoffset: 265.07;/* here is the sketch line length in the SVG image. You can use js to get */} to {stroke-dashoffset: 0 ;}} /* supports the Chrome browser */@-WebKit-keyframes dash {from {stroke-dashoffset: 265.07;/* the length of the sketch line in the SVG image, you can use js to obtain */} to {stroke-dashoffset: 0 ;}}

Use css3 for sketch animation in related courses

4) Adjust the animation effect parameters using JavaScript

/* Define related JavaScript */var current_frame, // define the total_frames of the current frame, // define the path of all frames, // define the length of the unique path element in SVG, // define the sketch length handle generated by path; // define the Javascript animation handle Path = document. getelementbyid ('path'), length = path. gettotallength (); // defines the initialization method var init = function () {current_frame = 0; total_frames = 160; Path. style. strokedasharray = Length + ''+ length; // defines the dasharray path. style. strokedashoffset = length; // defines dashoffset handle = 0;} // defines the actual animation Rendering Method var draw = function () {var progress = current_frame/total_frames; if (Progress> 1) {// The animation window is defined here. cancelanimationframe (handle);} else {// otherwise, use reqeuestanimationframe to generate the animation current_frame ++; Path. style. strokedashoffset = math. floor (length * (1-Progress); handle = Window. requestanimationframe (draw) ;}// define a re-run method var rerun = function () {Init (); Draw () ;}// run rerun () upon page loading ();

Here we mainly define the initialization method and animation rendering method, window. requestanimationframe (draw );

To generate an animation.

Related courses use JavaScript For sketch animation

5) we use the geek label logo as the original image, and use the inkscape tool to generate the coordinate parameters.

When you run the animation rendering program, you can install and set various lines to draw the program. We can see a very cool pre-loaded animation.

For the complete effect, visit the light Video Course: use JavaScript to generate a sketch animation of the geek tag logo

How to Use SVG to generate awesome page preload sketch animation Effects