<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #taxiway { width: 800px; height: 100px; background: #E8E8EF; position: relative; } #move { position: absolute; left: 0; width: 100px; height: 100px; background: #a9ea00; } </style> </head> <body> <div id="taxiway"> <div id="move"></div> </div> <script> function easeOutBounce(pos) { if ((pos) < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + 0.75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + 0.9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + 0.984375); } } var el = document.getElementById('move') var parent = document.getElementById('taxiway') var distance = parent.offsetWidth - el.offsetWidth var begin = parseFloat(window.getComputedStyle(el, null).left) var end = begin + distance var fps = 30 var interval = 1000 / fps var duration = 2000 var times = duration / 1000 * fps var step = distance / times el.onclick = function() { var beginTime = new Date var id = setInterval(function() { var t = new Date - beginTime if (t >= duration) { el.style.left = end + 'px' clearInterval(id) } else { var per = t / duration el.style.left = begin + easeOutBounce(per) * distance + 'px' } }, interval) } </script> </body> </html>
easeIn
linear(easeNone)
In 表示加速
Out 表示减速
InOut 表示加速到中途又开始减速以实现方式与指数或开根进行区分
Sine 表示由三角函数实现
Quad 是二次方
Cubic 是三次方
Quart 是四次方
Quint 是五次方
Cire 使用开平方根的 Math.sqit
Expo 使用开立方根的 Math.pow
Elastic 是结合三角函数与开立三方根的初级弹簧效果
Back 是使用了一个 1.70158 常数来计算的回退效果
Bounce 是高级弹簧效果