diff options
author | Saivan <savian@me.com> | 2018-09-17 14:50:56 +1000 |
---|---|---|
committer | Saivan <savian@me.com> | 2018-09-17 14:50:56 +1000 |
commit | a8373f5ee8902089d5ab3a915eb5a31b568d3728 (patch) | |
tree | 87607ae35c7f2b11da55fd8b69c3e800d5cfefbe /dirty.html | |
parent | 791bb2bab91a022d1b5265b40faa997ad9938ad7 (diff) | |
download | svg.js-a8373f5ee8902089d5ab3a915eb5a31b568d3728.tar.gz svg.js-a8373f5ee8902089d5ab3a915eb5a31b568d3728.zip |
Refactored the getOrigin helper to help fix the relative affine animations
This commit refactors the getOrigin helper, in order to send the origin to the correct
space. The origin should be expressed in the space of the last animation.
Changes
=======
- Refactored the getOrigin helper
- Added a simple example to the dirty file to test multiple transformations
Diffstat (limited to 'dirty.html')
-rw-r--r-- | dirty.html | 55 |
1 files changed, 23 insertions, 32 deletions
@@ -305,40 +305,31 @@ let wait = 1000 let rAnim = r.clone().attr('fill', '#f00').animate(wait).attr('fill', '#0f0') let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.Spring(wait, 15)) -// // Move once -// setTimeout(() => { -// let trans = {tx: 500, ty: 300} -// r.transform(trans, true) -// // rAnim.animate(wait, 0, 'start').transform(trans, true) -// rDecl.transform(trans, true) -// }, wait) - -// Move again -setTimeout(() => { - let transform = { - origin: 'top-left', - translate: [530, 250], - rotate: 300, - scale: 2, - shear: 1, +let runTransformation = (transform) => { + return () => { + let relative = false + let affine = false + r.transform(transform, relative) + rAnim.animate(wait).transform(transform, relative, affine) + rDecl.transform(transform, relative, affine) } - let relative = true - let affine = false - r.transform(transform, relative) - rAnim.animate(wait).transform(transform, relative, affine) - rDecl.transform(transform, relative, affine) -}, 0.1 * wait ) - - -// declaritive relative (affine/nonaffine) -// declaritive absolute non affine -// normal non affine relative - -// D N -// R -// A - +} +setTimeout(runTransformation({ + origin: 'top-left', + translate: [530, 250], + rotate: 300, + scale: 2, + shear: 1, +}), 0.1 * wait ) + +// setTimeout(runTransformation({ +// origin: 'top-left', +// translate: [530, 250], +// rotate: 800, +// scale: 2, +// shear: 1, +// }), wait ) |