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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
详解原生JS回到顶部
Mar 25 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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通过COM类调用组件的实现代码
2012/01/11 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
高中生操行评语
2014/04/25 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS