Added first example of animation

Author: andreaferretti

src/main/scala/demo/animate.scala

@@ -0,0 +1,41 @@
+package demo
+
+import scala.scalajs.js.Date
+import org.scalajs.dom.window
+import japgolly.scalajs.react.BackendScope
+
+
+object animate {
+  trait Interpolable[A] {
+    def mix(a: A, b: A, t: Double): A
+  }
+
+  case class AnimateOptions(
+    duration: Double = 500,
+    easing: Double => Double = identity
+  )
+
+  implicit val interpolateNumbers = new Interpolable[Double] {
+    def mix(a: Double, b: Double, t: Double) = a + (b - a) * t
+  }
+
+  implicit class AnimateBackendScope[P, S](val $: BackendScope[P, S]) extends AnyVal {
+    def animateState(finalState: S, options: AnimateOptions = AnimateOptions())(implicit i: Interpolable[S]) = {
+      val start = Date.now()
+      val initialState = $._state
+
+      def update(d: Double = 0): Unit = {
+        val now = Date.now()
+        val t = ((now - start) / options.duration) min 1
+        $.setState(i.mix(initialState, finalState, options.easing(t)))
+
+        if (t < 1) window.requestAnimationFrame(update _)
+      }
+
+      update()
+    }
+
+    def animateModState(mod: S => S, options: AnimateOptions = AnimateOptions())(implicit i: Interpolable[S]) =
+      animateState(mod($._state), options)
+  }
+}

src/main/scala/demo/components/logo.scala

@@ -1,27 +1,44 @@
 package demo.components
 
+import scala.util.Random
 import scala.scalajs.js
 import japgolly.scalajs.react._
-import japgolly.scalajs.react.vdom.all.{ a, h1, h3, href, div, className }
+import japgolly.scalajs.react.vdom.all.{ a, h1, h3, href, div, className, onClick }
 import japgolly.scalajs.react.vdom.svg.all._
 import paths.mid.Bezier
 
 import demo.colors._
+import demo.animate._
 
 
 object logo {
+  type Points = List[(Double, Double)]
+  implicit val interpolate = new Interpolable[Points] {
+    def mix(ps: Points, qs: Points, t: Double) =
+      ps zip qs map { case ((a, b), (c, d)) => (a + (c - a) * t, b + (d - b) * t) }
+  }
+  val points: Points = List(
+    (0, 50),
+    (50, 70),
+    (100, 40),
+    (150, 30),
+    (200, 60),
+    (250, 80),
+    (300, 50)
+  )
+
+  class Backend($: BackendScope[Unit, Points]) {
+    def randomize(ps: Points) = ps map { case (x, y) => (x, y - 25 + 50 * Random.nextDouble) }
+    def onClick(e: ReactEventI) = $.animateModState(randomize)
+  }
+
   val Logo = ReactComponentB[Unit]("Paths.js")
-    .render(_ => {
-      val line = Bezier(List(
-        (0, 50),
-        (50, 70),
-        (100, 40),
-        (150, 30),
-        (200, 60),
-        (250, 80),
-        (300, 50)
-      ))
+    .initialState(points)
+    .backend(new Backend(_))
+    .render((_, ps, b) => {
+      val line = Bezier(ps)
       val circles = line.path.points.map(p => circle(
+        onClick ==> b.onClick,
         r := 5,
         cx := p(0),
         cy := p(1),