赛贝尔曲线

来源:互联网 发布:国外免费php空间 编辑:程序博客网 时间:2024/04/29 14:37

http://stackoverflow.com/questions/8316882/what-is-an-easing-function

http://cubic-bezier.com/#1,1.55,.61,.77

http://gizma.com/easing/#quint3

t: current time, 当前时间

b: begInnIng value, 开始值

c: change In value, 结束值 - 开始值

d: duration 总消耗时间

x: 其实就是return的结果,传入0即可

easeInElastic  ( t, b, c, d) {  var s=1.70158;var p=0;var a=c;  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;  if (a < Math.abs(c)) { a=c; var s=p/4; }  else var s = p/(2*Math.PI) * Math.asin (c/a);  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;}let startTimelet startPos = window.scrollY;let duration = 1000let scroll = (timestamp) => {  startTime = startTime || timestamp  let elapsed = timestamp - startTime  let progress = easeInElastic(elapsed, startPos, 0-startPos, duration);  console.log(progress)  elapsed < duration && window.requestAnimationFrame(scroll)}window.requestAnimationFrame(scroll)
0 0
原创粉丝点击