From: Ulrich-Matthias Schäfer Date: Thu, 20 Sep 2018 21:35:13 +0000 (+0200) Subject: adding optimized transformation function to speed up things a tiny bit X-Git-Tag: 3.0.0~60^2~11 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=f2ce5e6b1c8441194e0bcbc11b0a0d6bebccdfb9;p=svg.js.git adding optimized transformation function to speed up things a tiny bit --- diff --git a/dirty.html b/dirty.html index 66d2a01..aa270f0 100644 --- a/dirty.html +++ b/dirty.html @@ -362,36 +362,36 @@ setTimeout(runTransformation({ // rotate: 180, // }), 0.4 * wait) -const getConsole = (time) => { - return () => { - console.group(time) - console.log(0, rAnim.element()._transformationRunners[0] && rAnim.element()._transformationRunners[0].transforms.decompose().rotate) - console.log(1, rAnim.element()._transformationRunners[1] && rAnim.element()._transformationRunners[1].transforms.decompose().rotate) - console.log(2, rAnim.element()._transformationRunners[2] && rAnim.element()._transformationRunners[2].transforms.decompose().rotate) - console.log(3, rAnim.element()._transformationRunners[3] && rAnim.element()._transformationRunners[3].transforms.decompose().rotate) - console.log(4, rAnim.element()._transformationRunners[4] && rAnim.element()._transformationRunners[4].transforms.decompose().rotate) - console.groupEnd(time) - } -} - -logCall = (time) => { - setTimeout(getConsole(time), time) -} - -logCall(0.2 * wait) -logCall(0.3 * wait) -logCall(0.4 * wait) -logCall(0.5 * wait) -logCall(0.6 * wait) -logCall(0.7 * wait) -logCall(0.8 * wait) -logCall(0.9 * wait) -logCall(1 * wait) -logCall(1.1 * wait) -logCall(1.2 * wait) -logCall(1.3 * wait) -logCall(1.4 * wait) -logCall(1.5 * wait) +// const getConsole = (time) => { +// return () => { +// console.group(time) +// console.log(0, rAnim.element()._transformationRunners[0] && rAnim.element()._transformationRunners[0].transforms.decompose().rotate) +// console.log(1, rAnim.element()._transformationRunners[1] && rAnim.element()._transformationRunners[1].transforms.decompose().rotate) +// console.log(2, rAnim.element()._transformationRunners[2] && rAnim.element()._transformationRunners[2].transforms.decompose().rotate) +// console.log(3, rAnim.element()._transformationRunners[3] && rAnim.element()._transformationRunners[3].transforms.decompose().rotate) +// console.log(4, rAnim.element()._transformationRunners[4] && rAnim.element()._transformationRunners[4].transforms.decompose().rotate) +// console.groupEnd(time) +// } +// } +// +// logCall = (time) => { +// setTimeout(getConsole(time), time) +// } +// +// logCall(0.2 * wait) +// logCall(0.3 * wait) +// logCall(0.4 * wait) +// logCall(0.5 * wait) +// logCall(0.6 * wait) +// logCall(0.7 * wait) +// logCall(0.8 * wait) +// logCall(0.9 * wait) +// logCall(1 * wait) +// logCall(1.1 * wait) +// logCall(1.2 * wait) +// logCall(1.3 * wait) +// logCall(1.4 * wait) +// logCall(1.5 * wait) diff --git a/src/matrix.js b/src/matrix.js index e0bc08a..6e93578 100644 --- a/src/matrix.js +++ b/src/matrix.js @@ -34,10 +34,9 @@ SVG.Matrix = SVG.invent({ // Transform a matrix into another matrix by manipulating the space transform: function (o) { // Check if o is a matrix and then left multiply it directly - if (o.a != null) { + if (isMatrixLike(o)) { var matrix = new SVG.Matrix(o) - var newMatrix = this.lmultiply(matrix) - return newMatrix + return matrix.multiplyO(this) } // Get the proposed transformations and the current transformations @@ -47,14 +46,14 @@ SVG.Matrix = SVG.invent({ // Construct the resulting matrix var transformer = new SVG.Matrix() - .translate(t.rx, t.ry) + .translateO(t.rx, t.ry) .lmultiply(current) - .translate(-ox, -oy) - .scale(t.scaleX, t.scaleY) - .skew(t.skewX, t.skewY) - .shear(t.shear) - .rotate(t.theta) - .translate(ox, oy) + .translateO(-ox, -oy) + .scaleO(t.scaleX, t.scaleY) + .skewO(t.skewX, t.skewY) + .shearO(t.shear) + .rotateO(t.theta) + .translateO(ox, oy) // If we want the origin at a particular place, we force it there if (isFinite(t.px) || isFinite(t.py)) { @@ -62,11 +61,11 @@ SVG.Matrix = SVG.invent({ // TODO: Replace t.px with isFinite(t.px) const dx = t.px ? t.px - origin.x : 0 const dy = t.py ? t.py - origin.y : 0 - transformer = transformer.translate(dx, dy) + transformer.translateO(dx, dy) } // Translate now after positioning - transformer = transformer.translate(t.tx, t.ty) + transformer.translateO(t.tx, t.ty) return transformer }, @@ -88,13 +87,13 @@ SVG.Matrix = SVG.invent({ // Apply the standard matrix var result = new SVG.Matrix() - .translate(-ox, -oy) - .scale(sx, sy) - .shear(lam) - .rotate(theta) - .translate(tx, ty) - .lmultiply(this) - .translate(ox, oy) + .translateO(-ox, -oy) + .scaleO(sx, sy) + .shearO(lam) + .rotateO(theta) + .translateO(tx, ty) + .lmultiplyO(this) + .translateO(ox, oy) return result }, @@ -178,6 +177,10 @@ SVG.Matrix = SVG.invent({ // Left multiplies by the given matrix multiply: function (matrix) { + return this.clone().multiplyO(matrix) + }, + + multiplyO: function (matrix) { // Get the matrices var l = this var r = new SVG.Matrix(matrix) @@ -190,18 +193,23 @@ SVG.Matrix = SVG.invent({ var e = l.e + l.a * r.e + l.c * r.f var f = l.f + l.b * r.e + l.d * r.f - // Form the matrix and return it - var product = new SVG.Matrix(a, b, c, d, e, f) - return product + this.a = a + this.b = b + this.c = c + this.d = d + this.e = e + this.f = f + + return this }, lmultiply: function (matrix) { - var result = new SVG.Matrix(matrix).multiply(this) + var result = new SVG.Matrix(matrix).multiplyO(this) return result }, // Inverses matrix - inverse: function () { + inverseO: function () { // Get the current parameters out of the matrix var a = this.a var b = this.b @@ -225,12 +233,23 @@ SVG.Matrix = SVG.invent({ var nf = -(nb * e + nd * f) // Construct the inverted matrix - return new SVG.Matrix(na, nb, nc, nd, ne, nf) + this.a = na + this.b = nb + this.c = nc + this.d = nd + this.e = ne + this.f = nf + + return this + }, + + inverse: function () { + return this.clone().inverseO() }, // Translate matrix translate: function (x, y) { - return new SVG.Matrix(this).translateO(x, y) + return this.clone().translateO(x, y) }, translateO: function (x, y) { @@ -241,6 +260,10 @@ SVG.Matrix = SVG.invent({ // Scale matrix scale: function (x, y, cx, cy) { + return this.clone().scaleO(x, y, cx, cy) + }, + + scaleO: function (x, y, cx, cy) { // Support uniform scaling if (arguments.length === 1) { y = x @@ -252,37 +275,50 @@ SVG.Matrix = SVG.invent({ // Scale the current matrix var scale = new SVG.Matrix(x, 0, 0, y, 0, 0) - var matrix = this.around(cx, cy, scale) - return matrix + return this.aroundO(cx, cy, scale) }, // Rotate matrix rotate: function (r, cx, cy) { + return this.clone().rotateO(r, cx, cy) + }, + + rotateO: function (r, cx, cy) { // Convert degrees to radians r = SVG.utils.radians(r) // Construct the rotation matrix var rotation = new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0) - var matrix = this.around(cx, cy, rotation) - return matrix + return this.aroundO(cx, cy, rotation) }, // Flip matrix on x or y, at a given offset flip: function (axis, around) { - return axis === 'x' ? this.scale(-1, 1, around, 0) - : axis === 'y' ? this.scale(1, -1, 0, around) - : this.scale(-1, -1, axis, around || axis) // Define an x, y flip point + return this.clone().flipO(axis, around) + }, + + flipO: function (axis, around) { + return axis === 'x' ? this.scaleO(-1, 1, around, 0) + : axis === 'y' ? this.scaleO(1, -1, 0, around) + : this.scaleO(-1, -1, axis, around || axis) // Define an x, y flip point }, // Shear matrix shear: function (a, cx, cy) { + return this.clone().shearO(a, cx, cy) + }, + + shearO: function (a, cx, cy) { var shear = new SVG.Matrix(1, 0, a, 1, 0, 0) - var matrix = this.around(cx, cy, shear) - return matrix + return this.aroundO(cx, cy, shear) }, // Skew Matrix skew: function (x, y, cx, cy) { + return this.clone().skewO(x, y, cx, cy) + }, + + skewO: function (x, y, cx, cy) { // support uniformal skew if (arguments.length === 1) { y = x @@ -298,8 +334,7 @@ SVG.Matrix = SVG.invent({ // Construct the matrix var skew = new SVG.Matrix(1, Math.tan(y), Math.tan(x), 1, 0, 0) - var matrix = this.around(cx, cy, skew) - return matrix + return this.aroundO(cx, cy, skew) }, // SkewX @@ -307,16 +342,28 @@ SVG.Matrix = SVG.invent({ return this.skew(x, 0, cx, cy) }, + skewXO: function (x, cx, cy) { + return this.skewO(x, 0, cx, cy) + }, + // SkewY skewY: function (y, cx, cy) { return this.skew(0, y, cx, cy) }, + skewYO: function (y, cx, cy) { + return this.skewO(0, y, cx, cy) + }, + // Transform around a center point - around: function (cx, cy, matrix) { + aroundO: function (cx, cy, matrix) { var dx = cx || 0 var dy = cy || 0 - return this.translate(-dx, -dy).lmultiply(matrix).translate(dx, dy) + return this.translateO(-dx, -dy).lmultiply(matrix).translateO(dx, dy) + }, + + around: function (cx, cy, matrix) { + return this.clone().aroundO(cx, cy, matrix) }, // Convert to native SVGMatrix @@ -386,3 +433,13 @@ SVG.Matrix = SVG.invent({ } } }) + +// let extensions = {} +// ['rotate'].forEach((method) => { +// let methodO = method + 'O' +// extensions[method] = function (...args) { +// return new SVG.Matrix(this)[methodO](...args) +// } +// }) +// +// SVG.extend(SVG.Matrix, extensions) diff --git a/src/runner.js b/src/runner.js index 09d9703..b69b1d6 100644 --- a/src/runner.js +++ b/src/runner.js @@ -48,7 +48,6 @@ SVG.Runner = SVG.invent({ this.tags = {} // Save transforms applied to this runner - // this.transforms = [new SVG.Matrix()] this.transforms = new SVG.Matrix() this.transformId = 1 @@ -297,7 +296,6 @@ SVG.Runner = SVG.invent({ this._initialise(running) // clear the transforms on this runner so they dont get added again and again - // this.transforms = [new SVG.Matrix()] this.transforms = new SVG.Matrix() var converged = this._run(declarative ? dt : position) // this.fire('step', this) @@ -305,9 +303,9 @@ SVG.Runner = SVG.invent({ // correct the done flag here // declaritive animations itself know when they converged this.done = this.done || (converged && declarative) - if (this.done) { - this.fire('finish', this) - } + // if (this.done) { + // this.fire('finish', this) + // } return this }, @@ -450,13 +448,12 @@ SVG.Runner = SVG.invent({ }, addTransform: function (transform, index) { - // this.transforms[index] = transform this.transforms = this.transforms.lmultiply(transform) + // this._element.addToCurrentTransform(transform) return this }, clearTransform: function () { - // this.transforms = [new SVG.Matrix()] this.transforms = new SVG.Matrix() return this } @@ -546,6 +543,8 @@ function mergeTransforms () { if (lastRunner == runners[0]) { this._frameId = null } + + this._currentTransformCache = runners[0].transforms } @@ -576,7 +575,13 @@ SVG.extend(SVG.Element, { }) }, + addToCurrentTransform (transform) { + this._currentTransformCache = this._currentTransformCache.lmultiply(transform) + return this + }, + _currentTransform (current) { + // return this._currentTransformCache return this._transformationRunners // we need the equal sign here to make sure, that also transformations // on the same runner which execute before the current transformation are @@ -600,6 +605,7 @@ SVG.extend(SVG.Element, { new SVG.FakeRunner(new SVG.Matrix(this)) ] + // this._currentTransformCache = new SVG.Matrix(this) this._frameId = SVG.Element.frameId++ } },