day221-rAF-示例

要点

  1. 优化scrollTop
  2. Easing functions

优化scrollTop

原来的函数scroll用的是步长,简单的时间循环

function scrollTop () {
let el = this.el
let step = 0
let interval = setInterval(() => {
if (el.scrollTop <= 0) {
clearInterval(interval)
return
}
step += 10
el.scrollTop -= step
}, 20)
}

rAF改进后

const cubic = value => Math.pow(value, 3)
const easeInOutCubic = value => value < 0.5
? cubic(value * 2) / 2
: 1 - cubic((1 - value) * 2) / 2

function scrollTop () {
const el = this.el
const beginTime = Date.now()
const beginValue = el.scrollTop
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16)) // 兼容处理,16ms刷新
const frameFunc = () => {
const progress = (Date.now() - beginTime) / 500 // 在500ms内完成scroll,Date.now() - beginTime,表示控制在rAF的间隔时间内时间差值
if (progress < 1) {
el.scrollTop = beginValue * (1 - easeInOutCubic(progress))
rAF(frameFunc)
} else {
el.scrollTop = 0
}
}
rAF(frameFunc)
}

Easing functions

改进的方法中用到了贝塞斯曲线,改进方法中的曲线其实也可以这么写,如下。

// easeInOutCubic
function easeInOutCubic (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }

更多曲线的写法在这里 Simple Easing Functions in Javascript

也可以在这里 Easing functions,可视化的了解各种曲线。

参考

https://gist.github.com/gre/1650294

https://easings.net/en

文章作者: lmislm
文章链接: http://lmislm.com/2019/08/23/2019-08-23/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog