Skip to content
Permalink
Browse files

Fix for WK2 animation bug

  • Loading branch information
koenbok committed Oct 10, 2014
1 parent 0f0a7fe commit 9b7b806504d891e1efaf0befaf96090028361315
Showing with 107 additions and 23 deletions.
  1. +73 −6 extras/CactusFramer/static/app.coffee
  2. +27 −17 framer/AnimationLoop.coffee
  3. +7 −0 framer/Utils.coffee
@@ -1,8 +1,75 @@
layerA = new Layer
layerB = new Layer superLayer:layerA
# Framer.Loop._delta = null

layerA.borderRadius = layerA.height / 4
layerA.center()
# {Config} = require "./Config"
# {EventEmitter} = require "./EventEmitter"

# layerA._prefer2d = true
layerB.force2d = true
# if window.performance
# getTime = -> window.performance.now()
# else
# getTime = -> Date.now()


# class AnimationLoop extends Framer.EventEmitter

# constructor: ->
# @_delta = 1/60

# start: =>

# animationLoop = @
# _timestamp = getTime()

# update = ->

# timestamp = getTime()
# delta = (timestamp - _timestamp) / 1000
# _timestamp = timestamp

# # if Math.abs(delta - 1/60) > (1/60 / 4)
# # print "Boom", delta

# document.body.style.display = 'none'
# document.body.style.offsetHeight;
# document.body.style.display='block';

# animationLoop.emit("update", delta)
# animationLoop.emit("render", delta)

# tick = (timestamp) ->
# # setTimeout(update, 0)
# update()
# window.requestAnimationFrame(tick)


# tick()

# Framer.Loop = new AnimationLoop()

# Utils.delay 0.2, ->

# Framer.Loop.start()



# Welcome to Framer

# Learn how to prototype: http://framerjs.com/learn
# Drop an image on the device, or import a design from Sketch or Photoshop

iconLayer = new Layer

iconLayer.center()

# Define a set of states with names (the original state is 'default')
iconLayer.states.add
second: {y:100, scale:0.6, rotationZ:100}
third: {y:300, scale:1.3, blur:4}
fourth: {y:200, scale:0.9, blur:2, rotationZ:200}

# Set the default animation options
iconLayer.states.animationOptions =
curve: "spring(1,1,0)"

# On a click, go to the next state
iconLayer.on Events.Click, ->
iconLayer.states.next()
@@ -1,7 +1,5 @@
{_} = require "./Underscore"

Utils = require "./Utils"

{Config} = require "./Config"
{EventEmitter} = require "./EventEmitter"

@@ -10,33 +8,45 @@ if window.performance
else
getTime = -> Date.now()


class exports.AnimationLoop extends EventEmitter

constructor: ->
@_delta = 1/60

@fps = 60
@raf = true

# Workaraound for RAF bug on 10.10
# https://bugs.webkit.org/show_bug.cgi?id=137599

if Utils.webkitVersion() > 600 and Utils.isSafari() and Utils.isDesktop()
@raf = false

if Utils.webkitVersion() > 600 and Utils.isFramerStudio()
@raf = false

start: =>

animationLoop = @

_timestamp = getTime()

update = ->

tick = (timestamp) ->

window.requestAnimationFrame(tick)

if animationLoop._delta
delta = animationLoop._delta
else
timestamp = getTime()
delta = (timestamp - _timestamp) / 1000
_timestamp = timestamp
timestamp = getTime()
delta = (timestamp - _timestamp) / 1000
_timestamp = timestamp

animationLoop.emit("update", delta)
animationLoop.emit("render", delta)

_timestamp = timestamp
tick = (timestamp) ->

if animationLoop.raf
update()
window.requestAnimationFrame(tick)
else
window.setTimeout ->
update()
window.requestAnimationFrame(tick)
, 0

window.requestAnimationFrame(tick)
tick()
@@ -214,6 +214,13 @@ Utils.toggle = Utils.cycle
Utils.isWebKit = ->
window.WebKitCSSMatrix isnt null

Utils.webkitVersion = ->
version = -1
regexp = /Safari\/([\d.]+)/
result = regexp.exec(navigator.userAgent)
version = parseFloat(result[1]) if result
version

Utils.isChrome = ->
(/chrome/).test(navigator.userAgent.toLowerCase())

0 comments on commit 9b7b806

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