Permalink
Browse files

Adds support for more CSS values, such as translateX/Y/Z and rotate.

  • Loading branch information...
1 parent e2c9b7a commit ef38a4b6d3bffe4f89b87c05acda891e388edfb8 @jeremyckahn committed Apr 16, 2012
Showing with 73 additions and 62 deletions.
  1. +26 −27 demos/demo2/helix.js
  2. +17 −11 dist/shifty.js
  3. +2 −2 dist/shifty.min.js
  4. +11 −11 examples/cssUnitsBasic.html
  5. +16 −10 src/shifty.css_units.js
  6. +1 −1 version.txt
View
@@ -11,95 +11,94 @@
,updateHandle
,isPlaying
,i;
-
+
function now () {
return +(new Date());
}
-
+
function getPosition (loopPosition, startBuffer) {
var moddedLoopPosition
,interpolator
,interpolatedValue;
-
+
if ((loopPosition - startBuffer) < 0) {
return 0;
}
-
+
interpolator = moddedLoopPosition = ((loopPosition - startBuffer) % 2);
-
+
if (moddedLoopPosition > 1) {
interpolator = moddedLoopPosition - 1;
- }
-
+ }
+
interpolatedValue = global.Tweenable.util.interpolate({
from: {
'left': 0
- ,'color': '#f00'
},
to: {
- 'left': HELIX_WIDTH
- ,'color': '#00f'
+ 'left': HELIX_WIDTH
},
position: interpolator,
easing: 'easeInOutSine'
});
-
+
if (moddedLoopPosition > 1) {
return {
'left': HELIX_WIDTH - interpolatedValue.left
- ,'color': interpolatedValue.color
}
} else {
return interpolatedValue;
}
}
-
+
function updateSegment (index, loopPosition) {
var segment
,calculated;
-
+
segment = segments[index];
calculated = getPosition(loopPosition, index * SEGMENT_BUFFER);
- segment.style.left = calculated.left + 'px';
- //segment.style.background = calculated.color;
+
+ var style = segment.style;
+ style.MozTransform = style.webkitTransform =
+ 'translateX(' + parseFloat(calculated.left) + 'px)';
}
-
+
function updateSegments (startTime, callback) {
var i
,timeDelta
,normalizedTime;
-
+
timeDelta = now() - startTime;
normalizedTime = timeDelta / CYCLE_SPEED;
-
+
for (i = 0; i < segments.length; i++) {
updateSegment(i, normalizedTime);
}
-
+
callback();
}
-
+
function loop () {
updateHandle = setTimeout(function () {
updateSegments(startTime, loop);
}, 1000 / 60);
}
-
+
function pause () {
if (isPlaying === false) {
return;
}
-
+
isPlaying = false;
pausedAtTime = Tweenable.util.now();
clearTimeout(updateHandle);
}
-
+
function play () {
if (isPlaying === true) {
return;
}
-
+
isPlaying = true;
startTime = Tweenable.util.now() - (pausedAtTime - startTime);
loop();
@@ -110,11 +109,11 @@
segmentContainer = document.getElementById(containerId);
segments = segmentContainer.children;
stepStateLists = [];
-
+
for (i = 0; i < segments.length; i++) {
stepStateLists.push([])
}
-
+
window.pause = pause;
window.play = play;
}
View
@@ -2,7 +2,7 @@
* Shifty <http://jeremyckahn.github.com/shifty/>
* Author: Jeremy Kahn - jeremyckahn@gmail.com
* License: MIT
- * Version: 0.5.6 (Tue, 31 Jan 2012 06:25:32 GMT)
+ * Version: 0.6.0 (Mon, 16 Apr 2012 03:00:56 GMT)
*/
;(function(){
@@ -1118,12 +1118,11 @@ MIT Lincense. This code free to use, modify, distribute and enjoy.
(function () {
- var R_CSS_UNITS = /(px|em|%|pc|pt|mm|cm|in|ex)/i,
- R_QUICK_CSS_UNITS = /([a-z]|%)/gi,
- savedTokenProps;
+ var R_FORMAT = /\D+/g;
+ var savedTokenProps;
function isValidString (str) {
- return typeof str === 'string' && R_CSS_UNITS.test(str);
+ return typeof str === 'string' && str.match(R_FORMAT);
}
function getTokenProps (obj) {
@@ -1132,10 +1131,16 @@ MIT Lincense. This code free to use, modify, distribute and enjoy.
collection = {};
Tweenable.util.each(obj, function (obj, prop) {
- if (isValidString(obj[prop])) {
- collection[prop] = {
- 'suffix': obj[prop].match(R_CSS_UNITS)[0]
- };
+ var rawString = obj[prop];
+
+ if (isValidString(rawString)) {
+ var templateChunks = rawString.match(R_FORMAT);
+
+ if (templateChunks.length === 1) {
+ templateChunks.unshift('');
+ }
+
+ collection[prop] = templateChunks;
}
});
@@ -1145,13 +1150,14 @@ MIT Lincense. This code free to use, modify, distribute and enjoy.
function deTokenize (obj, tokenProps) {
Tweenable.util.each(tokenProps, function (collection, token) {
// Extract the value from the string
- obj[token] = +(obj[token].replace(R_QUICK_CSS_UNITS, ''));
+ obj[token] = +(obj[token].replace(R_FORMAT, ''));
});
}
function reTokenize (obj, tokenProps) {
Tweenable.util.each(tokenProps, function (collection, token) {
- obj[token] = obj[token] + collection[token].suffix;
+ var tokenChunks = collection[token];
+ obj[token] = tokenChunks[0] + obj[token] + tokenChunks[1];
});
}
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -9,7 +9,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
-
+
<style type="text/css" media="screen">
#main {
background: #0f0;
@@ -40,7 +40,7 @@
<script type="text/javascript" charset="utf-8" src="../src/shifty.formulas.js"></script>
<script type="text/javascript" charset="utf-8" src="../src/shifty.color.js"></script>
<script type="text/javascript" charset="utf-8" src="../src/shifty.css_units.js"></script>
-
+
<script type="text/javascript" charset="utf-8">
var myTweenable = new Tweenable({
@@ -49,31 +49,31 @@
div = document.getElementById('main');
window.myTweenable = myTweenable;
-
+
myTweenable.tween({
from: {
- 'left': '0px'
- ,'top': '0px'
+ 'left': 'translateX(0px)'
+ ,'top': 'translateY(0px)'
,'color': '#0f0'
},
to: {
- 'left': '400px'
- ,'top': '200px'
+ 'left': 'translateX(400px)'
+ ,'top': 'translatey(200px)'
,'color': '#f0f'
},
'duration': 2500
,'step': function () {
- div.style.left = this.left;
- div.style.top = this.top;
- div.style.background = this.color;
+ var style = div.style;
+ style.MozTransform = style.webkitTransform = this.left + ' ' + this.top;
+ style.background = this.color;
}
,'easing': {
'left': 'bounce'
,'top': 'easeOutCirc'
,'color': 'easeInExpo'
}
});
-
+
</script>
</body>
View
@@ -12,12 +12,11 @@ MIT Lincense. This code free to use, modify, distribute and enjoy.
(function () {
- var R_CSS_UNITS = /(px|em|%|pc|pt|mm|cm|in|ex)/i,
- R_QUICK_CSS_UNITS = /([a-z]|%)/gi,
- savedTokenProps;
+ var R_FORMAT = /\D+/g;
+ var savedTokenProps;
function isValidString (str) {
- return typeof str === 'string' && R_CSS_UNITS.test(str);
+ return typeof str === 'string' && str.match(R_FORMAT);
}
function getTokenProps (obj) {
@@ -26,10 +25,16 @@ MIT Lincense. This code free to use, modify, distribute and enjoy.
collection = {};
Tweenable.util.each(obj, function (obj, prop) {
- if (isValidString(obj[prop])) {
- collection[prop] = {
- 'suffix': obj[prop].match(R_CSS_UNITS)[0]
- };
+ var rawString = obj[prop];
+
+ if (isValidString(rawString)) {
+ var templateChunks = rawString.match(R_FORMAT);
+
+ if (templateChunks.length === 1) {
+ templateChunks.unshift('');
+ }
+
+ collection[prop] = templateChunks;
}
});
@@ -39,13 +44,14 @@ MIT Lincense. This code free to use, modify, distribute and enjoy.
function deTokenize (obj, tokenProps) {
Tweenable.util.each(tokenProps, function (collection, token) {
// Extract the value from the string
- obj[token] = +(obj[token].replace(R_QUICK_CSS_UNITS, ''));
+ obj[token] = +(obj[token].replace(R_FORMAT, ''));
});
}
function reTokenize (obj, tokenProps) {
Tweenable.util.each(tokenProps, function (collection, token) {
- obj[token] = obj[token] + collection[token].suffix;
+ var tokenChunks = collection[token];
+ obj[token] = tokenChunks[0] + obj[token] + tokenChunks[1];
});
}
View
@@ -1 +1 @@
-0.5.6
+0.6.0

0 comments on commit ef38a4b

Please sign in to comment.