Skip to content

Instantly share code, notes, and snippets.

@thednp
Last active September 1, 2016 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thednp/973fe52b5a9b668724687497f5a6973c to your computer and use it in GitHub Desktop.
Save thednp/973fe52b5a9b668724687497f5a6973c to your computer and use it in GitHub Desktop.
var t = 'translate', s = 'scale', r = 'rotate', k = 'skew', x = 'translateX', y = 'translateY', z = 'translateZ', t3d = 'translate3d',
sx = 'skewX', sy = 'skewY', rx = 'rotateX', ry = 'rotateY', rz = 'rotateZ', p3d = 'perspective',
sp = '(', ep = ') ', cm = ',';
var interpolateCSSTransform = function(l,p,a,b,v) {
var tr = '';
if ('perspective' in b){ tr += b['perspective']; } // 3d perspective always goes first
if (t in b ) {
if ('x' in b[t]) { // translate 2D
tr += t + sp + unit( a[t]['x'].value,b[t]['x'].value,b[t]['x'].unit,v)
+ cm + unit( a[t]['y'].value,b[t]['y'].value,b[t]['y'].unit,v) + ep;
}
if (x in b[t]) { // translate 3D
tr += t3d + sp + unit( a[t][x].value,b[t][x].value,b[t][x].unit,v)
+ cm + unit( a[t][y].value,b[t][y].value,b[t][y].unit,v)
+ cm + unit( a[t][z].value,b[t][z].value,b[t][z].unit,v) + ep;
}
}
if (r in b ) {
if ('z' in b[r]) { tr += r + sp + unit( a[r]['z'].value,b[r]['z'].value,b[r]['z'].unit,v) + ep; } // rotate 2D
if ( rx in b[r]) { tr += rx + sp + unit( a[r][rx].value,b[r][rx].value,b[r][rx].unit,v) + ep; } // rotateX
if ( ry in b[r]) { tr += ry + sp + unit( a[r][ry].value,b[r][ry].value,b[r][ry].unit,v) + ep; } // rotateY
if ( rz in b[r]) { tr += rz + sp + unit( a[r][rz].value,b[r][rz].value,b[r][rz].unit,v) + ep; } // rotateZ
}
if ( k in b ) {
if ( sx in b[k]) { tr += sx + sp + unit( a[k][sx].value,b[k][sx].value,b[k][sx].unit,v) + ep; } // skewX
if ( sy in b[k]) { tr += sy + sp + unit( a[k][sy].value,b[k][sy].value,b[k][sy].unit,v) + ep; } // skewY
}
if ( s in b ) { tr += s + sp + number( a[s].value,b[s].value, v) + ep; } // scale
l.style[p] = tr;
};
var interpolateSVGTransform = function(w,p,v) {
var tr = '', tf = 'transform', t = 'translate', s = 'scale', sx = 'skewX', sy = 'skewY', r = 'rotate',
_t = t in w._vE[p], _r = r in w._vE[p], _s = s in w._vE[p], _sx = sx in w._vE[p], _sy = sy in w._vE[p], __ = ' ',
n = K.int.number, sp = '(', ep = ')', cm = ',',
_xIsY = _t && (w._vS[p][t][1] === w._vE[p][t][1] && w._vE[p][t][1] === 0);
tr += _t ? t + sp + n( w._vS[p][t][0],w._vE[p][t][0], v) // translate
+ (!_xIsY ? cm + n( w._vS[p][t][1],w._vE[p][t][1], v) : '') + ep : '';
tr += _s ? s + sp + n( w._vS[p][s],w._vE[p][s], v) + ep : ''; // scale
tr += _r ? r + sp + n( w._vS[p][r][0],w._vE[p][r][0], v) + __ // rotate | make sure to always use the right transform-origin
+ (!w.reversed ? w._vE[p][r][1] + cm + w._vE[p][r][2] : w._vS[p][r][1] + cm + w._vS[p][r][2]) + ep : '';
tr += _sx ? sx + sp + n( w._vS[p][sx],w._vE[p][sx], v) + ep : ''; // skewX
tr += _sy ? sy + sp + n( w._vS[p][sy],w._vE[p][sy], v) + ep : ''; // skewY
w._el.setAttribute(tf, tr );
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment