Skip to content
Browse files

- boosh

  • Loading branch information...
0 parents commit 2a658ea255454d8771d566b63676dd96381f139e @ded committed May 19, 2011
Showing with 468 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +3 −0 Makefile
  3. +21 −0 README.md
  4. +24 −0 build.json
  5. +35 −0 examples.html
  6. +133 −0 morpheus.js
  7. +7 −0 morpheus.min.js
  8. 0 package.json
  9. +6 −0 src/copyright.js
  10. +111 −0 src/easings.js
  11. +127 −0 src/morpheus.js
1 .gitignore
@@ -0,0 +1 @@
+node_modules
3 Makefile
@@ -0,0 +1,3 @@
+# npm install smoosh -g
+boosh:
+ smoosh make ./build.json
21 README.md
@@ -0,0 +1,21 @@
+ _ _ ____ ____ ___ _ _ ____ _ _ ____
+ |\/| | | |__/ |__] |__| |___ | | [__
+ | | |__| | \ | | | |___ |__| ___]
+-----
+A Brilliant Animator.
+
+Morpheus lets you "tween anything" in parallel on multiple elements, from integers to colors, with easing transitions, in a single high-performant loop.
+
+It looks like this:
+
+``` js
+morpheus(elements, {
+ left: 50,
+ top: 100,
+ color: '#f00',
+ duration: 500,
+ complete: function () {
+ console.log('done');
+ }
+})
+```
24 build.json
@@ -0,0 +1,24 @@
+{
+ "JAVASCRIPT": {
+ "DIST_DIR": "./",
+ "morpheus": [
+ "./src/copyright.js",
+ "./src/morpheus.js"
+ ]
+ },
+ "JSHINT_OPTS": {
+ "boss": true,
+ "forin": false,
+ "curly": true,
+ "debug": false,
+ "devel": false,
+ "evil": false,
+ "regexp": false,
+ "undef": false,
+ "sub": true,
+ "white": true,
+ "indent": 2,
+ "whitespace": true,
+ "asi": true
+ }
+}
35 examples.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html lang="en-us">
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Morpheus</title>
+ <style type="text/css" media="screen">
+ .box {
+ position: relative;
+ left: 500px;
+ top: 0;
+ width: 50px;
+ height: 50px;
+ background: red;
+ }
+ #test2 {
+ left: 700px;
+ background: blue;
+ }
+ </style>
+ <script src="src/morpheus.js" type="text/javascript"></script>
+ <script src="src/easings.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div class="box" id="test"></div>
+ <div class="box" id="test2"></div>
+ <script type="text/javascript">
+ morpheus(document.getElementsByTagName('div'), {
+ duration: 500,
+ left: 200,
+ top: 100,
+ easing: easings.bounce
+ })
+ </script>
+ </body>
+</html>
133 morpheus.js
@@ -0,0 +1,133 @@
+/*!
+ * Morpheus - An animation framework
+ * copyright Dustin Diaz 2011
+ * https://github.com/ded/morpheus
+ * License MIT
+ */
+!function (context, doc) {
+
+ var ie = /msie/i.test(navigator.userAgent),
+ hex = "0123456789abcdef",
+ digit = /^-?[\d\.]+$/,
+ px = 'px',
+ unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 },
+ getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
+ function (el, property) {
+ var value = null;
+ var computed = doc.defaultView.getComputedStyle(el, '');
+ computed && (value = computed[camelize(property)]);
+ return el.style[property] || value;
+ } : (ie && html.currentStyle) ?
+
+ function (el, property) {
+ property = camelize(property);
+
+ if (property == 'opacity') {
+ var val = 100;
+ try {
+ val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
+ } catch (e1) {
+ try {
+ val = el.filters('alpha').opacity;
+ } catch (e2) {}
+ }
+ return val / 100;
+ }
+ var value = el.currentStyle ? el.currentStyle[property] : null;
+ return el.style[property] || value;
+ } :
+
+ function (el, property) {
+ return el.style[camelize(property)];
+ };
+
+ function toHex(c) {
+ var m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(c);
+ return (m ? '#' + (m[1] << 16 | m[2] << 8 | m[3]).toString(16) : c)
+ .replace(/#(\w)(\w)(\w)$/, '#$1$1$2$2$3$3'); // from short to long
+ }
+
+ function camelize(s) {
+ return s.replace(/-(.)/g, function (m, m1) {
+ return m1.toUpperCase();
+ });
+ }
+
+
+ function tween(duration, fn, done, ease, from, to) {
+ ease = ease || function (t) {
+ return Math.sin(t * Math.PI / 2)
+ };
+ var self = this,
+ time = duration || 1000,
+ diff = to - from,
+ start = new Date(),
+ timer = setTimeout(run, 5);
+
+ function run() {
+ var delta = new Date() - start;
+ if (delta > time) {
+ fn(to || 1);
+ done && done();
+ timer = null;
+ return;
+ }
+ to ?
+ fn((diff * ease(delta / time)) + from) :
+ fn(ease(delta / time));
+ setTimeout(run, 5);
+ }
+ }
+
+ tween.color = function (duration, from, to, fn, done, ease) {
+ var start = toHex(from).slice(1),
+ finish = toHex(to).slice(1);
+ tween(duration, function (pos) {
+ var r = [], i;
+ for (i = 0; i < 6; i++) {
+ from = hex.indexOf(start[i]);
+ to = hex.indexOf(finish[i]);
+ r[i] = hex[Math.floor((to - from) * pos + from)];
+ }
+ fn('#' + r.join(''));
+ }, done, ease);
+ }
+
+ function morpheus(elements, options) {
+ var els = elements ? (els = isFinite(elements.length) ? elements : [elements]) : [], i,
+ complete = options.complete,
+ duration = options.duration,
+ ease = options.easing,
+ begin = [];
+ delete options.complete;
+ delete options.duration;
+ delete options.easing;
+
+ // record beginning "from" state
+ for (i = els.length; i--;) {
+ begin[i] = {};
+ for (var k in options) {
+ var v = options[k];
+ digit.test(v) && !(k in unitless) && (v += px);
+ begin[i][k] = parseInt(getStyle(els[i], k), 10);
+ }
+ }
+ // (p = camelize(k)) && digit.test(v) && !(p in unitless) && (v += px);
+
+ // one tween to rule them all
+ tween(duration, function (pos) {
+ for (i = els.length; i--;) {
+ for (var k in options) {
+ var val = (options[k] - begin[i][k]) * pos + begin[i][k];
+ els[i].style[k] = val + 'px';
+ }
+ }
+ }, complete, ease);
+
+ }
+
+ typeof module !== 'undefined' && module.exports &&
+ (module.exports = morpheus);
+ context['morpheus'] = morpheus;
+
+}(this, document);
7 morpheus.min.js
@@ -0,0 +1,7 @@
+/*!
+ * Morpheus - An animation framework
+ * copyright Dustin Diaz 2011
+ * https://github.com/ded/morpheus
+ * License MIT
+ */
+!function(a,b){function l(a,b){var c=a?c=isFinite(a.length)?a:[a]:[],d,i=b.complete,j=b.duration,l=b.easing,m=[];delete b.complete,delete b.duration,delete b.easing;for(d=c.length;d--;){m[d]={};for(var n in b){var o=b[n];e.test(o)&&!(n in g)&&(o+=f),m[d][n]=parseInt(h(c[d],n),10)}}k(j,function(a){for(d=c.length;d--;)for(var e in b){var f=(b[e]-m[d][e])*a+m[d][e];c[d].style[e]=f+"px"}},i,l)}function k(a,b,c,d,e,f){function l(){var a=new Date-j;a>h?(b(f||1),c&&c(),k=null):(f?b(i*d(a/h)+e):b(d(a/h)),setTimeout(l,5))}d=d||function(a){return Math.sin(a*Math.PI/2)};var g=this,h=a||1e3,i=f-e,j=new Date,k=setTimeout(l,5)}function j(a){return a.replace(/-(.)/g,function(a,b){return b.toUpperCase()})}function i(a){var b=/rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(a);return(b?"#"+(b[1]<<16|b[2]<<8|b[3]).toString(16):a).replace(/#(\w)(\w)(\w)$/,"#$1$1$2$2$3$3")}var c=/msie/i.test(navigator.userAgent),d="0123456789abcdef",e=/^-?[\d\.]+$/,f="px",g={lineHeight:1,zoom:1,zIndex:1,opacity:1},h=b.defaultView&&b.defaultView.getComputedStyle?function(a,c){var d=null,e=b.defaultView.getComputedStyle(a,"");e&&(d=e[j(c)]);return a.style[c]||d}:c&&html.currentStyle?function(a,b){b=j(b);if(b=="opacity"){var c=100;try{c=a.filters["DXImageTransform.Microsoft.Alpha"].opacity}catch(d){try{c=a.filters("alpha").opacity}catch(e){}}return c/100}var f=a.currentStyle?a.currentStyle[b]:null;return a.style[b]||f}:function(a,b){return a.style[j(b)]};k.color=function(a,b,c,e,f,g){var h=i(b).slice(1),j=i(c).slice(1);k(a,function(a){var f=[],g;for(g=0;g<6;g++)b=d.indexOf(h[g]),c=d.indexOf(j[g]),f[g]=d[Math.floor((c-b)*a+b)];e("#"+f.join(""))},f,g)},typeof module!="undefined"&&module.exports&&(module.exports=l),a.morpheus=l}(this,document)
0 package.json
No changes.
6 src/copyright.js
@@ -0,0 +1,6 @@
+/*!
+ * Morpheus - An animation framework
+ * copyright Dustin Diaz 2011
+ * https://github.com/ded/morpheus
+ * License MIT
+ */
111 src/easings.js
@@ -0,0 +1,111 @@
+var easings = {
+ easeOut: function (t) {
+ return Math.sin(t * Math.PI / 2);
+ }
+
+ , easeOutStrong: function (t) {
+ return (t == 1) ? 1 : 1 - Math.pow(2, -10 * t);
+ }
+
+ , easeIn: function (t) {
+ return t * t;
+ }
+
+ , easeInStrong: function (t) {
+ return (t == 0) ? 0 : Math.pow(2, 10 * (t - 1));
+ }
+
+ , easeOutBounce: function(pos) {
+ if ((pos) < (1/2.75)) {
+ return (7.5625*pos*pos);
+ } else if (pos < (2/2.75)) {
+ return (7.5625*(pos-=(1.5/2.75))*pos + .75);
+ } else if (pos < (2.5/2.75)) {
+ return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
+ } else {
+ return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
+ }
+ }
+
+ , easeInBack: function(pos){
+ var s = 1.70158;
+ return (pos)*pos*((s+1)*pos - s);
+ }
+
+ , easeOutBack: function(pos){
+ var s = 1.70158;
+ return (pos=pos-1)*pos*((s+1)*pos + s) + 1;
+ }
+
+ , bounce: function (t) {
+ if (t < (1 / 2.75)) {
+ return 7.5625 * t * t;
+ }
+ if (t < (2 / 2.75)) {
+ return 7.5625 * (t -= (1.5 / 2.75)) * t + 0.75;
+ }
+ if (t < (2.5 / 2.75)) {
+ return 7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375;
+ }
+ 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);
+ }
+
+};
127 src/morpheus.js
@@ -0,0 +1,127 @@
+!function (context, doc) {
+
+ var ie = /msie/i.test(navigator.userAgent),
+ hex = "0123456789abcdef",
+ digit = /^-?[\d\.]+$/,
+ px = 'px',
+ unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 },
+ getStyle = doc.defaultView && doc.defaultView.getComputedStyle ?
+ function (el, property) {
+ var value = null;
+ var computed = doc.defaultView.getComputedStyle(el, '');
+ computed && (value = computed[camelize(property)]);
+ return el.style[property] || value;
+ } : (ie && html.currentStyle) ?
+
+ function (el, property) {
+ property = camelize(property);
+
+ if (property == 'opacity') {
+ var val = 100;
+ try {
+ val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
+ } catch (e1) {
+ try {
+ val = el.filters('alpha').opacity;
+ } catch (e2) {}
+ }
+ return val / 100;
+ }
+ var value = el.currentStyle ? el.currentStyle[property] : null;
+ return el.style[property] || value;
+ } :
+
+ function (el, property) {
+ return el.style[camelize(property)];
+ };
+
+ function toHex(c) {
+ var m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(c);
+ return (m ? '#' + (m[1] << 16 | m[2] << 8 | m[3]).toString(16) : c)
+ .replace(/#(\w)(\w)(\w)$/, '#$1$1$2$2$3$3'); // from short to long
+ }
+
+ function camelize(s) {
+ return s.replace(/-(.)/g, function (m, m1) {
+ return m1.toUpperCase();
+ });
+ }
+
+
+ function tween(duration, fn, done, ease, from, to) {
+ ease = ease || function (t) {
+ return Math.sin(t * Math.PI / 2)
+ };
+ var self = this,
+ time = duration || 1000,
+ diff = to - from,
+ start = new Date(),
+ timer = setTimeout(run, 5);
+
+ function run() {
+ var delta = new Date() - start;
+ if (delta > time) {
+ fn(to || 1);
+ done && done();
+ timer = null;
+ return;
+ }
+ to ?
+ fn((diff * ease(delta / time)) + from) :
+ fn(ease(delta / time));
+ setTimeout(run, 5);
+ }
+ }
+
+ tween.color = function (duration, from, to, fn, done, ease) {
+ var start = toHex(from).slice(1),
+ finish = toHex(to).slice(1);
+ tween(duration, function (pos) {
+ var r = [], i;
+ for (i = 0; i < 6; i++) {
+ from = hex.indexOf(start[i]);
+ to = hex.indexOf(finish[i]);
+ r[i] = hex[Math.floor((to - from) * pos + from)];
+ }
+ fn('#' + r.join(''));
+ }, done, ease);
+ }
+
+ function morpheus(elements, options) {
+ var els = elements ? (els = isFinite(elements.length) ? elements : [elements]) : [], i,
+ complete = options.complete,
+ duration = options.duration,
+ ease = options.easing,
+ begin = [];
+ delete options.complete;
+ delete options.duration;
+ delete options.easing;
+
+ // record beginning "from" state
+ for (i = els.length; i--;) {
+ begin[i] = {};
+ for (var k in options) {
+ var v = options[k];
+ digit.test(v) && !(k in unitless) && (v += px);
+ begin[i][k] = parseInt(getStyle(els[i], k), 10);
+ }
+ }
+ // (p = camelize(k)) && digit.test(v) && !(p in unitless) && (v += px);
+
+ // one tween to rule them all
+ tween(duration, function (pos) {
+ for (i = els.length; i--;) {
+ for (var k in options) {
+ var val = (options[k] - begin[i][k]) * pos + begin[i][k];
+ els[i].style[k] = val + 'px';
+ }
+ }
+ }, complete, ease);
+
+ }
+
+ typeof module !== 'undefined' && module.exports &&
+ (module.exports = morpheus);
+ context['morpheus'] = morpheus;
+
+}(this, document);

0 comments on commit 2a658ea

Please sign in to comment.
Something went wrong with that request. Please try again.