JavaScript animate动画函数封装

利用JavaScript实现动画移动元素

html代码如下

    <input type="button" value="移动到400px" class="btn">
    <div class="dv"></div>

利用按钮实现自己想要的动画效果

css代码如下

        * {
            margin: 0;
            padding: 0;
        }
        input {
            margin-top: 20px;
        }
        div {
            width: 200px;
            height: 100px;
            margin-top: 50px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
        }

js代码如下

    let btn = document.querySelector(".btn");
    let dv = document.querySelector(".dv");
    // 点击按钮，改变宽度到达一个目标，高度达到一个目标值
    btn.onclick = function () {
        let json1 = { width: 400, height: 300, left: 500, top: 300,"opacity":0.5};
        animate(dv, json1);
        // animate(dv, { "width": 800, "height": 400, "left": 500, "top": 600 })
    }
function animate(element, json, fn) {
  clearInterval(element.timeId);
  element.timeId = setInterval(function () {
    var flag = true; //默认，假设，全部到达目标
    for (const attr in json) {
      // 判断这个属性attr中是不是opacity
      if (attr == "opacity") {
        // 获取元素这个属性的当前的透明度，当前的透明度放大100倍
        var current = parseInt(getStyle(element, attr) * 100);
        // 目标的透明度放大100倍
        var target = json[attr] * 100;
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        element.style[attr] = current / 100;
      } else if (attr == "zIndex") {
        // 判断这个属性attr中是不是zIndex
        // 层级改变就是直接改变这个属性的值
        element.style[attr] = json[attr];
      } else {
        //普通的属性
        // 获取元素这个属性的当前的值
        var current = parseInt(getStyle(element, attr));
        // 当前的属性对应的目标值
        var target = json[attr];
        // 元素每次移动的像素
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 每次移动后的距离
        current += step;
        // 设置元素的目标位置
        element.style[attr] = current + "px";
      }
      // 是否到达目标
      if (current != target) {
        flag = false;
      }
    }
    if (flag) {
      clearInterval(element.timeId);
      if (fn) {
        fn();
      }
    }
    // 测试代码
    // console.log("目标：" + traget, "当前：" + current, "每次的移动步数：" + step);
  }, 20);

    // 获取任意一个元素的任意一个样式的当前值---字符串类型
    function getStyle(element, attr) {
        // 判断浏览器是否支持这个方法
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
    }

animate函数中封装的是动画的样式，可以改变一个元素的多个属性值和zIndex和opacity

element：表示元素

json：封装的对象----多个属性

fn：回调函数

getStyle函数中封装的是获取一个元素的任意一个样式的当前值，返回的是一个字符串类型

判断浏览器是否支持这个方法返回元素的当前值