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()
View
@@ -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.