Animate
2862 ワード
#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