当前位置：网站首页>PC side special effects - animation function

PC side special effects - animation function

2022-07-28 22:40:00 【Green hedgerow bamboo maple】

How animation works ： By timer setInterval() Keep moving the position of the box

Implementation steps ：

1. Get the location of the current box

2. Let the box add 1 It's a moving distance

3. Use the timer to repeat this operation constantly

4. Add an end timer condition

5. Be careful , Element to add positioning , Can be used element.style.left

 <style>
    div {
      /* // It must be positioned to move  */
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    var timer = setInterval(function () {
      if (div.offsetLeft >= 500) {
        clearInterval(timer);
      } else {
        div.style.left = div.offsetLeft + 2 + 'px';
      }
    }, 30)
  </script>
</body>

Animation function encapsulation 

  <style>
    div {
      /* // It must be positioned to move  */
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: green;
    }

    span {
      position: absolute;
      top: 220px;
      left: 0;
      width: 300px;
      height: 300px;
      background-color: blue;
    }
  </style>
<body>
  <button> Click to open the animation </button>
  <div></div>
  <span></span>
  <script>
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    function animate(object, target) {
      // Add different timers to different elements , Avoid developing more memory space 
      // Ensure that there is only one timer in motion 
      clearInterval(object.timer);
      object.timer = setInterval(function () {
        if (object.offsetLeft >= target) {
          clearInterval(object.timer);
        } else {
          object.style.left = object.offsetLeft + 2 + 'px';
        }
      }, 30)
    }
    btn.addEventListener('click', function () {
      animate(div, 400);
      animate(span, 500);
    })
  </script>
</body>

Slow motion animation

Slow motion animation is to change the movement speed of elements , Usually slow down

Ideas ：

1. Make the moving distance of the box smaller every time

2. The core algorithm ：（ The target - The present position ）/10 It's the step length

Let the animation move between different target values 

  <style>
    div {
      /* // It must be positioned to move  */
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: green;
    }

    span {
      position: absolute;
      top: 220px;
      left: 0;
      width: 300px;
      height: 300px;
      background-color: blue;
    }
  </style>
<body>
  <button> Forward </button>
  <button class="daotui"> backward </button>
  <div></div>
  <span></span>
  <script>
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    var daotui = document.querySelector('.daotui');
    function animate(object, target) {
      // Add different timers to different elements , Avoid developing more memory space 
      // Ensure that there is only one timer in motion 
      clearInterval(object.timer);
      object.timer = setInterval(function () {
        //  Forward step , And change the step length to an integer , Take it from the big one 
        // var step = Math.ceil((target - object.offsetLeft) / 10);
      
        var step = (target - object.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (object.offsetLeft == target) {
          clearInterval(object.timer);
        } else {
          // object.style.left = object.offsetLeft + 2 + 'px';
          object.style.left = object.offsetLeft + step + 'px';
        }
      }, 30)
    }
    btn.addEventListener('click', function () {
      animate(div, 400);
      animate(span, 500);
    })
    daotui.addEventListener('click', function () {
      animate(div, 100)
    })
  </script>
</body>

Add callback function to animation function

The principle of callback function ： Function can be used as an argument , Pass this function as an argument to another function , When that function is finished , Then execute the function passed in , It's called callback 

 <style>
    div {
      /* // It must be positioned to move  */
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: green;
    }

    span {
      position: absolute;
      top: 220px;
      left: 0;
      width: 300px;
      height: 300px;
      background-color: blue;
    }
  </style>
<body>
  <button> Forward </button>
  <button class="daotui"> backward </button>
  <div></div>
  <span></span>
  <script>
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    var daotui = document.querySelector('.daotui');
    function animate(object, target, callback) {
      // Add different timers to different elements , Avoid developing more memory space 
      // Ensure that there is only one timer in motion 
      clearInterval(object.timer);
      object.timer = setInterval(function () {
        //  Forward step , And change the step length to an integer , Take it from the big one 
        // var step = Math.ceil((target - object.offsetLeft) / 10);
        // Step backward 
        var step = (target - object.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (object.offsetLeft == target) {
          clearInterval(object.timer);
          // The callback function is written in the end of the timer 
          if (callback) {
            callback();
          }
        } else {
          // object.style.left = object.offsetLeft + 2 + 'px';
          object.style.left = object.offsetLeft + step + 'px';
        }
      }, 30)
    }
    btn.addEventListener('click', function () {
      animate(div, 400, function () {
        div.style.backgroundColor = 'red';
      }
      );
      animate(span, 500);
    })
    daotui.addEventListener('click', function () {
      animate(div, 100)
    })
  </script>
</body>

The mouse shows 

  <style>
    .sliderbar {
      width: 300px;
      height: 50px;
      background-color: pink;
    }

    span {
      text-align: center;
      position: absolute;
      left: 125px;
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 50px;
      color: white;
      background-color: skyblue;
      z-index: 1;
    }

    .con {
      display: none;
      position: absolute;
      left: 100px;
      width: 100px;
      height: 50px;
      background-color: green;
      text-align: center;
      line-height: 50px;
      color: aliceblue;
    }
  </style>
<body>
  <div class="sliderbar">
    <span>
       </span>
    <div class="con"> Problem feedback </div>
  </div>
  <script>
    // When the mouse passes sliderbar, let con Slide to the left 
    // When the mouse goes away sliderbar, let con Slide to the right 
    var sliderbar = document.querySelector('.sliderbar');
    var con = document.querySelector('.con');
    function animate(object, target) {
      clearInterval(object.timer);
      object.timer = setInterval(function () {
        // step 
        var step = (target - object.offsetLeft) / 10;
        step = step < 0 ? Math.floor(step) : Math.ceil(step);
        if (target == object.offsetLeft) {
          clearInterval(object.timer);
          object.style.left = 100 + 'px';
          object.style.display = 'none';
        } else {
          object.style.left = object.offsetLeft + step + 'px';
          object.style.display = 'block';
        }
      }, 10);
    }
    sliderbar.addEventListener('mouseenter', function () {
      // alert('aa');
      animate(con, 200,)
    })
    sliderbar.addEventListener('mouseout', function () {
      animate(con, 0);
    })

  </script>
</body>

原网站

版权声明
本文为[Green hedgerow bamboo maple]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130601354708.html

边栏推荐

猜你喜欢

随机推荐