赛贝尔曲线

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 startTime
let startPos = window.scrollY;
let duration = 1000
let 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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值