第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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录