根据滚动条触发动画

/*
        用法
        new ScrollMoveAnimate([

          // 一个对象代表一个监听范围  可传多个
          {
            start: 100,  // 滚动条触发开始位置
            end: 300, // 滚动条触发结束位置
            frames: 5, // 序列帧数量
            callback: index =>  {   // 回调函数 返回当前需要显示的序列帧的下标
              console.log(index)
            }
          }

        ])
*/

export default class ScrollMoveAnimate {
  constructor (animateInterval) {
    this.animateInterval = animateInterval
    this.addScrollEvent()
  }
  addScrollEvent () {
    window.onscroll = () =>{
      this.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      this.scrolling()
    }
  }
  scrolling () {
    this.animateInterval.forEach(v => {
      if (this.scrollT >= v.start && this.scrollT < v.end) 
      v.callback(parseInt((this.scrollT - v.start) / ((v.end - v.start) / v.frames)))
    })
  }
}
原文地址:https://www.cnblogs.com/chefweb/p/11745508.html