第59天：缓动动画封装函数
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第59天：缓动动画封装函数相关的知识，希望对你有一定的参考价值。
一、三个取整函数
这三个函数都是 数学函数
Math
Math.ceil() 向上取整 天花板
比如说 console.log(Math.ceil(1.01)) 结果 是 2
console.log(Math.ceil(1.9)) 结果 2
console.log(Math.ceil(-1.3)) 结果 是 -1
Math.floor() 向下取整 地板
比如说 console.log(Math.floor(1.01)) 结果 是 1
console.log(Math.floor(1.9)) 结果 1
console.log(Math.floor(-1.3)) 结果 是 -2
Math.round() 四舍五入函数
console.log(Math.round(1.01)) 结果 是 1
console.log(Math.round(1.9)) 结果 是 2
二、缓动动画原理
匀速动画的原理： 盒子本身的位置 + 步长
缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)
三、缓动动画封装函数如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 background-color: pink; 11 position: absolute; 12 left: 0; 13 opacity: 0.3; 14 } 15 </style> 16 </head> 17 <body> 18 <button id="btn200">200</button> 19 <button id="btn400">400</button> 20 <div id="box"></div> 21 </body> 22 </html> 23 <script> 24 var btn200 = document.getElementById("btn200"); 25 var btn400 = document.getElementById("btn400"); 26 var box = document.getElementById("box"); 27 btn200.onclick = function() { 28 animate(box,200); 29 } 30 btn400.onclick = function() { 31 animate(box,400); 32 } 33 34 function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少 35 clearInterval(obj.timer); 36 obj.timer = setInterval(function() { 37 // 计算步长 动画的原理 盒子本身的位置 + 步长 38 var step = (target - obj.offsetLeft) / 10; // 步长 39 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 取整步长 40 // obj.style.left = 盒子本身的位置 + 步长 41 obj.style.left = obj.offsetLeft + step + "px"; 42 if(obj.offsetLeft == target){ 43 clearInterval(obj.timer); 44 } 45 },30) 46 } 47 </script>
以上是关于第59天：缓动动画封装函数的主要内容，如果未能解决你的问题，请参考以下文章