JavaScript缓动动画函数的封装方法


Posted in Javascript onNovember 25, 2020

本文实例为大家分享了JavaScript缓动动画函数的封装代码,供大家参考,具体内容如下

本文将从封装缓动动画的以下几个部分进行封装(1、单个属性,2、多个属性,3、缓动框架之回调函数,4、缓动框架之层级与透明度)

首先:获取元素样式的兼容方式

function getStyle(ele,attr){      //获取任意类型的CSS样式的属性值
  if(window.getComputedStyle){    
    return window.getComputedStyle(ele,null)[attr];
  }
  return ele.currentStyle[attr];
}

封装单个属性

function animate(ele,attr,target){   //元素(box) 样式(left) 目标值(400)
  clearInterval(ele.timer);     //使用定时器时,先清除定时器,防止多个定时器并行
  ele.timer = setInterval(function(){
    //先定义一个当前值
    var leader = parseInt(getStyle(ele,attr)) || 0;   //当这个样式为空时设置为0,获取来的样式值要取整。
    var step = (target - leader)/10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    leader = leader + step;
    ele.style[attr] = leader + "px";     //注意设置元素样式,注意加单位
    if(Math.abs(target-leader) <= Math.abs(step)){
      ele.style[attr] = target + "px";
      clearInterval(ele.timer);
    }
  },25);
}

封装多个属性

function animate(ele,json){   //把样式和目标值放在json中,如:var json = {"left":10,"top":200,"width":300,"height":200}  
  clearInterval(ele.timer);
  ele.timer = setInterval(function(){
    //开闭原则,目的保证所有样式都到达目标值
    var bool = true;
    // 分别单独处理json;
    for(k in json){
      var attr = k;  //这里的k即上文中的样式
      var target = json[k];  //这里的json[k]即上文中的目标值,熟练后直接写k,json[k]。
      var leader = parseInt(getStyle(ele,attr)) || 0;
      var step = (target - leader) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      leader = leader + step;
      ele.style[attr] = leader + "px";

      //如果使用上文中清除定时器的方式,则完成了一个json内容就清除了定时器,显然不能这么做
      // if(Math.abs(target - leader) <= Math.abs(step)){
        // ele.style[attr] = target + "px";
        // clearInterval(ele.timer);
      // }
      if(target !== leader){  //依据上文定义的bool,遍历json时当有一个样式未完成,则bool值依旧为false。
        bool = false;
      }
    }

    //只有所有属性样式都到了指定位置,bool值才变成true
    if(bool){  
      clearInterval(ele.timer);
    }
  },25);       
}

缓动框架之回调函数

function animate(ele,json,fn){
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        var bool = true;
        for(k in json){       
            var leader = parseInt(getStyle(ele,k)) || 0;  
            var step = (json[k] - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;
            ele.style[k] = leader + "px";
            if(json[k] !== leader){
                bool = false;
            }
        }
        if(bool){
            clearInterval(ele.timer);
            if(fn){     //此处如果有函数,则掉用,如果没有则自动不执行,当然也可加个判断,if(typeof fn == "function"),当fn类型为函数时。
                fn();
            }
        }
    },25);
}

//调用
animate(box,json,function(){      //这里的function是一整个函数体,所以上文中的fn要加();
    animate(box,json1,function(){     //当执行完第一个缓动动画时,有function则继续执行。
        animate(box,json);
    });
});

缓动框架之层级与透明度

function animate(ele,json,fn){
  clearInterval(ele.timer);
  ele.timer = setInterval(function(){
    var bool = true;
    for(k in json){
      var leader;
      if(k === "opacity"){   //如果属性为opacity
        leader = getStyle(ele,k) * 100 || 1;  //不能取整,先把它乘100
      }else{
        leader = parseInt(getStyle(ele,k)) || 0;  
      }          
      var step = (json[k] - leader) / 10; 
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      leader = leader + step;
      if(k === "opacity"){ 
        ele.style[k] = leader/100;   //如果是opacity,赋值时在除以100
        ele.style.filter = "alpha(opacity="+leader+")";   //兼容IE
      }else if(k === "zIndex"){
        ele.style[k] = leader;   //直接赋值就是了,不用加单位
      }else{
        ele.style[k] = leader + "px";
      }
      if(json[k] !== leader){
        bool = false;
        console.log(leader);
      }
    }
    if(bool){
      clearInterval(ele.timer);
      if(fn){
        fn();
      }
    }
  },30);
}
**//注意这里赋值的opacity要乘以100,如:30,100等**

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
js实现缓动动画
Nov 25 #Javascript
JavaScript实现缓动动画
Nov 25 #Javascript
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
JavaScript实现网页动态生成表格
Nov 25 #Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
JavaScript实现HTML导航栏下拉菜单
Nov 25 #Javascript
You might like
php创建多级目录代码
2008/06/05 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
使用typeof方法判断undefined类型
2014/09/09 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python中异常捕获方法详解
2017/03/03 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python如何对XML 解析
2020/06/28 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Numpy数组的广播机制的实现
2020/11/03 Python
大学生写自荐信的技巧
2014/01/08 职场文书
向领导表决心的话
2014/03/11 职场文书
运动会报道稿300字
2014/10/02 职场文书
入伍通知书
2015/04/23 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js