Skip to content
Permalink
Browse files

Fix more filter bugs

  • Loading branch information...
koenbok committed Oct 13, 2013
1 parent 3e4051b commit bad5a940a9012cf091b475deda68d985cde149e0
Showing with 86 additions and 29 deletions.
  1. +30 −10 build/framer.js
  2. +17 −7 src/animation.coffee
  3. +2 −2 src/filters.coffee
  4. +4 −0 src/utils.coffee
  5. +30 −10 template/framer.js
  6. +3 −0 test/tests/animation.coffee
@@ -1,7 +1,7 @@
// Framer 2.0-32-g6eefeb0 (c) 2013 Koen Bok
// Framer 2.0-33-g3e4051b (c) 2013 Koen Bok
// https://github.com/koenbok/Framer

window.FramerVersion = "2.0-32-g6eefeb0";
window.FramerVersion = "2.0-33-g3e4051b";


(function(){var require = function (file, cwd) {
@@ -625,6 +625,10 @@ require.define("/src/utils.coffee",function(require,module,exports,__dirname,__f
return /iphone|ipod|android|ie|blackberry|fennec/.test(navigator.userAgent.toLowerCase());
};

exports.isChrome = function() {
return /chrome/.test(navigator.userAgent.toLowerCase());
};

exports.isLocal = function() {
return window.location.href.slice(0, 7) === "file://";
};
@@ -4107,6 +4111,9 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
for (k in _ref2) {
v = _ref2[k];
if (propertiesB.hasOwnProperty(k)) {
if (utils.isChrome()) {
console.log("Warning: Filter animations are currently not working well in Chrome");
}
this.propertiesA[k] = propertiesA[k];
this.propertiesB[k] = propertiesB[k];
}
@@ -4182,7 +4189,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};

Animation.prototype._cleanup = function(completed) {
var computedStyles, endMatrix, endStyles, _ref, _ref1;
var computedStyles, cssFilterProperties, endMatrix, endStyles, i, _i, _len, _ref, _ref1, _ref2, _ref3;
this.view._currentAnimations = _.without(this.view._currentAnimations, this);
if (completed) {
endMatrix = utils.extend(new Matrix(), this.propertiesB);
@@ -4192,17 +4199,30 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
v = _ref[k];
endStyles[k] = this.propertiesB[k] + v;
}
endStyles["-webkit-filter"] = this.view._filterCSS(this.propertiesB);
cssFilterProperties = {};
_ref1 = this.propertiesB;
for (k in _ref1) {
v = _ref1[k];
if (FilterProperties.hasOwnProperty(k)) {
cssFilterProperties[FilterProperties[k].css] = v;
}
}
endStyles["webkitFilter"] = this.view._filterCSS(cssFilterProperties);
} else {
endMatrix = new Matrix(this.view._computedMatrix());
endStyles = {};
computedStyles = this.view.computedStyle;
_ref1 = this.AnimatableCSSProperties;
for (k in _ref1) {
v = _ref1[k];
_ref2 = this.AnimatableCSSProperties;
for (k in _ref2) {
v = _ref2[k];
endStyles[k] = computedStyles[k];
}
endStyles["-webkit-filter"] = computedStyles["-webkit-filter"];
_ref3 = computedStyles.cssText.split(";");
for (_i = 0, _len = _ref3.length; _i < _len; _i++) {
i = _ref3[_i];
console.log(i);
}
endStyles.webkitFilter = computedStyles.webkitFilter;
}
this.view.removeClass(this.animationName);
this.view._matrix = endMatrix;
@@ -4342,7 +4362,7 @@ require.define("/src/filters.coffee",function(require,module,exports,__dirname,_
},
"saturate": {
unit: "%",
"default": 0,
"default": 100,
css: "saturate"
},
"hueRotate": {
@@ -4352,7 +4372,7 @@ require.define("/src/filters.coffee",function(require,module,exports,__dirname,_
},
"contrast": {
unit: "%",
"default": 0,
"default": 100,
css: "contrast"
},
"invert": {
@@ -143,9 +143,7 @@ class Animation extends EventEmitter
# Build up the matrix animation properties

for k in @AnimatableMatrixProperties

@propertiesA[k] = propertiesA[k]

if propertiesB.hasOwnProperty k
@propertiesB[k] = propertiesB[k]
else
@@ -160,6 +158,8 @@ class Animation extends EventEmitter
# Build up the css filter properties
for k, v of @AnimatableFilterProperties
if propertiesB.hasOwnProperty k
if utils.isChrome()
console.log "Warning: Filter animations are currently not working well in Chrome"
@propertiesA[k] = propertiesA[k]
@propertiesB[k] = propertiesB[k]

@@ -268,7 +268,7 @@ class Animation extends EventEmitter


_cleanup: (completed) =>

# Remove this animation from the current ones for this view
@view._currentAnimations = _.without @view._currentAnimations, @

@@ -281,7 +281,12 @@ class Animation extends EventEmitter
for k, v of @AnimatableCSSProperties
endStyles[k] = @propertiesB[k] + v

endStyles["-webkit-filter"] = @view._filterCSS @propertiesB
cssFilterProperties = {}
for k, v of @propertiesB
if FilterProperties.hasOwnProperty k
cssFilterProperties[FilterProperties[k].css] = v

endStyles["webkitFilter"] = @view._filterCSS cssFilterProperties

else
# A matrix from the current state
@@ -292,9 +297,13 @@ class Animation extends EventEmitter

for k, v of @AnimatableCSSProperties
endStyles[k] = computedStyles[k]

endStyles["-webkit-filter"] = computedStyles["-webkit-filter"]


for i in computedStyles.cssText.split ";"
console.log i

# This does not seem to work well in Chrome :-/
endStyles.webkitFilter = computedStyles.webkitFilter

# Remove the animation class
@view.removeClass @animationName

@@ -346,6 +355,7 @@ class Animation extends EventEmitter

# Start the keyframe with the location marker
cssString.push "\t#{position}%\t{"


# Add the css filter properties
cssString.push "-webkit-filter: "
@@ -1,9 +1,9 @@
exports.FilterProperties =
"blur": {unit:"px", default:0, css: "blur"}
"brightness": {unit:"%", default:100, css: "brightness"}
"saturate": {unit:"%", default:0, css: "saturate"}
"saturate": {unit:"%", default:100, css: "saturate"}
"hueRotate": {unit:"deg", default:0, css: "hue-rotate"}
"contrast": {unit:"%", default:0, css: "contrast"}
"contrast": {unit:"%", default:100, css: "contrast"}
"invert": {unit:"%", default:0, css: "invert"}
"grayscale": {unit:"%", default:0, css: "grayscale"}
"sepia": {unit:"%", default:0, css: "sepia"}
@@ -117,6 +117,10 @@ exports.isMobile = ->
(/iphone|ipod|android|ie|blackberry|fennec/).test \
navigator.userAgent.toLowerCase()

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

exports.isLocal = ->
window.location.href[0..6] == "file://"

@@ -1,7 +1,7 @@
// Framer 2.0-32-g6eefeb0 (c) 2013 Koen Bok
// Framer 2.0-33-g3e4051b (c) 2013 Koen Bok
// https://github.com/koenbok/Framer

window.FramerVersion = "2.0-32-g6eefeb0";
window.FramerVersion = "2.0-33-g3e4051b";


(function(){var require = function (file, cwd) {
@@ -625,6 +625,10 @@ require.define("/src/utils.coffee",function(require,module,exports,__dirname,__f
return /iphone|ipod|android|ie|blackberry|fennec/.test(navigator.userAgent.toLowerCase());
};

exports.isChrome = function() {
return /chrome/.test(navigator.userAgent.toLowerCase());
};

exports.isLocal = function() {
return window.location.href.slice(0, 7) === "file://";
};
@@ -4107,6 +4111,9 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
for (k in _ref2) {
v = _ref2[k];
if (propertiesB.hasOwnProperty(k)) {
if (utils.isChrome()) {
console.log("Warning: Filter animations are currently not working well in Chrome");
}
this.propertiesA[k] = propertiesA[k];
this.propertiesB[k] = propertiesB[k];
}
@@ -4182,7 +4189,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};

Animation.prototype._cleanup = function(completed) {
var computedStyles, endMatrix, endStyles, _ref, _ref1;
var computedStyles, cssFilterProperties, endMatrix, endStyles, i, _i, _len, _ref, _ref1, _ref2, _ref3;
this.view._currentAnimations = _.without(this.view._currentAnimations, this);
if (completed) {
endMatrix = utils.extend(new Matrix(), this.propertiesB);
@@ -4192,17 +4199,30 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
v = _ref[k];
endStyles[k] = this.propertiesB[k] + v;
}
endStyles["-webkit-filter"] = this.view._filterCSS(this.propertiesB);
cssFilterProperties = {};
_ref1 = this.propertiesB;
for (k in _ref1) {
v = _ref1[k];
if (FilterProperties.hasOwnProperty(k)) {
cssFilterProperties[FilterProperties[k].css] = v;
}
}
endStyles["webkitFilter"] = this.view._filterCSS(cssFilterProperties);
} else {
endMatrix = new Matrix(this.view._computedMatrix());
endStyles = {};
computedStyles = this.view.computedStyle;
_ref1 = this.AnimatableCSSProperties;
for (k in _ref1) {
v = _ref1[k];
_ref2 = this.AnimatableCSSProperties;
for (k in _ref2) {
v = _ref2[k];
endStyles[k] = computedStyles[k];
}
endStyles["-webkit-filter"] = computedStyles["-webkit-filter"];
_ref3 = computedStyles.cssText.split(";");
for (_i = 0, _len = _ref3.length; _i < _len; _i++) {
i = _ref3[_i];
console.log(i);
}
endStyles.webkitFilter = computedStyles.webkitFilter;
}
this.view.removeClass(this.animationName);
this.view._matrix = endMatrix;
@@ -4342,7 +4362,7 @@ require.define("/src/filters.coffee",function(require,module,exports,__dirname,_
},
"saturate": {
unit: "%",
"default": 0,
"default": 100,
css: "saturate"
},
"hueRotate": {
@@ -4352,7 +4372,7 @@ require.define("/src/filters.coffee",function(require,module,exports,__dirname,_
},
"contrast": {
unit: "%",
"default": 0,
"default": 100,
css: "contrast"
},
"invert": {
@@ -50,6 +50,9 @@ describe "Animation", ->
testProperties = []
testProperties = _.union testProperties, AnimatableMatrixProperties
# testProperties = _.union testProperties, _.keys AnimatableCSSProperties

# These don't work well in chrome. There seems to be an issue with animating
# css filter properties for now.
# testProperties = _.union testProperties, _.keys AnimatableFilterProperties

console.log "testProperties", testProperties

0 comments on commit bad5a94

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