Skip to content
Permalink
Browse files

Add AnimationGroup and fix animaiton bugs

  • Loading branch information...
koenbok committed Sep 30, 2014
1 parent 410b06f commit ebcb76b6d7458e665d5ad1ac5d4cefb95527d30d
Showing with 111 additions and 24 deletions.
  1. +62 −11 extras/CactusFramer/static/app.coffee
  2. +6 −5 framer/Animation.coffee
  3. +34 −0 framer/AnimationGroup.coffee
  4. +1 −0 framer/Framer.coffee
  5. +8 −8 test/init.coffee
@@ -1,14 +1,65 @@
margin = 300
layer = new Layer

scrollingLayer = new Layer
width: window.innerWidth - margin
height: window.innerHeight - margin

contentLayer = new Layer
width: scrollingLayer.width
height: scrollingLayer.height * 3
image: "http://goo.gl/gpEHNR"
superLayer: scrollingLayer
class AnimationGroup extends Framer.EventEmitter

scrollingLayer.center()
scrollingLayer.scrollVertical = true
constructor: (animations=[]) ->
@setAnimations(animations)
@_currentAnimation = null

setAnimations: (animations) ->
# Copy all animations so we can use the same one for repeat
@_animations = _.map animations, (animation) -> animation.copy()

start: ->
@emit("start")

_.map @_animations, (animation, index) =>

nextAnimation = @_animations[index+1]

if nextAnimation
animation.on Events.AnimationEnd, =>
nextAnimation.start()
@_currentAnimation = animation
else
animation.on Events.AnimationEnd, =>
@emit("end")
@_currentAnimation = null

@_animations[0].start()

stop: ->
@_currentAnimation?.stop()


# runAnimations = (inputAnimations) ->

# copiedAnimations = []

# for animation in inputAnimations
# copiedAnimations.push(animation.copy())

# _.map copiedAnimations, (animation, index) ->

# nextAnimation = copiedAnimations[index+1]

# if nextAnimation
# animation.on Events.AnimationEnd, ->
# print "Start", index
# nextAnimation.start()

# copiedAnimations[0].start()


a = new Animation
layer: layer
properties:
x: -> layer.x + 100
time: 2


ag = new AnimationGroup([a, a, a])


ag.start()
@@ -140,14 +140,12 @@ class exports.Animation extends EventEmitter
return true

stop: (emit=true)->

@options.layer._context._animationList = _.without(
@options.layer._context._animationList, @)

if emit
@emit("stop")

@emit("stop") if emit
Framer.Loop.off("update", @_update)
# _runningAnimations = _.without _runningAnimations, @

reverse: ->
# TODO: Add some tests
@@ -156,6 +154,8 @@ class exports.Animation extends EventEmitter
animation = new Animation options
animation

copy: -> return new Animation(_.clone(@options))

# A bunch of common aliases to minimize frustration
revert: -> @reverse()
inverse: -> @reverse()
@@ -174,8 +174,9 @@ class exports.Animation extends EventEmitter
_update: (delta) =>
if @_animator.finished()
@_updateValue(1)
@stop(emit=false)
@emit("end")
@stop()
@emit("stop")
else
@_updateValue(@_animator.next(delta))

@@ -0,0 +1,34 @@
{_} = require "./Underscore"

{EventEmitter} = require "./EventEmitter"

class AnimationGroup extends EventEmitter

constructor: (animations=[]) ->
@setAnimations(animations)
@_currentAnimation = null

setAnimations: (animations) ->
# Copy all animations so we can use the same one for repeat
@_animations = _.map animations, (animation) -> animation.copy()

start: ->
@emit("start")

_.map @_animations, (animation, index) =>

nextAnimation = @_animations[index+1]

if nextAnimation
animation.on Events.AnimationEnd, =>
nextAnimation.start()
@_currentAnimation = animation
else
animation.on Events.AnimationEnd, =>
@emit("end")
@_currentAnimation = null

@_animations[0].start()

stop: ->
@_currentAnimation?.stop()
@@ -11,6 +11,7 @@ Framer.BackgroundLayer = (require "./BackgroundLayer").BackgroundLayer
Framer.VideoLayer = (require "./VideoLayer").VideoLayer
Framer.Events = (require "./Events").Events
Framer.Animation = (require "./Animation").Animation
Framer.AnimationGroup = (require "./AnimationGroup").AnimationGroup
Framer.Screen = (require "./Screen").Screen
Framer.print = (require "./Print").print

@@ -1,18 +1,18 @@
window.console.debug = (v) ->
# window.console.log = print

hideFramerRoot = ->
# hideFramerRoot = ->

element = document.getElementById "FramerRoot"
# element = document.getElementById "FramerRoot"

if not element
return Utils.delay 0.01, hideFramerRoot
# if not element
# return Utils.delay 0.01, hideFramerRoot

_.extend element.style,
top: "-10000000px"
left: "-10000000px"
# _.extend element.style,
# top: "-10000000px"
# left: "-10000000px"

hideFramerRoot()
# hideFramerRoot()

require "./tests/EventEmitterTest"
require "./tests/UtilsTest"

0 comments on commit ebcb76b

Please sign in to comment.
You can’t perform that action at this time.