Added a simple example for relative declarative animations

This commit adds an example that demonstrates how I'd imagine declarative animations
should work and how they should mirror what imperative animations would do

Changes
=======
- Added a simple declarative example

diff --git a/dirty.html b/dirty.html
index ea40868dc22a47c9b0d36cb4dc189ad6dd2bace9..db16942ee6bb21e460ce6060eb8edc6eea4581b9 100644 (file)
--- a/dirty.html
+++ b/dirty.html
@@ -207,10 +207,10 @@ rectangle.animate().transform({
 //
 let canvas = SVG('#canvas')
 
-SVG('#absolute').on('input slide', function (e) {
-  var val = e.target.value
-
-  canvas.clear()
+// SVG('#absolute').on('input slide', function (e) {
+//   var val = e.target.value
+//
+//   canvas.clear()
   // canvas.ellipse(20, 20)
   // let re = canvas.rect(300, 150).move(100, 150).attr('opacity', 0.5)
   // re.clone()
@@ -226,68 +226,105 @@ SVG('#absolute').on('input slide', function (e) {
   //   .transform({rotate: 45, skew: 30}, true)
   //   .transform({rotate: val, origin: 'bottom-right'}, true)
   //   .transform({skew}, true)
-  let a = canvas.rect(200, 400).move(500, 400)
-    .attr('opacity', 0.3)
-    .addClass('pink')
-    //.transform({ px: 100, py: 500, origin: 'top-left' })
-
-
-  var timer = 0
-  a.timeline().source(() => {
-    timer += 1
-    document.querySelector('#absolute span').textContent = timer
-    return timer
-  })
-
-  let obj = { rotate: val * 180, origin: 'top-left' }
-  let obj2 = { rotate: val * 280, origin: 'center' }
+//   let a = canvas.rect(200, 400).move(500, 400)
+//     .attr('opacity', 0.3)
+//     .addClass('pink')
+//     //.transform({ px: 100, py: 500, origin: 'top-left' })
+//
+//
+//   var timer = 0
+//   a.timeline().source(() => {
+//     timer += 1
+//     document.querySelector('#absolute span').textContent = timer
+//     return timer
+//   })
+//
+//   let obj = { rotate: val * 180, origin: 'top-left' }
+//   let obj2 = { rotate: val * 280, origin: 'center' }
+//
+//   a.clone() // startPosition
+//   a.clone().transform(obj, true).transform(obj2, true) // endPosition
+// })
 
-  a.clone() // startPosition
-  a.clone().transform(obj, true).transform(obj2, true) // endPosition
-})
+/**
+ * FUZZYS EXAMPLE
+ */
+// // // Make the pink rectangle
+// let a = canvas.rect(200, 400).move(500, 400)
+//   .attr('opacity', 0.3)
+//   .addClass('pink')
+//   .transform({ tx: 300, ty: 500, origin: 'top-left' })
+//
+//
+// var timer = 0
+// a.timeline().source(() => {
+//   timer += 1
+//   document.querySelector('#absolute span').textContent = timer
+//   return timer
+// })
+//
+// let obj = { rotate: 100, origin: 'top-left'}
+// let obj2 = { rotate: 280, origin: 'center' }
+// let obj3 = { rotate: 1000, origin: 'center', translate: [300, 200]}
+//
+//
+// // var c = a.clone()
+// // var d = a.clone()
+// //
+// //
+// // c.animate(1000)
+// //   //.transform(obj)
+// //   .transform(obj, true) // animation
+// //
+// // d.animate(3000)
+// //   //.transform(obj)
+// //   .transform(obj, true) // animation
+//
+// // a.clone().attr('fill', 'blue')
+// //   //.transform(obj)
+// //   .transform(obj2, true) // endPosition
+//
+// window.EL = canvas.ellipse(50, 50)
+//
+// let b = a.clone()
+// let bA = b.animate(new SVG.Spring(1000, 15))
+//
+// SVG.on(document, 'mousemove', (e) => {
+//   let {x, y} = canvas.point(e.clientX, e.clientY)
+//   bA.transform ({tx: x, ty: y, rotate: (x + y) / 3}, true)
+// })
+//
 
-// // Make the pink rectangle
-let a = canvas.rect(200, 400).move(500, 400)
+let r = canvas.rect(200, 400).move(100, 100)
   .attr('opacity', 0.3)
-  .addClass('pink')
   .transform({ tx: 300, ty: 500, origin: 'top-left' })
 
+// Normal usage
+let wait = 500
+let rAnim = r.clone().attr('fill', 'red').animate(wait)
+let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.Spring(wait, 15))
 
-var timer = 0
-a.timeline().source(() => {
-  timer += 1
-  document.querySelector('#absolute span').textContent = timer
-  return timer
-})
+// Move once
+setTimeout(() => {
+  let trans = {tx: 500, ty: 300}
+  r.transform(trans, true)
+  rAnim.animate(wait).transform(trans, true)
+  rDecl.transform(trans, true)
+}, wait)
 
-let obj = { rotate: 100, origin: 'top-left'}
-let obj2 = { rotate: 280, origin: 'center' }
-let obj3 = { rotate: 1000, origin: 'center', translate: [300, 200]}
+// Move again
+setTimeout(() => {
+  let trans = {rotate: 300}
+  r.transform(trans, true)
+  rAnim.animate(wait).transform(trans, true)
+  rDecl.transform(trans, true)
+}, wait)
 
 
-// var c = a.clone()
-// var d = a.clone()
-//
-//
-// c.animate(1000)
-//   //.transform(obj)
-//   .transform(obj, true) // animation
-//
-// d.animate(3000)
-//   //.transform(obj)
-//   .transform(obj, true) // animation
 
-// a.clone().attr('fill', 'blue')
-//   //.transform(obj)
-//   .transform(obj2, true) // endPosition
 
 
-let b = a.clone().animate(new SVG.Spring(1000, 15))
 
-SVG.on(document, 'mousemove', (e) => {
-  let {x, y} = canvas.point(e.clientX, e.clientY)
-  b.transform ({tx: x, ty: y, rotate: (x + y) / 3}, true)
-})
 
 
 

diff --git a/src/runner.js b/src/runner.js
index ceb42fe05acaf80ff104c48646ad6b768a6dc3fa..e82d641b5504e6cf23ec817ef166d92d7f519861 100644 (file)
--- a/src/runner.js
+++ b/src/runner.js
@@ -654,8 +654,8 @@ SVG.extend(SVG.Runner, {
       // add the runner to the element so it can merge transformations
       element.addRunner(this)
 
+      // Deactivate all transforms that have run so far if we are absolute
       if (!relative) {
-        // Deactivate all transforms that have run so far if we are absolute
         element._clearTransformRunnersBefore(this)
       }