`
全冠清
  • 浏览: 51647 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Animate

 
阅读更多
#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


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics