缓动动画

2019-07-30 13:52:09 作者：互联网

 1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>匀速动画封装</title>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         
14         #box {
15             width: 80px;
16             height: 80px;
17             background-color: red;
18         }
19     </style>
20 </head>
21 
22 <body>
23     <button id="btn">点我啊</button>
24     <div id="box"></div>
25     <script>
26         window.onload = function() {
27             //起始位置 
28             //1.定义变量 
29             var timer = null,
30                 begin = 0,
31                 target = 800;
32             $("btn").onclick = function() {
33                 clearInterval(timer)
34                 timer = setInterval(function() {
35                     //缓动公式 --- 起始值+=(结束值 - 起始值)*缓动系数
36                     begin += (target - begin) * 0.2
37 
38                     if (Math.random(begin) >= target) {
39                         clearInterval(timer)
40                     }
41                     $("box").style.marginLeft = begin + "px"
42                 }, 100)
43             }
44 
45             function $(id) {
46                 return typeof id === "string" ? document.getElementById(id) : null;
47             }
48         }
49     </script>
50 </body>
51 
52 </html>

标签：function,动画,begin,target,timer,缓动,id
来源： https://www.cnblogs.com/yuanxiangguang/p/11269530.html