How to realize the Special effects of text Animation with SVG

In this article Xiaobian for you to introduce in detail "SVG how to achieve text animation special effects", the content is detailed, the steps are clear, the details are handled properly, I hope this "SVG how to achieve text animation special effects" article can help you solve your doubts, the following follow the editor's ideas slowly in depth, together to learn new knowledge.

How to use

To use this SVG text animation effect, you introduce segment.js into the page, which is used to animate SVG paths, d3-ease, easing animated transitions, and letters.js.

HTML structure

You can use a

Containers to wrap text that need to be animated.

Helloweba

Set up and invoke plug-ins

Then we can get this element in JavaScript and animate the drawing text by configuring the parameters. All parameter options (except inpidualDelays) can be set to the following values:

Single value: can be received by all letters.

Array: the first element in the array is received by the first letter, the second element is received by the second letter, and so on.

/ / Select element var el = document.querySelector ('.text')

/ / each option can be defined as a single or an array

Var options = {

Size: 200, / / font size, which determines the height of the text

Px weight: 5, / / bold, px

Rounded: false, / / fillet at the end of the letter

Color: ['# f90'], / / font color

Duration: 1, / / length of animation for each letter (seconds)

Delay: [0,0.1], / / Animation delay between each letter

Fade: 0.5, / / duration of gradual effect (seconds)

Easing: d3_ease.easeCubicInOut.ease, / / buffer animation effect

InpidualDelays: false / / default false. If set to false, the animation effect will be overdisplayed from left to right. In the case of true, the letter animation effect will be displayed synchronously.

Var myText = new Letters (el, options); myText.show ()

With the above configuration, we have defined options for text display and animation, and the plug-in will generate SVG text in the container. By default, text is hidden. Display the animated text by using myText.show (). The plug-in also provides several other methods.

/ / text hiding myText.hide (); / / Toggle text myText.toggle ()

Read here, this "SVG how to achieve text animation special effects" article has been introduced, want to master the knowledge of this article also need everyone to practice and use to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.