Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

introduce

This issue to introduce a very practical and powerful animation library – Mo.js, although it is an English document, but the wine is not afraid of alley deep, we are still shocked by his powerful ability. It is a dynamic graphical toolset for the Web with a simple declarative API, cross-device compatibility, and over 1500 unit tests. You can move the graphics you create around the DOME or SVG DOME or create unique mo.js objects.

Today we will use it to test the water of an avocado SVG path animation, because often many display pages will have a large number of path animation requirements, and it is difficult to control. Specially arranged this case, to reduce the burden of everyone to the peak of life ~

As time goes by, we’ll draw and fill in the avocado bit by bit, and then we’ll implement it to see how powerful Mo.js is.

The body of the

1. Basic structure

<style>
	html.body.#app {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #E1F3D0;
    }

    #svg {
        height: 80%;
    }
</style>

<body>
    <div id="app">
        <svg>
            <! -- svg path -->
            <! -... -->
            <! -... -->
            <! -... -->
            <! -- svg path -->
        </svg>
    </div>
    <script src="./node_modules/@mojs/core/dist/mo.umd.js"></script>
    <script src="./node_modules/@mojs/player/build/mojs-player.min.js"></script>
    <script src="./app.js"></script>
</body>
Copy the code

That’s the structure. Let’s take an SVG image and put it in the main container app. In addition, we have introduced two libraries, as the name implies. The first is the mo.js main library, which contains mo.js animation capabilities. And moJs-playerJS can be understood as the console of the player, which can be used according to the moJS object as a video, and can adjust the speed, whether to loop, playing position and other operations.

2. Pick the SVG image

There are many SVG resource websites, and ali’s iconfont is mainly used here. Find the material, download the SVG source, and put it in HTML.

Now that the SVG is displayed, we will animate it through the path.

3. Path animation

Before we animate the path, we need to collect information about the path:

/*app.js*/
let whiteColor = "white";
let path = document.querySelectorAll('path');
let fillData = [];
let strokeColorData = [];
let strokeWidthData = [];

Array.from(path).forEach(item= > {
    let fillColor = item.getAttribute("fill")
    fillData.push({
        "none": fillColor|| whiteColor
    })
    strokeWidthData.push(fillColor ? 0.5: 1)
    strokeColorData.push(fillColor|| whiteColor)
});
Copy the code

We get all the paths in SVG and get the fill color on the path. At the same time, we store fillData, line segment width data strokeWidthData, line segment color data strokeColorData.

Next, we use mo.js to make SVG walk and walk based on path data

/*app.js*/
const HtmlStagger = mojs.stagger(mojs.Html);
let avocado = new HtmlStagger({
    el: path,
    fill: fillData,
    stroke: strokeColorData,
    strokeWidth: strokeWidthData,
    strokeDasharray: '3000'.strokeDashoffset: { '3000': '0' },
    duration: 8000.delay: 'stagger(500)'});Copy the code

We instantiate an HtmlStagger object, which is the avocado graphic. Put the data you just got on it. Then set strokeDasharray to strokeDashoffset, which is basically setting the stroke-Dasharray for SVG. See Stroke-Dasharray. We can use these two properties with CSS3 animation can also achieve SVG path animation, but complex animation control is a chicken. That’s why we have these animation libraries.

Of course, if you want to play, you can use the: Play method.

avocado.play();
Copy the code

In this way, our path animation is so simple to complete, the heart is not countless questions: this? Is this it? Is this it??

4. Animation player

Although we can play it, we will also want to see the animation change clear and make some details for it during development. So, we introduced mo.js animation player. In the infrastructure we have introduced it, now let’s remove the play method and use the player to control it.

// avocado.play()
new MojsPlayer({
    add: avocado,
    isRepeat: false.isPlaying: false.isSaveState: false
})
Copy the code

Here we have the perfect control for the desired avocado path animation, see Mojs-Player.

  • Add: Adds a graph
  • IsRepeat: indicates whether to repeat
  • IsPlaying: Indicates whether to play
  • IsSaveState: Whether the state should be preserved when the page reloads

We write here, want to write already completed, fry chicken convenient have!! The online demo

expand

Mo.js SVG is only the tip of the iceberg. It can also do a large number of graphic animation and text animation, as well as curve editor and timeline tools to assist, and can easily complete most of the animation of business scenes. Let’s explore