From ee38cefead9c2803db3a4076a505b8b9eb3947e8 Mon Sep 17 00:00:00 2001
From: Saivan <savian@me.com>
Date: Wed, 11 Jul 2018 16:39:37 +1000
Subject: 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
---
 dirty.html | 143 ++++++++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 90 insertions(+), 53 deletions(-)

(limited to 'dirty.html')

diff --git a/dirty.html b/dirty.html
index ea40868..db16942 100644
--- 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)
-})
 
 
 
-- 
cgit v1.2.3