SVG practical application: Use Web Animations API to achieve text writing animation effects

SVG practical application: Use Web Animations API to achieve text writing animation effects

One of the major application scenarios of SVG is to achieve stroke animation effects, which can be easily achieved by using the two attributes of stroke-dasharray and stroke-dashoffset , as shown in the following animation effects:

There are also a few articles before that use animation in SVG and CSS3 to achieve this effect. You can go to see SVG path animation (path animation) actual combat applications, etc., this time I will talk about using the new animation of Web Animations API . Method to achieve.

As for the basic usage of the Web Animations API , you can go here to see it, I won't talk about it here.

Not much nonsense, let's take a look at how the animation effect of the writing above is achieved, the effect is directly seen on the codepen.

Code address .

1. in AI and other vector design software, convert the text to outline, and then export it as an SVG file to get the path of the text, as shown below:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 40">
    <title>I dwell in possibility</title>
  <g fill="none" stroke="#000">
     <path d="M20.15 22.62c-3.74-3.67-7.94-9.77-5-15 2.5-3.16 5.88 1.35 5 4.2-.66 5.23-2 11.08-6 14.8-2.95 2.62-8.04.02-7-4 1.15-1.88 3.52-.9 5 0"/>
    <path d="M48.15 21.62c-1.27-5.3-9.5-2.8-9 2.1-.4 4.65 7.2 5.37 8 .9l6-18m-4 12c-.22 2.87-2.37 6.7 0 9 3.02.14 4.57-2.8 6-5"/>
    <path d="M58.15 18.62c-2.7 1.97-4.1 6.13-2 9 2.53.45 4.45-1.22 6-3m2-6c-.45 2.87-3.6 6.56-1 9 4.88.6 7.7-4.72 7-9m0 0c-.08 3.47 2.6 6.87 5.95 4.02l.05-.02"/>
    ...
    <path d="M262.15 22.62c2.5-5.4 1.76-3.03.27 1.18-1.98 3.77 3.02 5.1 5.1 2.44 1.56-1.28 2.53-2.97 3.63-4.62m1-3c-2.4 6.64-4.1 13.56-7 20-3.85 3.06-3.5-3.64-1.62-5.38 3.73-4.66 10-5.83 13.62-10.62"/>
  </g>
</svg>
 

The next step is to use js to implement specific functions. We know that to achieve such a stroke animation effect, we must first obtain the length of the path to set the value of stroke-dasharray and stroke-dashoffset . Then use the animate method in the Web Animations API to set the value of stroke-dashoffset from its length to 0, and the written animation effect will be produced.

Let's implement specific functions below, first some initial settings:

var strokes = [],
paths = document.getElementsByTagName("path"),
j = 0;

for (let i = 0; i < paths.length; i++) {
    strokes[i] = paths[i].getTotalLength();
    paths[i].style.strokeDashoffset = paths[i].getTotalLength();
    paths[i].style.strokeDasharray = paths[i].getTotalLength();
}
 

First get all the paths, and use the getTotalLength() method to get the length of the path, so as to set the value of strokeDashoffset and strokeDasharray for each path .

Then use the animate method provided by Web Animations to dynamically update the value of the strokeDashoffset and strokeDasharray of the path .

function strokeLetter(letter, pathDist) {
         letter.animate([
             { strokeDashoffset: pathDist },
             { strokeDashoffset: '0' }
             ], {
        duration: pathDist * 7,
        fill: 'forwards'
         }).onfinish = function() {
       j++;
             strokeLetter(paths[j], paths[j].getTotalLength());
        }
}
 

From the above code, it can be seen that the properties in the Web Animations method are similar to those in the animation method in CSS3 . In comparison, Web Animations is more flexible and convenient, such as providing callback methods and so on.

Finally, call this method, and the entire written animation is completed.

strokeLetter(paths[0], strokes[0]);