[TOC]

Demo Project Download

See the kind of web page like writing animation, feel very fun, find the next production method, is relatively simple, in this record; Take a look at a few images:

Attributes used

Stroke defines the border color value; Stroke-width Defines the stroke width; Stroke-dashoarray The first number represents DASH and the second number represents gap length (writing only a single value means dash/ GAP is the same size), repeating; Stroke-dashoffset Offset length at the beginning of the dotted line, positive numbers are offset forward from the start of the path and negative numbers are offset backward;

The principle of

  1. definestroke-dashoarrayProperty so that the dash and gap lengths of an SVG pattern are greater than or equal to the final pattern length value (denoted as len);
  2. Offset len forward so that dash is initially hidden and shows only gap, which is blank again, so the page starts with nothing;
  3. Define the animation and keep changingstroke-dashoffsetValue until 0, animation appears;

Draw an SVG pattern

The main use is the path tag, which you can see here; For complicated patterns, it is not recommended to write them manually. You can use third-party software, export them to SVG files, and delete useless code, such as Inkscape online editing

Animation to achieve

Animation can be controlled by CSS or JS, CSS is relatively simple, but the length of the pattern and other parameters are not easy to control;

CSS implementation

<style> path { stroke-dasharray: 610; // Solid line - interval length is 610(greater than the drawn length) stroke-dashoffset: 610; Animation: dash 5s Linear; animation: dash 5s Linear; // Add animations that gradually change the offset to 0 to show the full pattern animation-fel-mode: forward; // Define CSS animation,@keyframes yourName @keyframes dash {to {stroke-dashoffset: 0; // define CSS animation,@keyframes yourName @keyframes dash {to {stroke-dashoffset: 0; } } </style>Copy the code

Js control animation

Initialize the related properties

// The code gets the length and sets animation-related properties
var path = document.querySelector('path');
var len = path.getTotalLength();
console.log("Total length:" + len);

// Define the length of the solid line and the blank area
path.style.strokeDasharray = len + 10;
// Define the offset of the initial dash portion relative to the starting point
path.style.strokeDashoffset = len + 10;
Copy the code

Method 1: Use Transition

/ / way 1: refer to the article: https://jakearchibald.com/2013/animated-line-drawing-svg/
path.style.transition = path.style.WebkitTransition =
        'none';
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition =
        'stroke-dashoffset 5s ease-in-out';
path.style.strokeDashoffset = '0';
Copy the code

Method 2: Refresh and redraw periodically

var initial_ts = new Date().getTime();
var duration = 5000;

var draw = function () {
    var progress = (Date.now() - initial_ts) / duration;
    if (progress < 1) {
        path.style.strokeDashoffset = Math.floor(len * (1 - progress));
        setTimeout(draw, 50); }}; draw();Copy the code

Option 3: Use requestAnimationFrame

var initial_ts = new Date().getTime();
var duration = 5000;
var handle = 0;

var animate = function () {
    var progress = (Date.now() - initial_ts) / duration;
    if (progress >= 1) {
        window.cancelAnimationFrame(handle);
    } else {
        path.style.strokeDashoffset = Math.floor(len * (1 - progress));
        handle = window.requestAnimationFrame(animate); }}; animate();Copy the code

Mode 3 depends on the refresh rate of the system. If the FPS drops seriously due to hardware performance problems, serious stuttering may occur

reference

W3C SVG MDN-SVG Painting: Filling, Stroking and Marker Symbols Animated line drawing in SVG