aboutsummaryrefslogtreecommitdiffstats
path: root/dirty.html
diff options
context:
space:
mode:
authorSaivan <savian@me.com>2018-09-17 14:50:56 +1000
committerSaivan <savian@me.com>2018-09-17 14:50:56 +1000
commita8373f5ee8902089d5ab3a915eb5a31b568d3728 (patch)
tree87607ae35c7f2b11da55fd8b69c3e800d5cfefbe /dirty.html
parent791bb2bab91a022d1b5265b40faa997ad9938ad7 (diff)
downloadsvg.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.html55
1 files changed, 23 insertions, 32 deletions
diff --git a/dirty.html b/dirty.html
index f7542e6..68a9aa8 100644
--- a/dirty.html
+++ b/dirty.html
@@ -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 )