Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
130 additions
and 351 deletions.
- +1 −1 Makefile
- +14 −156 extras/CactusFramer/static/app.coffee
- +17 −13 framer/AnimationLoop.coffee
- +5 −98 framer/Context.coffee
- +4 −4 framer/Framer.coffee
- +85 −74 framer/Layer.coffee
- +0 −1 framer/LayerDraggable.coffee
- +4 −4 framer/LayerStyle.coffee
| @@ -1,165 +1,23 @@ | ||
| reactEventMap = | ||
| "mouseup": "onMouseUp" | ||
| "click": "onClick" | ||
| "mouseover": "onMouseOver" | ||
| # onDrag onDragEnd | ||
| # onDragEnter | ||
| # onDragExit | ||
| # onDragLeave | ||
| # onDragOver | ||
| # onDragStart | ||
| # onDrop | ||
| # onMouseDown | ||
| # onMouseEnter | ||
| # onMouseLeave | ||
| # onMouseMove | ||
| # onMouseOut | ||
| # onMouseOver | ||
| # onMouseUp | ||
|
|
||
| main = -> | ||
|
|
||
| layerA = new Layer | ||
|
|
||
| layerA.backgroundColor = "red" | ||
| layerA.borderRadius = 10 | ||
| LAYERS = for i in [1..200] | ||
|
|
||
| # layerB = new Layer x:300 | ||
|
|
||
| # layerC = new Layer superLayer:layerB, x:10 | ||
|
|
||
|
|
||
| # layerC.backgroundColor = "Red" | ||
|
|
||
| # layerC.image = "https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10525814_10204137411226418_7683209453049109891_n.jpg?oh=dcc7c9b58113dc478a780a84e7c1ffce&oe=5485F5B6&__gda__=1422635977_045b7d67949ebb950ad970187dfb6113" | ||
|
|
||
| # layerA = new Layer | ||
| # layerB = new Layer x:300 | ||
|
|
||
| # layerB.on Events.Click, -> | ||
| # @animate | ||
| # properties: x:500 | ||
|
|
||
| # console.log layerB._events | ||
|
|
||
| # # console.log layerA._style | ||
|
|
||
| # for i in [1..50] | ||
|
|
||
| # layerC = new Layer | ||
| # x: Math.random() * window.innerWidth, | ||
| # y: Math.random() * window.innerHeight | ||
|
|
||
| # layerC.on Events.MouseOver, -> | ||
| # @animate | ||
| # properties: | ||
| # x: Math.random() * window.innerWidth, | ||
| # y: Math.random() * window.innerHeight | ||
| # curve: "spring(5,1, 0)" | ||
|
|
||
| pointOnCircle = (cx, cy, r, a) -> | ||
| point = | ||
| x: cx + r * Math.sin(a) | ||
| y: cy + r * Math.cos(a) | ||
|
|
||
| radians = (degrees) -> degrees * (Math.PI / 180) | ||
| degrees = (radians) -> radians * (180 / Math.PI) | ||
|
|
||
|
|
||
| circle = new Layer width:200, height:200 | ||
| circle.borderRadius = circle.height | ||
| circle.backgroundColor = "rgba(255, 100, 100, 0.1)" | ||
| circle.center() | ||
|
|
||
|
|
||
| n = 20 | ||
|
|
||
| for i in [1..n] | ||
|
|
||
| layer = new Layer midX:circle.midX, midY:circle.midY, width:50, height:50 | ||
| layer.borderRadius = layer.height | ||
| layerC = new Layer | ||
| x: Math.random() * window.innerWidth, | ||
| y: Math.random() * window.innerHeight | ||
|
|
||
|
|
||
| point = pointOnCircle circle.midX, circle.midY, circle.width/2, radians(360.0 / n * i) | ||
|
|
||
| layer.animate | ||
| properties: | ||
| x: point.x - layer.width / 2.0 | ||
| y: point.y - layer.height / 2.0 | ||
| curve: "spring(100,20,-)" | ||
| delay: 0.05 * i | ||
|
|
||
| main() | ||
|
|
||
| # eventMap = | ||
| # Events.Click: "onClick" | ||
|
|
||
| # reactElementList = (layers) -> | ||
| # _.map(layers, (layer) -> layer._reactElement()) | ||
|
|
||
| # clicker = (e) -> console.log "click", e | ||
|
|
||
| # Layer::_reactElement = -> | ||
|
|
||
| # options = | ||
| # className: "framerLayer" | ||
| # style: @_style | ||
|
|
||
| # # todo: make this work on the moment you add an event | ||
| # for eventName in _.keys(@_events) | ||
| # if reactEventMap.hasOwnProperty(eventName) | ||
| # options[reactEventMap[eventName]] = (e) => @emit(eventName, e) | ||
|
|
||
|
|
||
| # React.DOM.div(options, null, reactElementList(@subLayers)...) | ||
|
|
||
|
|
||
| # FramerApplication = React.createClass | ||
| # render: -> | ||
| # # Todo: cache the root layers | ||
| # rootLayers = _.filter(Framer.CurrentContext._layerList, (layer) -> !layer.superLayer) | ||
| Utils.interval .3, -> | ||
|
|
||
| # React.DOM.div({style:Framer.Config.rootBaseCSS}, null, reactElementList(rootLayers)...) | ||
|
|
||
|
|
||
|
|
||
|
|
||
| # start = new Date().getTime() | ||
|
|
||
| # contentNode = document.createElement("div") | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| # css = """ | ||
| # body { | ||
| # overflow: hidden; | ||
| # pointer-events: none | ||
| # } | ||
|
|
||
| # .framerLayer { | ||
| # display: block; | ||
| # position: absolute; | ||
| # background-repeat: no-repeat; | ||
| # background-size: cover; | ||
| # -webkit-overflow-scrolling: touch; | ||
| # -webkit-box-sizing: border-box; | ||
| # -webkit-user-select: none; | ||
| # } | ||
|
|
||
| # """ | ||
|
|
||
|
|
||
|
|
||
|
|
||
| # Utils.domComplete -> | ||
| # Utils.insertCSS(css) | ||
| # document.body.appendChild(contentNode) | ||
| # main() | ||
|
|
||
| # Framer.Loop.on "render", -> | ||
| # React.renderComponent(FramerApplication(), contentNode) | ||
| layer = _.shuffle(LAYERS)[0]; | ||
|
|
||
| layer.animate | ||
| properties: | ||
| x: Math.random() * window.innerWidth, | ||
| y: Math.random() * window.innerHeight | ||
| # rotationX: Math.random() * 180 | ||
| # rotationY: Math.random() * 180 | ||
| curve: "spring(5,1, 0)" | ||
|
|
||
|
|
Oops, something went wrong.