Animate

最新推荐文章于 2025-07-15 20:08:03 发布

原创最新推荐文章于 2025-07-15 20:08:03 发布 · 219 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用 CoffeeScript 编写的动画构造器类及滚动条组件的实现细节。该动画构造器提供了自定义动画效果的功能，并且可以轻松应用于网页元素上。滚动条组件则利用该动画构造器实现了平滑滚动效果。


#coffeescript
class Animate
  constructor:(options={})->
    @options = options
    options.duration = options.duration or 300
    self = this
    self.easing =
      swing: (p, n, firstNum, diff) ->
        ((-Math.cos(p * Math.PI) / 2) + 0.5) * diff + firstNum

      linear: (p, n, firstNum, diff) ->
        firstNum + diff * p
  start : ->
    options=@options
    self=this
    self.startTime = +new Date
    self.interval = setInterval(->
      action = self.step or option.step
      t = +new Date
      n = t - self.startTime
      if n < options.duration
        self.state = n / options.duration
        self.pos = self.easing[options.easing or "swing"](self.state, n, 0, 1, options.duration)
        action self.pos
      else
        clearInterval self.interval 
        # when open new tab the interval will seted to 1000ms in chrome and firefox  
        action 1
        complete = self.complete or options.complete
        complete()  if complete
      return
    , 13)
    return

  stop : ->
    options=@options
    self=this
    clearInterval self.interval if self.interval
    onStop = self.onStop or options.onStop
    onStop() if onStop
    return
window.Animate = Animate


#coffeescript
#use animate
scrollable=(opts)->
  defaults={vertical:false}
  setting={}
  result={}
  (->(setting[x]=item for x,item of defaults);return)()
  (->(setting[x]=item for x,item of opts);return)()
  if setting.vertical
    pDim = 'top'
    pSize = setting.container.offsetHeight
  else
    pDim = 'left'
    pSize = setting.container.offsetWidth
  operateDom = setting.container.children[0]
  animate = new Animate()

  index=0
  currentVal=0
  targetVal=0

  animate.step = (progress)->
    distance = targetVal - currentVal
    operateDom.style[pDim] =  - (currentVal + distance * progress) + 'px'
    return
  animate.complete = ()-> 
    currentVal = targetVal
    # operateDom.style[pDim] =  -currentVal + 'px'
    return
  result.seekTo = (i)->
    animate.stop()
    targetVal = i * pSize
    animate.start()
    index = i
    if setting.onSeek
      setting.onSeek()  
    return
  result.onSeek = (fun)->
    setting.onSeek=fun
    return
  result.getIndex = ()->
    index
  result


window.scrollable = scrollable