[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
- define
stroke-dashoarray
Property 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); - Offset len forward so that dash is initially hidden and shows only gap, which is blank again, so the page starts with nothing;
- Define the animation and keep changing
stroke-dashoffset
Value 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