JS动画函数封装

最新推荐文章于 2022-11-13 15:31:53 发布

我在东软打代码

最新推荐文章于 2022-11-13 15:31:53 发布

阅读量150

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_46758732/article/details/119416143

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JS动画

动画实现原理
实现步骤
动画函数简单封装
给不同元素记录不同定时器
缓动动画
动画函数的使用

动画实现原理

核心原理：通过定时器setInterval（）不断移动盒子位置。

实现步骤

1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离。
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位，才能使用element.style.left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画原理</title>
    <style>
        div{
            position: absolute;
            left:0;
            width: 100px;
            height:100px;
            background-color: pink;
        }
    </style>
</head>
<body>
  <div></div>
  <script>
      // 1、获得盒子当前位置
      // 2、让盒子在当前位置加上1个移动距离。
      // 3、利用定时器不断重复这个操作
      // 4、加一个结束定时器的条件
      // 5、注意此元素需要添加定位，才能使用element.style.left
      var div = document.querySelector('div');
      // div.style.left = div.offsetLeft + 5 + 'px';
      var timer = setInterval(function () {
          if(div.offsetLeft >= 400){
              //停止动画 本质是停止定时器
              clearInterval(timer);
          }
          div.style.left = div.offsetLeft + 5 + 'px';
      },60)
  </script>
</body>
</html>

在这里插入图片描述

动画函数简单封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画原理</title>
    <style>
        div{
            position: absolute;
            left:0;
            width: 100px;
            height:100px;
            background-color: pink;
        }
        span {
            position: absolute;
            display: block;
            left: 0;
            top:200px;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
  <div></div>
  <span></span>
  <script>
     //简单动画函数封装obj目标对象target目标位置
      function animate(obj,target) {

         // div.style.left = div.offsetLeft + 5 + 'px';
         var timer = setInterval(function () {
              if(obj.offsetLeft >= target){
              //停止动画 本质是停止定时器
                   clearInterval(timer);
              }
              obj.style.left = obj.offsetLeft + 1 + 'px';
             },60);
     }
     var div = document.querySelector('div');
      var span =  document.querySelector('span');
      //调用函数
      animate(div,300)
      animate(span,500)
  </script>
</body>
</html>

在这里插入图片描述

给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器，我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
核心原理：利用JS是一门动态语言，可以·很方便给当前对象添加属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画原理</title>
    <style>
        div{
            position: absolute;
            left:0;
            width: 100px;
            height:100px;
            background-color: pink;
        }
        span {
            position: absolute;
            display: block;
            left: 0;
            top:200px;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
  <button>出发</button>
  <div></div>
  <span></span>
  <script>
     //简单动画函数封装obj目标对象target目标位置
      function animate(obj,target) {
    //当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
    //解决方案就是让我们元素只有一个定时器执行
    //先清除以前的定时器，只保留当前的一个定时器
      clearInterval(obj.timer);
         // div.style.left = div.offsetLeft + 5 + 'px';
         obj.timer = setInterval(function () {
              if(obj.offsetLeft >= target){
              //停止动画 本质是停止定时器
                   clearInterval(obj.timer);
              }
              obj.style.left = obj.offsetLeft + 5 + 'px';
             },60);
     }
      var div = document.querySelector('div');
      var span =  document.querySelector('span');
      var btn = document.querySelector('button');
      //调用函数
      animate(div,300)
      btn.addEventListener('click',function (evt) {
          animate(span,400);
      })
  </script>
</body>
</html>

在这里插入图片描述

缓动动画

**原理：**让元素运动速度有所变化，最常见的是让速度慢慢停下来
1、让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2、核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长
3、停止的条件是：让当前盒子位置等于目标位置就停止定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画原理</title>
    <style>
        div{
            position: absolute;
            left:0;
            width: 100px;
            height:100px;
            background-color: pink;
        }
        span {
            position: absolute;
            display: block;
            left: 0;
            top:200px;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
  <button>出发</button>
  <span></span>
  <script>
     //简单动画函数封装obj目标对象target目标位置

          //当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
          //解决方案就是让我们元素只有一个定时器执行
          //先清除以前的定时器，只保留当前的一个定时器
          function animate(obj, target) {
              clearInterval(obj.timer);
              // div.style.left = div.offsetLeft + 5 + 'px';
              obj.timer = setInterval(function () {
                  //步长值写到定时器的里面
                  // var step = Math.ceil((target - obj.offsetLeft) / 10);
                  var step = (target - obj.offsetLeft) /10;
                   step = step > 0 ? Math.ceil(step) : Math.floor(step);
                  if (obj.offsetLeft = target) {
                      //停止动画 本质是停止定时器
                      clearInterval(obj.timer);
                  }
                  //把每次加n这个步长值改为一个慢慢变小的值 步长公式：（目标值 - 现在的位置）/ 10
                  obj.style.left = obj.offsetLeft + step + 'px';

              }, 15);

      }
      var span =  document.querySelector('span');
      var btn = document.querySelector('button');
      //调用函数
      btn.addEventListener('click',function (evt) {
          animate(span,500);
      })
  </script>
</body>
</html>

动画函数的使用

因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。
1、创建一个JS文件
2、在所需页面引用JS文件


```go
  <script src="JS/animate.js"></script>

我在东软打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS动画函数封装

JS动画动画实现原理实现步骤动画函数简单封装给不同元素记录不同定时器缓动动画动画函数的使用动画实现原理核心原理：通过定时器setInterval（）不断移动盒子位置。实现步骤1、获得盒子当前位置2、让盒子在当前位置加上1个移动距离。3、利用定时器不断重复这个操作4、加一个结束定时器的条件5、注意此元素需要添加定位，才能使用element.style.left<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫