div盒子的缓动函数封装
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div盒子的缓动函数封装相关的知识，希望对你有一定的参考价值。
1.2. 缓动动画
1.2.1. 原理公式
动画公式
leader = leader + step
匀速动画公式
step = 定值
leader = leader + step
缓动动画公式
step = ( target - leader ) / 10
leader = leader + step
缓动动画的好处
他的移动是有尽头的。不像基础匀速运动那样无限移动。
有非常逼真的缓动效果，实现的动画效果更细腻。
如果不清除定时器，物体永远跟着目标leader在移动。
@体验缓动动画
1.2.2. 函数封装
@缓动动画改进
多次点击按钮重复开启定时器
永远无法真正到达目标
到达目标后清理定时器
@缓动函数封装
需求：能够让任意对象移动到指定位置
1.2.3. 案例
@筋斗云案例
1.3. 封装缓动框架
1.3.1. 封装缓动框架（任意数值属性）
@获取计算后样式的方法
工作中我们经常需要获取一个盒子的最终样式
比如 就要获取未加定位的盒子的left属性值
那么如何到计算后的样式属性值呢：
w3c
window.getComputedStyle(元素,伪元素)["left"]
IE
div.currentStyle.left或 div.current["left"]
第二个参数是伪元素，我们传入null即可
@封装获取样式属性值的兼容方法
需求：获取任意对象的计算后的任意属性
@封装缓动框架（任意数值属性）
1.3.2. 封装缓动框架（多个数值属性）
1.3.3. 封装缓动框架（升级版定时器）
@手风琴特效
1.3.4. 封装缓动框架（添加回调函数）
@开机动画
1.3.5. 封装缓动框架（透明度和层级）
w3c
opacity:x;
x为0-1
IE 8
filter:alpha(opacity=x);
x为0-100
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #demo { 8 width: 100px; 9 height: 100px; 10 padding: 50px; 11 background-color: red; 12 position:absolute; 13 } 14 #demo2 { 15 width: 200px; 16 height: 200px; 17 background-color: blue; 18 position: absolute; 19 } 20 </style> 21 </head> 22 <body> 23 <button id="btn">按钮300</button> 24 <div id="demo" ></div> 25 <div id="demo2"></div> 26 <script> 27 var btn = document.getElementById("btn"); 28 var demo = document.getElementById("demo"); 29 btn.onclick = function(){ 30 // animate(demo,‘width‘,300); 31 // animate(demo,‘width‘,500); 32 // animate(demo,‘height‘,500); 33 // animate(demo,‘left‘,500); 34 // animate(demo,{"width":500,"height":400}); 35 // animate(demo,{"width":500,"height":400,"left":300}); 36 animate(demo,{"width":500,"height":400,"zIndex":1}); 37 } 38 var o = { 39 ‘name‘: "123", 40 ‘age‘ :123, 41 sex :"男" 42 } 43 var json = { 44 "width":500, 45 "height":500 46 } 47 48 //想让当前的函数，改变元素的任意多个属性 width: 500 height 500 49 function animate(obj,json,fn){ 50 clearInterval(obj.timerId); 51 obj.timerId = setInterval(function(){ 52 // var leader = obj.offsetLeft;//先要获得原来的对象的位置 53 var flag = true;// 假设所有的属性都达到了目标值 54 for(var key in json){ 55 if(key =="opacity"){ // 判断透明度的 56 // key就是相当于是obj的attr json[key]就相当于之前的target 57 var leader = parseInt(getStyle(obj,key)*100) ||0; // 先要获得原来对象的原属性的值 58 // 将当前取到的透明度的值扩大100倍，方便我们的运算 0.2 0.3 0.25 59 var target = json[key]*100; // 将目标值也要扩大100倍 60 var step = (target - leader )/10; 61 step =step>0?Math.ceil(step):Math.floor(step); 62 // 原因： 63 // 1.offsetLeft只会获得整数，不会获得小数，所以设置步长 的时候，让步长 也变成 整数 64 // 2. 步长有正数，也有负数，这个时候取一个中间点进行判断，是向上取整，还是向下取整数 65 // console.log(step); 66 leader = leader + step; 67 obj.style[key] = leader/100; // 改成对应的属性 68 69 }else if(key == "zIndex"){ 70 var target = json[key]; 71 obj.style[key] = target; // 改成对应的属性 72 }else { 73 // key就是相当于是obj的attr json[key]就相当于之前的target 74 var leader = parseInt(getStyle(obj,key)) ||0; // 先要获得原来对象的原属性的值 75 var target = json[key]; 76 console.log(leader); // offsetLeft只会获取整数 77 var step = (target - leader )/10; 78 step =step>0?Math.ceil(step):Math.floor(step); 79 // 原因： 80 // 1.offsetLeft只会获得整数，不会获得小数，所以设置步长 的时候，让步长 也变成 整数 81 // 2. 步长有正数，也有负数，这个时候取一个中间点进行判断，是向上取整，还是向下取整数 82 // console.log(step); 83 leader = leader + step; 84 obj.style[key] = leader + ‘px‘; // 改成对应的属性 85 } 86 if(leader != target){ //所有的属性都到达了指定的目标值的时候，才能清除定时器 87 flag = false;//有一个不满足条件，就让当前的标识变为false 88 } 89 } 90 if(flag){ //所有的都满足条件的情况下，才清除定时器 91 clearInterval(obj.timerId); 92 if(fn){ // 判断参数中是否有回调函数，如果有，则执行 93 fn(); 94 } 95 } 96 },15) 97 } 98 99 // 此函数可以获得对象的任意属性 100 function getStyle(obj,attr){ 101 // 能力检测 102 if(obj&&obj.currentStyle){ // 当前传进来的是一个真实的对象，而且此对象支持currentStyle 103 return obj.currentStyle[attr]; 104 }else { 105 return getComputedStyle(obj,null)[attr]; 106 } 107 } 108 </script> 109 </body> 110 </html>
以上是关于div盒子的缓动函数封装的主要内容，如果未能解决你的问题，请参考以下文章