SVG transforms now work properly with fromTo()
method, no need to do crossCheck
for the method
This commit is contained in:
parent
0e917b933b
commit
eee3554bd0
2
demo/src/kute-svg.min.js
vendored
2
demo/src/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/src/kute.min.js
vendored
2
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/kute-svg.min.js
vendored
2
dist/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/kute.min.js
vendored
2
dist/kute.min.js
vendored
File diff suppressed because one or more lines are too long
23
kute-svg.js
23
kute-svg.js
|
@ -324,7 +324,7 @@
|
|||
var svgTransformObject = {}, bb = this.element.getBBox(),
|
||||
cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, // by default the transformOrigin is "50% 50%" of the shape box
|
||||
origin = this.options.transformOrigin, translation;
|
||||
|
||||
|
||||
origin = !!origin ? (origin instanceof Array ? origin : origin.split(/\s/)) : [cx,cy];
|
||||
|
||||
origin[0] = typeof origin[0] === 'number' ? origin[0] : parseStringOrigin(origin[0],bb);
|
||||
|
@ -372,11 +372,11 @@
|
|||
x += complex ? b.origin[0] : 0; y += complex ? b.origin[1] : 0; // normalizing ends with the addition of the transformOrigin to the translation
|
||||
|
||||
// finally we apply the transform attribute value
|
||||
l.setAttribute('transform', ( x||y ? ('translate(' + (x*10>>0)/10 + ( y ? (',' + ((y*100>>0)/100)) : '') + ')') : '' )
|
||||
+( rotate ? 'rotate(' + (rotate*100>>0)/100 + ')' : '' )
|
||||
+( skewX ? 'skewX(' + (skewX*10>>0)/10 + ')' : '' )
|
||||
+( skewY ? 'skewY(' + (skewY*10>>0)/10 + ')' : '' )
|
||||
+( scale !== 1 ? 'scale(' + (scale*1000>>0)/1000 +')' : '' ) );
|
||||
l.setAttribute('transform', ( x||y ? ('translate(' + (x*100>>0)/100 + ( y ? (',' + ((y*100>>0)/100)) : '') + ')') : '' )
|
||||
+( rotate ? 'rotate(' + (rotate*100>>0)/100 + ')' : '' )
|
||||
+( skewX ? 'skewX(' + (skewX*10>>0)/10 + ')' : '' )
|
||||
+( skewY ? 'skewY(' + (skewY*10>>0)/10 + ')' : '' )
|
||||
+( scale !== 1 ? 'scale(' + (scale*1000>>0)/1000 +')' : '' ) );
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -392,12 +392,11 @@
|
|||
}
|
||||
|
||||
crossCheck.svgTransform = function() { // helper function that helps preserve current transform properties into the objects
|
||||
if (!this.options.rpr) return;
|
||||
var valuesStart = this.valuesStart.svgTransform, valuesEnd = this.valuesEnd.svgTransform,
|
||||
currentTransform = parseTransformObject.call(this, parseTransformString(this.element.getAttribute('transform')) );
|
||||
|
||||
for ( var i in currentTransform ) { // populate the valuesStart first
|
||||
valuesStart[i] = currentTransform[i];
|
||||
}
|
||||
for ( var i in currentTransform ) { valuesStart[i] = currentTransform[i]; } // populate the valuesStart first
|
||||
|
||||
// now try to determine the REAL translation
|
||||
var parentSVG = this.element.ownerSVGElement,
|
||||
|
@ -411,12 +410,8 @@
|
|||
|
||||
valuesStart.translate = [newTransform.matrix.e,newTransform.matrix.f]; // finally the translate we're looking for
|
||||
|
||||
newTransform = null;
|
||||
|
||||
// copy existing and unused properties to the valuesEnd
|
||||
for ( var i in valuesStart) {
|
||||
if ( !(i in valuesEnd)) { valuesEnd[i] = valuesStart[i]; }
|
||||
}
|
||||
for ( var i in valuesStart) { if ( !(i in valuesEnd)) { valuesEnd[i] = valuesStart[i]; } }
|
||||
}
|
||||
|
||||
return this;
|
||||
|
|
4
kute.js
4
kute.js
|
@ -601,7 +601,7 @@
|
|||
this.valuesStart = {}; // valuesStart
|
||||
|
||||
preparePropertiesObject.call(this,endObject,'end'); // valuesEnd
|
||||
if ( options.rpr ) { this.valuesStart = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart
|
||||
if ( this.options.rpr ) { this.valuesStart = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart
|
||||
|
||||
if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { // element transform perspective
|
||||
var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px)';
|
||||
|
@ -609,7 +609,7 @@
|
|||
}
|
||||
|
||||
for ( var e in this.valuesEnd ) {
|
||||
if (e in crossCheck && !options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
|
||||
if (e in crossCheck && !this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
|
||||
}
|
||||
|
||||
this.options.chain = []; // chained Tweens
|
||||
|
|
Loading…
Reference in a new issue