第三方动画 tween.js
用来实现缓动效果
缓动函数查询地址：https://easings.net/zh-cn#
cdn的引用：https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js
参考链接：http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html
缓动函数:
1.linear 匀速2.Quad 二次方缓动效果3.Cubic 三次方缓动效果4.Quart 四次方缓动效果5.Quint 五次方缓动效果6.Sine ?正弦缓动效果7.Expo ?指数缓动效果8.Circ ?圆形缓动函数9.Elastic 指数衰减正弦曲线缓动函数10.Back ?超过范围的三次方的缓动函数11.Bounce 指数衰减的反弹曲线缓动函数
每种缓动函数都由三种效果:
1.easeIn ?加速2.easeOut 减速3.easeInOut ?先加速后减速
代码事例：点击导航栏平缓跳动到对应的位置，其中的缓动代码
function animate(time) { ???????????requestAnimationFrame(animate); ???????????TWEEN.update(time); ???????} ???????requestAnimationFrame(animate); ???????????????var coords = {y:currentTop }; //初始值 ???????var t=Math.abs((s/100)*500) ???????if(t>1000){ ???????????t=500 ???????} ???????var tween = new TWEEN.Tween(coords) ????????????????.to({y: targetTop }, t) //目标值-时间 ???????????????.easing(TWEEN.Easing.Quadratic.InOut) //缓动动画，效果名，缓动效果 ???????????????.onUpdate(function() { ????????????????????window.scrollTo(0,coords.y) ???????????????})//在tween每次被更新后执行 ???????????????.start(); ????}tween.js的动画效果
原文地址：https://www.cnblogs.com/ronyjay/p/8996789.html