写节日活动时候经常遇到一些需求：
需要倒计时，到时间时候执行老虎机动画，然后不断的轮询接口，等接口响应开奖数据后，开始执行停止动画。
其实这个并不是啥难问题，自己封装一个控制速度的变量+一个定时器就可以。
不管我懒得写，如果有一个库能提供这样的效果就好了，那必定能减缓秃顶的速度。
很多动画库都是那种过渡动画,就是一定给出起始值和结束值，如果结束后再调用开奖动画会有很明显的停顿。
这个让我很苦恼，这。。。。。
可是最近换了加公司，看到他们写的金额动画竟然是用velocity.min.js库写的，没有这个问题，让我很纳闷，可是我还是没看懂为啥它不会卡顿，可能和执行的函数动画方式有一定关系。
先记录下代码吧，/(ㄒoㄒ)/~~，待n年骚年归来之时，也许能搞明白为啥。
在线代码bin
在线代码jsfiddle
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script> <title>Document</title> </head> <body> <button id="btn3">开始</button> <button id="stop">停止</button> 目标位置：<input type="text" id="input" value="5"> <div> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> </div> <script> </script> </body> </html>
javascript:
/* jquery.js */ /* jquery.velocity.js */ var uls = document.querySelectorAll("ul"); var isLoading = true;//发起停止命令 var target = "none"; let _h; document.getElementById("stop").onclick = function () { isLoading = false; target = Number(document.getElementById("input").value); console.log("target", target) } document.getElementById("btn3").onclick = function () { target = "none"; isLoading = true; for (let i = 0; i < uls.length; i++) { let el = uls[i]; setTimeout(()=>{ animate(el, 40 * 6); },i*200) } }; function animate(item, height) { console.log("isLoading", isLoading) if (target != "none") { if(target===0){ _h = 40 * 10; } else{ _h = 40 * target; } } else { _h = 40 * 9 } var option = { duration: 1000, easing: 'linear', queue: false, // 防止叠加多个动画，对translateY不起作用 complete: () => { console.log("第二次===") } } if (isLoading) { option.complete = () => { //停止 Velocity(item, { marginTop: 0 + 'px', }, { duration: 0, easing: 'linear', queue: false, }).then(() => { animate(item, _h) }) console.log("第一次===") } } Velocity(item, { marginTop: '-' + _h + 'px', }, option) }
