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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值