Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add layer.force2d for mask + borderRadius
  • Loading branch information
koenbok committed Sep 30, 2014
1 parent 1d521bd commit ae4fc9b
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 57 deletions.
17 changes: 6 additions & 11 deletions extras/CactusFramer/static/app.coffee
@@ -1,13 +1,8 @@
layer = new Layer
layerA = new Layer
layerB = new Layer superLayer:layerA

layerA.borderRadius = layerA.height / 4
layerA.center()


a = new Animation
layer: layer
properties:
x: -> layer.x + 100
time: 2.5
repeat: 5


a.start()
# layerA._prefer2d = true
layerB.force2d = true
4 changes: 2 additions & 2 deletions framer/Layer.coffee
Expand Up @@ -168,8 +168,7 @@ class exports.Layer extends BaseClass
@define "shadowSpread", layerProperty @, "shadowSpread", "boxShadow", 0, _.isNumber
@define "shadowColor", layerProperty @, "shadowColor", "boxShadow", ""

# Mapped style properties

# Color properties
@define "backgroundColor", layerProperty @, "backgroundColor", "backgroundColor", null, _.isString
@define "color", layerProperty @, "color", "color", null, _.isString

Expand All @@ -178,6 +177,7 @@ class exports.Layer extends BaseClass
@define "borderColor", layerProperty @, "borderColor", "border", null, _.isString
@define "borderWidth", layerProperty @, "borderWidth", "border", 0, _.isNumber

@define "force2d", layerProperty @, "force2d", "webkitTransform", false, _.isBool

##############################################################
# Identity
Expand Down
64 changes: 20 additions & 44 deletions framer/LayerStyle.coffee
Expand Up @@ -14,6 +14,16 @@ _WebkitProperties = [
["sepia", "sepia", 0, "%"],
]

_Force2DProperties =
"z": 0
"scaleX": 1
"scaleY": 1
"scaleZ": 1
"skewX": 0
"skewY": 0
"rotationX": 0
"rotationY": 0

exports.LayerStyle =

width: (layer) ->
Expand Down Expand Up @@ -77,8 +87,8 @@ exports.LayerStyle =
# scenarios with rounded corners and shadows where gpu drawing gets weird
# results.

if layer._properties._prefer2d
return exports.LayerStyle.WebkitTransformPrefer2d(layer)
if layer._prefer2d or layer._properties.force2d
return exports.LayerStyle.webkitTransformForce2d(layer)

"
translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)
Expand All @@ -92,58 +102,24 @@ exports.LayerStyle =
rotateZ(#{layer._properties.rotationZ}deg)
"


webkitTransformPrefer2d: (layer) ->
webkitTransformForce2d: (layer) ->

# This detects if we use 3d properties, if we don't it only uses
# 2d properties to disable gpu rendering.

css = []

if layer._properties.z != 0
css.push "translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)"
else
css.push "translate(#{layer._properties.x}px,#{layer._properties.y}px)"

if layer._properties.scale != 1
css.push "scale(#{layer._properties.scale})"

if layer._properties.scaleX != 1 or layer._properties.scaleY != 1 or layer._properties.scaleZ != 1
css.push "scale3d(#{layer._properties.scaleX},#{layer._properties.scaleY},#{layer._properties.scaleZ})"

if layer._properties.skew
css.push "skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)"

if layer._properties.skewX
css.push "skewX(#{layer._properties.skewX}deg)"

if layer._properties.skewY
css.push "skewY(#{layer._properties.skewY}deg)"

if layer._properties.rotationX
css.push "rotateX(#{layer._properties.rotationX}deg)"

if layer._properties.rotationY
css.push "rotateY(#{layer._properties.rotationY}deg)"

if layer._properties.rotationZ
css.push "rotateZ(#{layer._properties.rotationZ}deg)"
for p, v of _Force2DProperties
if layer._properties[p] isnt v
console.warn "Layer property '#{p}'' will be ignored with force2d enabled"

css.push "translate(#{layer._properties.x}px,#{layer._properties.y}px)"
css.push "scale(#{layer._properties.scale})"
css.push "skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)"
css.push "rotate(#{layer._properties.rotationZ}deg)"

return css.join(" ")

# "
# translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)
# scale(#{layer._properties.scale})
# scale3d(#{layer._properties.scaleX},#{layer._properties.scaleY},#{layer._properties.scaleZ})
# skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)
# skewX(#{layer._properties.skewX}deg)
# skewY(#{layer._properties.skewY}deg)
# rotateX(#{layer._properties.rotationX}deg)
# rotateY(#{layer._properties.rotationY}deg)
# rotateZ(#{layer._properties.rotationZ}deg)
# "

webkitTransformOrigin: (layer) ->
"#{layer._properties.originX * 100}% #{layer._properties.originY * 100}%"

Expand Down
11 changes: 11 additions & 0 deletions test/tests/LayerTest.coffee
Expand Up @@ -696,6 +696,17 @@ describe "Layer", ->
inputElement = _.first(inputElements)
inputElement.getAttribute("id").should.equal "hello"

describe "Force 2D", ->

it "should switch to 2d rendering", ->

layer = new Layer

layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"

layer.force2d = true

layer.style.webkitTransform.should.equal "translate(0px, 0px) scale(1) skew(0deg, 0deg) rotate(0deg)"



Expand Down

0 comments on commit ae4fc9b

Please sign in to comment.