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 introduces you to a very useful animation library, Animo.js, which has a simple and powerful API. Animate CSS properties, SVG, DOM, and JavaScript objects. It’s the work of Julian Garnier, the French god.

Of course, it’s hard to know how good he is without trying to write about it. So today we specially use it to complete a dragon Ball in the combat detector animation effect.

In this case we didn’t use any CSS animations, but all animo.js. That’s interesting. Now, let’s do it.

The body of the

Let’s break down this animation first:

  • Ring loading animation
  • Battle power rise animation
  • Pointer to the animation
  • Columnar data animation

It is not difficult to see that our entire combat detection animation is composed of these four small animations. Therefore, we will only focus on these four animations.

1. Infrastructure

We first use Vite to build, and then use module mode to facilitate module introduction.

<div id="app">
    <div class="hero">
        <div class="detector">
            <! -- Ring loading -->
            <div class="wait">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
                        
            <div class="content">
                <! -- Combat effectiveness -->
                <h5 class="power">5</h5>
                 <! - pointer -- -- >
                <div class="pointer"></div>
                 <! Columnar data -->
                <ul class="chart">
                    <li style="--i:0; --w:50px;"></li>
                    <li style="--i:1; --w:20px;"></li>
                    <li style="--i:2; --w:40px;"></li>
                    <li style="--i:3; --w:80px;"></li>
                    <li style="--i:4; --w:70px;"></li>
                </ul>
            </div>
           
        </div>
    </div>
</div>
<script type="module" src="./app.js"></script>
Copy the code

Here, write the relevant animation structure. To write the CSS. These styles are too simple and not the point of this tutorial so I’ll skip them and jump right into the code.

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

.hero {
    position: absolute;
    max-width: 597px;
    width: 100%;
    height: 352px;
    background: url("./image/hero.jpeg") center no-repeat;
    background-size: cover;
    cursor: pointer;
}

.detector {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(116.250.116.0.5);
}

.pointer {
    width: 0;
    height: 0;
    position: absolute;
    border-width: 25px 20px;
    left: calc(100% / 2 - 20px);
    bottom: 5%;
    border-style: solid;
    border-color: transparent transparent rgb(255.205.66.9) transparent;
}

.power {
    position: absolute;
    text-align: center;
    font-size: 2.7 em;
    color: rgb(255.205.66.9);
    box-sizing: border-box;
    font-family: fantasy, serif;
    padding:.3em .5em;
    font-weight: bold;
    letter-spacing:.07em;
}

.chart {
    position: absolute;
    right: 20px;
    top: 5%;
}

.chart>li {
    position: absolute;
    top: calc(var(--i) * 22px);
    right: 0;
    height: 12px;
    background-color: rgb(255.205.66.7);
    width: var(--w);
}

.wait>div {
    border: 2px solid rgb(255.205.66.7);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    box-shadow: 0 0 10px rgb(255.205.66.4);
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}
Copy the code

Now that we have a specific interface style, let’s try to make it work

2. How to use Animejs

We have to install it before we can use it

npm install animejs 
/ / or
yarn add animejs
Copy the code

And then it’s introduced in the master logic

/* app.js */
import anime from "animejs";

; (function () {

    let $detector = document.querySelector(".detector")
    let $content = $detector.querySelector(".content")
    $detector.style.display = $content.style.display = "none";
    
    document.querySelector(".hero").addEventListener("click", openDetector, false)
    
    function openDetector() {
        // Turn on the force detector
        $detector.style.display = "block";
        document.querySelector(".hero").removeEventListener("click", openDetector)
        // ...
    }
    
    function playAnime() {
        // Probe data animation
    }
})();    
Copy the code

Let’s write the general process first, which is to hide all the styles at the beginning, and then trigger the opening of openDetector after clicking the interface

War force detector, play the animation of ring loading, war force change and so on.

3. Ring loading

We are now officially going to use anime

let waitAnime = anime({
    targets: '.wait div'.//.wait has five div circles
    scale: [0.2].// Scale from 0 to 2
    opacity: [1.0].// Transparency ranges from 1 to 1
    loop: true.// Loop
    easing: 'easeOutCirc'.// Time curve
    duration: 1000.// Play time is 1s
    autoplay: false.// Whether to play immediately
    delay: anime.stagger(300),   // Let the next element play every 300ms
});
Copy the code

As you can see from the notes above, anime is capable of manipulating multiple objects. You can set the change amount and time curve of CSS properties. Whether to play immediately, whether to loop, or even use functions in it. It is quite powerful, and can be described in more detail in the Anime API documentation.

function openDetector() {
    // ...
    waitAnime.play();
    setTimeout(() = > {
        waitAnime.pause();
        waitAnime.reset();
        playAnime();
    }, 1600)}Copy the code

Of course, when we click, we have to perform the playback of the animation, because it is waiting for the animation, so we simulate 1.6s after the pause and reset to disappear. Then play back the three animations of combat effectiveness data.

4. Numerical changes and pointer animation

let powerAnime = anime({
    targets: '.power'.textContent: [5144.5144 * 3].round: 1.easing: 'easeOutCirc'.duration: 5000.autoplay: false.delay: 200
});

let pointerAnime = anime({
    targets: '.pointer'.opacity: [1.36.].translateY: (el, i, l) = > {
        return (l - i) + 12;
    },
    easing: 'linear'.direction: 'alternate'.loop: true.autoplay: false.duration: 500
})

function playAnime() {
    $content.style.display = "block";
    powerAnime.play();
    pointerAnime.play();
}
Copy the code

The power of anime is that you can change not only the style but also the DOM content and even the object. Here we use only one sentence for the change in combat power, which is a dynamic change from 5144 to three times its value.

The pointer animations are much the same, but we can also find that we can use functions to calculate in Anime. Direction can also be played alternately backwards.

5. Column data animation

function runChart() {
    anime({
        targets: '.chart li'.width: () = > {
            return anime.random(20.100);
        },
        easing: 'easeInOutCubic'.duration: () = > {
            return anime.random(100.200);
        },
        loopComplete: runChart
    });
}

function playAnime() {
    $content.style.display = "block";
    powerAnime.play();
    pointerAnime.play();
    runChart()
}
Copy the code

This was our last set of animations, and we observed that the columns were different each time, so we could not just use them once, but execute them again when the Anime loopComplete was done. So it’s going to be different every time. Anime also has a built-in random numerical method that makes it easier to do.

Well, that’s it for now, online demo

extension

If you read this case, do you have a general understanding of anime? He is a library of lightweight and powerful animations. In fact, there are more functions waiting for you to unlock, of course, the final animation is not good, or to see your own creativity and proficiency.