Add scaling example.

README.md

@@ -13,3 +13,9 @@
 ![Highlight](gifs/highlight.gif)
 
 ![Clipping](gifs/clip_rect.gif)
+
+Animations can be reused, scaled and stretched in time. This example
+reused four different animations of different lengths, scales their runtime
+so they're all in sync, and increases the playback speed.
+
+![Scaling](gifs/scaling.gif)

src/Reanimate/Combinators.hs

@@ -133,7 +133,7 @@ signalOscillate from to = proc () -> do
 
 adjustSpeed :: Double -> Ani a -> Ani a
 adjustSpeed factor (Animation d fn) =
-  Animation (d/factor) (\dur t -> fn dur ((t*factor) `mod'` dur))
+  Animation (d/factor) (\dur t -> fn dur (t*factor))
 
 freeze :: Double -> Ani a -> Ani a
 freeze d (Animation d' fn) =
@@ -142,3 +142,14 @@ freeze d (Animation d' fn) =
 loop :: Ani a -> Ani a
 loop (Animation d fn) =
   Animation d (\dur t -> fn dur (mod' t d))
+
+sync :: Ani () -> Ani () -> Ani ()
+sync (Animation d1 fn1) (Animation d2 fn2) =
+  Animation (max d1 d2) $ \dur t () -> do
+    fn1 dur (t*(d1/maxDuration)) ()
+    fn2 dur (t*(d2/maxDuration)) ()
+  where
+    maxDuration = max d1 d2
+
+syncAll :: [Ani ()] -> Ani ()
+syncAll = foldl sync (arr (pure ()))

src/Reanimate/Examples.hs

@@ -1,4 +1,4 @@
-{-# LANGUAGE OverloadedStrings, Arrows #-}
+{-# LANGUAGE OverloadedStrings, Arrows, ParallelListComp #-}
 module Reanimate.Examples where
 
 import Lucid.Svg
@@ -220,3 +220,14 @@ circle_clip sub = proc () -> do
       g_ [clip_path_ $ "url(#"<>uniqName<>")"]
   where
     uniqName = "clip" -- XXX: Not very unique?
+
+
+scaling :: Ani ()
+scaling = adjustSpeed 2 $ defineAnimation $ syncAll
+  [ proc () ->
+    annotate' (defineAnimation animation)
+      -< g_ [transform_ $ translate x y] . g_ [transform_ $ scale 0.5 0.5]
+  | x <- [0,160]
+  , y <- [0,90]
+  | animation <- [sinewave, morph_wave, highlight, progressMeters]
+  ]

src/SvgViewer.hs

@@ -15,7 +15,7 @@ import Data.Time
 import Reanimate.Arrow
 import Reanimate.Examples
 
-animation = clip_rect
+animation = scaling
 
 main :: IO ()
 main = do