Permalink
Browse files

Added support for backgroundPosition in px an %

  • Loading branch information...
1 parent 7be37a8 commit a1a61a3d29578fc62ac95cb2366cba03464a3729 Roger Chapman committed Aug 9, 2012
Showing with 127 additions and 26 deletions.
  1. +25 −1 examples.html
  2. +37 −11 morpheus.js
  3. +1 −1 morpheus.min.js
  4. +2 −2 package.json
  5. +37 −11 src/morpheus.js
  6. +25 −0 tests/tests.html
View
@@ -240,7 +240,7 @@ <h2>stopping animations</h2>
</script>
</div>
- <div class="stage" id="last">
+ <div class="stage">
<h2>Transform</h2>
<div id="ex8-scale" class="box">scale</div>
<div id="ex8-rotate" class="box">rotate</div>
@@ -278,6 +278,30 @@ <h2>Transform</h2>
</script>
</div>
+ <div class="stage" id="last">
+ <h2>BackgroundPosition</h2>
+ <div style="width:100px;height:100px;background:url(https://secure.gravatar.com/avatar/cfac4fc60b4e72258138903daab65b44?s=100) no-repeat" id="ex9" class="box"></div>
+ <script type="text/javascript">
+ !function(){
+ var anim = {
+ stop: function () {}
+ }
+ id('ex9').onmouseover = function() {
+ anim.stop();
+ anim = morpheus(id('ex9'), {
+ backgroundPosition: '0px -60px'
+ });
+ }
+ id('ex9').onmouseout = function() {
+ anim.stop();
+ anim = morpheus(id('ex9'), {
+ backgroundPosition: '0px 0px'
+ });
+ }
+ }();
+ </script>
+ </div>
+
</div>
</body>
</html>
View
@@ -21,6 +21,7 @@
, scale = /scale\(((?:[+\-]=)?([\d\.]+))\)/
, skew = /skew\(((?:[+\-]=)?([\-\d\.]+))deg, ?((?:[+\-]=)?([\-\d\.]+))deg\)/
, translate = /translate\(((?:[+\-]=)?([\-\d\.]+))px, ?((?:[+\-]=)?([\-\d\.]+))px\)/
+ , bgPosition = /^(?:[+\-]=)?([\-\d\.]+)?(%|px)\s(?:[+\-]=)?([\-\d\.]+)?(%|px)$/
// these elements do not require 'px'
, unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1, transform: 1}
@@ -131,6 +132,21 @@
return s
}
+ function parseBackgroundPosition(style, base) {
+ var values = {}, m
+ if (m = style.match(bgPosition)) {
+ values.backgroundPositionx = by(m[1], base ? base.backgroundPositionx : null)
+ values.backgroundPositionxUnit = m[2]
+ values.backgroundPositiony = by(m[3], base ? base.backgroundPositiony : null)
+ values.backgroundPositionyUnit = m[4]
+ }
+ return values
+ }
+
+ function formatBackgroundPosition(v) {
+ return ( v.backgroundPositionx + v.backgroundPositionxUnit + ' ' + v.backgroundPositiony + v.backgroundPositionyUnit)
+ }
+
function rgb(r, g, b) {
return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)
}
@@ -239,11 +255,13 @@
// this retreives the frame value within a sequence
function getTweenVal(pos, units, begin, end, k, i, v) {
- if (k == 'transform') {
+ if (k == 'transform' || k == 'backgroundPosition') {
v = {}
for(var t in begin[i][k]) {
- v[t] = (t in end[i][k]) ? Math.round(((end[i][k][t] - begin[i][k][t]) * pos + begin[i][k][t]) * thousand) / thousand : begin[i][k][t]
+ if(typeof begin[i][k][t] == 'string'){ v[t] = (t in end[i][k]) ? end[i][k][t] : begin[i][k][t] }
+ else { v[t] = (t in end[i][k]) ? Math.round(((end[i][k][t] - begin[i][k][t]) * pos + begin[i][k][t]) * thousand) / thousand : begin[i][k][t] }
}
+ console.log(begin[i][k])
return v
} else if (typeof begin[i][k] == 'string') {
return nextColor(pos, begin[i][k], end[i][k])
@@ -340,13 +358,17 @@
}
begin[i][k] = k == 'transform' ? parseTransform(v) :
- typeof tmp == 'string' && rgbOhex.test(tmp) ?
- toHex(v).slice(1) :
- parseFloat(v)
+ k == 'backgroundPosition' ? parseBackgroundPosition(v) :
+ typeof tmp == 'string' && rgbOhex.test(tmp) ?
+ toHex(v).slice(1) :
+ parseFloat(v)
end[i][k] = k == 'transform' ? parseTransform(tmp,begin[i][k]) :
- typeof tmp == 'string' && tmp.charAt(0) == '#' ?
- toHex(tmp).slice(1) :
- by(tmp, parseFloat(v));
+ k == 'backgroundPosition' ? parseBackgroundPosition(tmp,begin[i][k]) :
+ typeof tmp == 'string' && tmp.charAt(0) == '#' ?
+ toHex(tmp).slice(1) :
+ by(tmp, parseFloat(v));
+
+
// record original unit
(typeof tmp == 'string') && (unit = tmp.match(numUnit)) && (units[i][k] = unit[1])
}
@@ -365,9 +387,11 @@
v = getTweenVal(pos, units, begin, end, k, i)
k == 'transform' ?
els[i].style[transform] = formatTransform(v) :
- k == 'opacity' && !opasity ?
- (els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
- (els[i].style[camelize(k)] = v)
+ k == 'backgroundPosition' ?
+ els[i].style['backgroundPosition'] = formatBackgroundPosition(v) :
+ k == 'opacity' && !opasity ?
+ (els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
+ (els[i].style[camelize(k)] = v)
}
}
}, complete, ease])
@@ -380,6 +404,8 @@
morpheus.transform = transform
morpheus.parseTransform = parseTransform
morpheus.formatTransform = formatTransform
+ morpheus.parseBackgroundPosition = parseBackgroundPosition
+ morpheus.formatBackgroundPosition = formatBackgroundPosition
morpheus.easings = {}
return morpheus
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,10 +1,10 @@
{
"name": "morpheus"
, "description": "A Brilliant Animator"
- , "version": "0.6.3"
+ , "version": "0.6.4"
, "homepage": "https://github.com/ded/morpheus"
, "author": "Dustin Diaz <polvero@gmail.com> (http://dustindiaz.com)"
- , "keywords": ["ender", "animation", "motion", "css", "colors", "morph", "tween", "curve", "bezier", "transform", "skew", "rotate"]
+ , "keywords": ["ender", "animation", "motion", "css", "colors", "morph", "tween", "curve", "bezier", "transform", "skew", "rotate", "backgroundPosition"]
, "main": "./morpheus.js"
, "ender": "./src/ender.js"
, "repository": {
Oops, something went wrong.

0 comments on commit a1a61a3

Please sign in to comment.