タイムラインアニメーション

jQuery.TLA.coffee

# jQuery.TLA.coffee
# Ver: 0.1
#
# タイムラインアニメーション
#
#
# 1. アニメーション要素の設定
#    TLA.setElements
#        $wrapper: $('#wrapper')
#        $line: $('<div></div>')
#
# 2. アニメーション要素の初期化設定
#    TLA.initialize (els) ->
#        els.$wrapper.css({position: 'relative'})
#        els.$line.css({position: 'absolute', right: 0})
#
# 3. アニメーション定義
#    TLA.setAnimation
#        setInitState: (els) ->
#            els.$line.css({opacity: 0})
#        moveToLeft: (els) ->
#            els.$line.animate({right: 100})
#        eOnClickLine: (e) ->
#            alert 'clicked'
#
# 4. タイムラインの設定
#    TLA.timeline (a) ->
#        {
#            0: a.setInitState
#            1000: a.moveToLeft
#        }
#
# 5. アニメーション実行
#    TLA.start()
#
# *. アニメーション定義をイベントにバインド
#    TLA.event (els, anims) ->
#        els.$line.on 'click', anims.eOnClickLine
#
#
# 問題点
#    ・イベント設定したアニメーション定義とタイムラインから呼び出す定義で引数が異なる
#
#
TLA =
  isInitialized: false
  setElements: (elements) ->
    TLA._elms = elements

  setAnimation: (animations) ->
    TLA._anims = animations

  timeline: (timelineFunc) ->
    TLA._timeline = timelineFunc TLA._anims

  initialize: (initFunc) ->
    TLA._init = initFunc

  event: (initEvent) ->
    TLA._event = initEvent

  init: ->
    if TLA._init != undefined && !TLA.isInitialized
      TLA.isInitialized = true
      TLA._init(TLA._elms)
      TLA._event(TLA._elms, TLA._anims)

  start: ->
    TLA.init()

    exec = (f, d) ->
      setTimeout ->
        f TLA._elms
      , d

    for delay, func of TLA._timeline
      exec func, delay

window.TLA = TLA