当前位置：网站首页>Animation function encapsulation (slow motion animation)

Animation function encapsulation (slow motion animation)

2022-07-21 02:15:00 【Taro paste】

Animation function encapsulation

How animation works

The core principle ： By timer setInterval() Keep moving the box .

Implementation steps ：

Get the current position of the box
Let the box add... To its current position 1 It's a moving distance
Use the timer to repeat the operation
Add an end timer condition
Note that this element needs to add positioning , Can be used element.style.left

Animation functions record different timers for different elements

If multiple elements use this animation function , Every time var Declare timer . We can use different timers for different elements （ Use your own timer ）.

The core principle ： utilize JS It's a dynamic language , You can easily add properties to the current object .

 function animate(obj, target) {
    
            //  When we keep clicking on the button , This element is going to get faster and faster , Because too many timers are on 
            //  The solution is   Let's say that the element has only one timer to execute 
            //  Clear the previous timer first , Only the current timer is kept for execution 
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
    
                if (obj.offsetLeft >= target) {
    
                    //  Stop Animation   It's essentially a stop timer 
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

Effect display

Insert picture description here

Source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> .box {
       display: none; position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } .bBox {
       position: absolute; top: 180px; left: 0; width: 200px; height: 200px; background-color: plum; } </style>
</head>

<body>
    <button class="btn500"> Click on 500</button>
    <button class="btn800"> Click on 800</button>
    <div class="box"></div>
    <div class="bBox"></div>
    <script> function animate(obj, target, callback) {
       clearInterval(obj.timer); obj.timer = setInterval(function () {
       var x = (target - obj.offsetLeft) / 10; x = x > 0 ? Math.ceil(x) : Math.floor(x); if (obj.offsetLeft == target) {
       clearInterval(obj.timer); if (callback) {
       callback(); } } obj.style.left = obj.offsetLeft + x + 'px'; }, 15) }; var bBox = document.querySelector('.bBox'); var btn500 = document.querySelector('.btn500'); var btn800 = document.querySelector('.btn800'); btn500.addEventListener('click', function () {
       animate(bBox, 500); }) btn800.addEventListener('click', function () {
       animate(bBox, 800, function () {
       bBox.style.backgroundColor = 'pink'; // console.log(bBox.style.backgroundColor); }); }) </script>
</body>

</html>