JavaScript动画函数封装动画函数封装：每0.02s移动10px案例：匀速运动案例：变速运动动画

68 阅读 0 评论 45 点赞

我是靠谱客的博主酷炫帆布鞋，最近开发中收集的这篇文章主要介绍JavaScript动画函数封装动画函数封装：每0.02s移动10px案例：匀速运动案例：变速运动动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

动画函数封装：每0.02s移动10px
案例：匀速运动
案例：变速运动动画

动画函数封装：每0.02s移动10px

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /*脱离文档流*/
            position: absolute;
        }
    </style>
    <script>
        // 设置任意的一个元素，移动到指定的目标位置
        function animate(element,target) {
            clearInterval(element.timeId);
            // 定时器的id值存储在对象的一个属性中
            element.timeId=setInterval(function () {
                // 获取元素的当前位置，数字类型
                var current=element.offsetLeft;
                // 每次移动的距离
                var step=10;
                step=current<target?step:-step;
                // 当前移动到位置
                current +=step;
                if (Math.abs(current-target)>Math.abs(step)){
                   element.style.left=current+"px"; 
                } else {
                    // 清理定时器
                    clearInterval(element.timeId);
                    // 直到到达目标
                    element.style.left=target+"px";
                }
            }),20);
        }
    </script>
</head>
<body>

</body>
</html>

案例：匀速运动

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
  <script src="common.js"></script>
  <script>
    //点击按钮移动div

    my$("btn1").onclick = function () {
      animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
      animate(my$("dv"), 800);
    };

    //匀速动画
    function animate(element, target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = 10;
        step = target > current ? step : -step;
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          clearInterval(element.timeId);
          element.style.left = target + "px";
        }
      }, 20);
    }
  </script>
</div>
</body>
</html>

案例：变速运动动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>变速</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
  <script src="common.js"></script>
  <script>
    //点击按钮移动div

    my$("btn1").onclick = function () {
      animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
      animate(my$("dv"), 800);
    };

    //匀速动画
    function animate(element, target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = (target-current)/10;
        //Math对象方法  ceil 向上取整 floor 向下取整
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if(current==target) {
          //清理定时器
          clearInterval(element.timeId);
        }
        //测试代码:
        console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
      }, 20);
    }
  </script>
</div>
</body>
</html>