Permalink
Browse files

- support for animation by units

  • Loading branch information...
1 parent 086cf2e commit fcca1cfdc2ec839794106a9a7c48fc7527ce6f6f @ded committed May 26, 2011
Showing with 104 additions and 83 deletions.
  1. +13 −4 integration/integration.html
  2. +16 −10 morpheus.js
  3. +1 −1 morpheus.min.js
  4. +58 −58 src/easings.js
  5. +16 −10 src/morpheus.js
@@ -7,8 +7,10 @@
body {
height: 100%;
overflow: hidden;
+ font-size: 12px;
}
.wha {
+ z-index: 1;
left: 0;
top: 0;
position: absolute;
@@ -37,12 +39,17 @@
right: 0;
}
#op {
- width: 100px;
- height: 100px;
+ color: #fff;
+ width: 150px;
+ height: 150px;
+ padding: 20px;
background: blue;
opacity: 0;
filter: alpha(opacity=0);
margin: 0 auto;
+ font-family: helvetica neue, helvetica, arial;
+ font-weight: 100;
+ text-align: center;
}
</style>
<script src="ender.js" type="text/javascript"></script>
@@ -62,7 +69,9 @@
easing: easings.bouncePast,
complete: function () {
morpheus(document.getElementById('op'), {
- opacity: 1
+ opacity: 1,
+ fontSize: '+=1.8em',
+ easing: easings.spring
})
}
})
@@ -94,6 +103,6 @@
<div class="wha wha-3"></div>
<div class="wha wha-4"></div>
</div>
- <div id="op"></div>
+ <div id="op" style="font-size: 0.5em">mø®phéüs</div>
</body>
</html>
View
@@ -5,9 +5,10 @@
*/
!function (context, doc, win) {
- var px = 'px',
+ var html = doc.documentElement,
rgbOhex = /^rgb\(|#/,
- html = doc.documentElement,
+ relVal = /^([+\-])=([\d\.]+)/,
+ numUnit = /^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/,
opasity = function () {
return typeof doc.createElement('a').style.opacity !== 'undefined';
}(),
@@ -114,24 +115,24 @@
return '#' + r.join('');
}
- function getVal(pos, begin, end, k, i, v) {
+ function getVal(pos, units, begin, end, k, i, v) {
if (typeof begin[i][k] == 'string') {
return nextColor(pos, begin[i][k], end[i][k]);
} else {
// round so we don't get crazy long floats
v = Math.round(((end[i][k] - begin[i][k]) * pos + begin[i][k]) * 1000) / 1000;
// some css properties don't require a unit (like zIndex, lineHeight, opacity)
- !(k in unitless) && (v += px);
+ !(k in unitless) && (v += units[i][k] || 'px');
return v;
}
}
// support for relative movement via '+=n' or '-=n'
function by(val, start, m, r, i) {
- return (m = /^([+\-])=([\d\.]+)/.exec(val)) ?
- (i = parseInt(m[2], 10)) && (r = (start + i)) && m[1] == '+' ?
+ return (m = relVal.exec(val)) ?
+ (i = parseFloat(m[2])) && (r = (start + i)) && m[1] == '+' ?
r : start - i :
- parseInt(val, 10);
+ parseFloat(val);
}
/**
@@ -148,7 +149,8 @@
duration = options.duration,
ease = options.easing,
begin = [],
- end = [];
+ end = [],
+ units = [];
delete options.complete;
delete options.duration;
delete options.easing;
@@ -157,8 +159,9 @@
// record beginning and end states to calculate positions
begin[i] = {};
end[i] = {};
+ units[i] = {};
for (var k in options) {
- var v = getStyle(els[i], k);
+ var v = getStyle(els[i], k), unit;
if (typeof options[k] == 'string' &&
rgbOhex.test(options[k]) &&
!rgbOhex.test(v)) {
@@ -169,6 +172,8 @@
begin[i][k] = typeof options[k] == 'string' && rgbOhex.test(options[k]) ?
toHex(v).slice(1) : parseFloat(v);
end[i][k] = typeof options[k] == 'string' && options[k].charAt(0) == '#' ? toHex(options[k]).slice(1) : by(options[k], parseFloat(v, 10));
+ // record original unit
+ typeof options[k] == 'string' && (unit = options[k].match(numUnit)) && (units[i][k] = unit[1]);
}
}
// one tween to rule them all
@@ -177,7 +182,7 @@
// fast for animating
for (i = els.length; i--;) {
for (var k in options) {
- v = getVal(pos, begin, end, k, i);
+ v = getVal(pos, units, begin, end, k, i);
k == 'opacity' && !opasity ?
(els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
(els[i].style[camelize(k)] = v);
@@ -187,6 +192,7 @@
}
morpheus.tween = tween;
+ morpheus.getStyle = getStyle;
typeof module !== 'undefined' && module.exports &&
(module.exports = morpheus);
View

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

Oops, something went wrong.
View
@@ -21,7 +21,7 @@ var easings = {
return (t == 0) ? 0 : Math.pow(2, 10 * (t - 1));
}
- , easeOutBounce: function(pos) {
+ , easeOutBounce: function(pos) {
if ((pos) < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
@@ -56,62 +56,62 @@ var easings = {
return 7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375;
}
- , bouncePast: function (pos) {
- if (pos < (1 / 2.75)) {
- return (7.5625 * pos * pos);
- } else if (pos < (2 / 2.75)) {
- return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
- } else if (pos < (2.5 / 2.75)) {
- return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
- } else {
- return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
- }
- }
-
- , swingTo: function(pos) {
- var s = 1.70158;
- return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
- }
-
- , swingFrom: function (pos) {
- var s = 1.70158;
- return pos * pos * ((s + 1) * pos - s);
- }
-
- , elastic: function(pos) {
- return -1 * Math.pow(4, -8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
- }
-
- , spring: function(pos) {
- return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
- }
-
- , blink: function(pos, blinks) {
- return Math.round(pos*(blinks||5)) % 2;
- }
-
- , pulse: function(pos, pulses) {
- return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
- }
-
- , wobble: function(pos) {
- return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
- }
-
- , sinusoidal: function(pos) {
- return (-Math.cos(pos*Math.PI)/2) + 0.5;
- }
-
- , flicker: function(pos) {
- var pos = pos + (Math.random()-0.5)/5;
- return easings.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos);
- }
-
- , mirror: function(pos) {
- if (pos < 0.5)
- return easings.sinusoidal(pos*2);
- else
- return easings.sinusoidal(1-(pos-0.5)*2);
- }
+ , bouncePast: function (pos) {
+ if (pos < (1 / 2.75)) {
+ return (7.5625 * pos * pos);
+ } else if (pos < (2 / 2.75)) {
+ return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
+ } else if (pos < (2.5 / 2.75)) {
+ return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
+ } else {
+ return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
+ }
+ }
+
+ , swingTo: function(pos) {
+ var s = 1.70158;
+ return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
+ }
+
+ , swingFrom: function (pos) {
+ var s = 1.70158;
+ return pos * pos * ((s + 1) * pos - s);
+ }
+
+ , elastic: function(pos) {
+ return -1 * Math.pow(4, -8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
+ }
+
+ , spring: function(pos) {
+ return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
+ }
+
+ , blink: function(pos, blinks) {
+ return Math.round(pos*(blinks||5)) % 2;
+ }
+
+ , pulse: function(pos, pulses) {
+ return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
+ }
+
+ , wobble: function(pos) {
+ return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
+ }
+
+ , sinusoidal: function(pos) {
+ return (-Math.cos(pos*Math.PI)/2) + 0.5;
+ }
+
+ , flicker: function(pos) {
+ var pos = pos + (Math.random()-0.5)/5;
+ return easings.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos);
+ }
+
+ , mirror: function(pos) {
+ if (pos < 0.5)
+ return easings.sinusoidal(pos*2);
+ else
+ return easings.sinusoidal(1-(pos-0.5)*2);
+ }
};
View
@@ -1,8 +1,9 @@
!function (context, doc, win) {
- var px = 'px',
+ var html = doc.documentElement,
rgbOhex = /^rgb\(|#/,
- html = doc.documentElement,
+ relVal = /^([+\-])=([\d\.]+)/,
+ numUnit = /^(?:[\+\-]=)?\d+(?:\.\d+)?(%|in|cm|mm|em|ex|pt|pc|px)$/,
opasity = function () {
return typeof doc.createElement('a').style.opacity !== 'undefined';
}(),
@@ -109,24 +110,24 @@
return '#' + r.join('');
}
- function getVal(pos, begin, end, k, i, v) {
+ function getVal(pos, units, begin, end, k, i, v) {
if (typeof begin[i][k] == 'string') {
return nextColor(pos, begin[i][k], end[i][k]);
} else {
// round so we don't get crazy long floats
v = Math.round(((end[i][k] - begin[i][k]) * pos + begin[i][k]) * 1000) / 1000;
// some css properties don't require a unit (like zIndex, lineHeight, opacity)
- !(k in unitless) && (v += px);
+ !(k in unitless) && (v += units[i][k] || 'px');
return v;
}
}
// support for relative movement via '+=n' or '-=n'
function by(val, start, m, r, i) {
- return (m = /^([+\-])=([\d\.]+)/.exec(val)) ?
- (i = parseInt(m[2], 10)) && (r = (start + i)) && m[1] == '+' ?
+ return (m = relVal.exec(val)) ?
+ (i = parseFloat(m[2])) && (r = (start + i)) && m[1] == '+' ?
r : start - i :
- parseInt(val, 10);
+ parseFloat(val);
}
/**
@@ -143,7 +144,8 @@
duration = options.duration,
ease = options.easing,
begin = [],
- end = [];
+ end = [],
+ units = [];
delete options.complete;
delete options.duration;
delete options.easing;
@@ -152,8 +154,9 @@
// record beginning and end states to calculate positions
begin[i] = {};
end[i] = {};
+ units[i] = {};
for (var k in options) {
- var v = getStyle(els[i], k);
+ var v = getStyle(els[i], k), unit;
if (typeof options[k] == 'string' &&
rgbOhex.test(options[k]) &&
!rgbOhex.test(v)) {
@@ -164,6 +167,8 @@
begin[i][k] = typeof options[k] == 'string' && rgbOhex.test(options[k]) ?
toHex(v).slice(1) : parseFloat(v);
end[i][k] = typeof options[k] == 'string' && options[k].charAt(0) == '#' ? toHex(options[k]).slice(1) : by(options[k], parseFloat(v, 10));
+ // record original unit
+ typeof options[k] == 'string' && (unit = options[k].match(numUnit)) && (units[i][k] = unit[1]);
}
}
// one tween to rule them all
@@ -172,7 +177,7 @@
// fast for animating
for (i = els.length; i--;) {
for (var k in options) {
- v = getVal(pos, begin, end, k, i);
+ v = getVal(pos, units, begin, end, k, i);
k == 'opacity' && !opasity ?
(els[i].style.filter = 'alpha(opacity=' + (v * 100) + ')') :
(els[i].style[camelize(k)] = v);
@@ -182,6 +187,7 @@
}
morpheus.tween = tween;
+ morpheus.getStyle = getStyle;
typeof module !== 'undefined' && module.exports &&
(module.exports = morpheus);

0 comments on commit fcca1cf

Please sign in to comment.