标签：地址 ati color 正弦 out linear 查询 bounce line
第三方动画 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(); }
标签：地址 ati color 正弦 out linear 查询 bounce line
原文地址：https://www.cnblogs.com/ronyjay/p/8996789.html
