How to use SVG to generate a cool page preloading sketch animation effect_html/css_WEB-ITnose

Online Demo

Local Download

1 Introduction to SVG

Scalable Vector Graphics It is a graphics format based on Extensible Markup Language (a subset of Standard Universal Markup Language) for describing two-dimensional vector graphics. It is developed by the World Wide Web Consortium and is an open standard.

2 Features of SVG

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

SVG images can be created through a text editor and modify

SVG images can be searched, indexed, scripted or compressed

SVG is scalable

SVG images can be produced at any resolution with high quality Print

SVG can be enlarged without loss of image quality

3 browser support

Internet Explorer 9, Firefox, Opera, Chrome And Safari supports inline SVG. Internet Explorer 8 or earlier can support SVG by installing Adobe SVG Viewer.

4 SVG tags

SVG code starts with the

5 SVG example of making sketch line animation

1) First draw a sketch line as shown in the picture:

     <svg version="1.1"    xmlns="http://www.w3.org/2000/svg"    viewBox = "0 0 200 100">    <!--    fill属性是否填充    stroke为绘制，颜色#AAAAAA    stroke-width为绘制线的粗细    d是具体数据，这里看到的数据代表了坐标，以及折线等等，可以使用工具生成    -->    <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-58.9 65-18.2 191 101 215"    />    </svg>

The parameters of the sketch line can be generated using tools,

Introduction to basic SVG tags in related courses

2) Animation and principles of SVG sketch

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. It contains two parameters

stroke-dashoffset defines the distance from that line segment. The position starts rendering to generate a line segment

Related courses Sketch animation simulation effect and its principle realized by SVG

3) Use CSS3 to realize sketch animation effect

     /*定义keyframe动画*/    /* 添加动画到path元素 */    .path{    stroke-dasharray: 265.07;    stroke-dashoffset: 265.07;    animation: dash 3s linear infinite;    /* 支持chrome */    -webkit-animation: dash 3s linear infinite;    }    @keyframes dash{    from{    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */    }    to{    stroke-dashoffset: 0;    }    }    /* 支持chrome浏览器 */    @-webkit-keyframes dash{    from{    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */    }    to{    stroke-dashoffset: 0;    }    }

Related courses use CSS3 to achieve sketch animation effects

4) Use Javascript to adjust the parameters of animation effects

     /*定义相关Javascript*/    var current_frame, //定义当前帧    total_frames, //定义全部帧数    path, //定义svg中的唯一path元素    length, //定义path所生成的素描长度    handle; //定义javascript动画句柄    path = document.getElementById('path'),    length = path.getTotalLength();    //定义初始化方法    var init = function(){    current_frame = 0;    total_frames = 160;    path.style.strokeDasharray = length + ' ' + length; //定义dasharray    path.style.strokeDashoffset = length; //定义dashoffset    handle = 0;    }    //定义实际的动画绘制方法    var draw = function(){    var progress = current_frame/total_frames;    if(progress>1){ //这里定义完成动画    window.cancelAnimationFrame(handle);    }else{//否则使用reqeuestAnimationFrame来生成动画    current_frame++;    path.style.strokeDashoffset = Math.floor(length*(1 - progress));    handle = window.requestAnimationFrame(draw);    }    }    //定义一个重新运行方法    var rerun = function(){    init();    draw();    }    //页面加载即运行    rerun();

Here are the main Define the initialization method and animation drawing method, window.requestAnimationFrame(draw);

to generate animation.

Related courses Use Javascript to achieve sketch animation effects

5) We choose the logo of the Geek tag as the original image, and the coordinate parameters are generated with the Inkscape tool.

When running the animation drawing program, each line is drawn in the set way, and we will see a very cool preloaded animation.

To see the full effect, please visit the light video course: Use javascript to generate the sketch animation effect of the geek tag logo