animationExample.elm

import Color exposing (Color)
import Graphics.Collage exposing (collage, circle, move, filled)
import Graphics.Element exposing (Element, show)
import Signal exposing (Signal)
import Time

type alias Wave =
  { center : { x : Float, y : Float }
  , radius : Float
  , color : Color
  , alpha : Float
  }
 
initial : Wave
initial = 
  { center = { x = 0, y = 0 }
  , radius = 10
  , color = Color.blue
  , alpha = 1
  }

type Action 
  = Reset
  | Grow
  | Fade

type Timeline action = Timeline action (List (Frame action))
type alias Frame action = (Int, action)


ripple = 
  Timeline Reset 
    [ (100, Grow)
    , (100, Fade)
    ]
  

frame : Signal Int 
frame = 
  Signal.foldp (\x y -> y + 1) 0 (Time.fps 60)


playFrame : Timeline action -> Int -> Frame action 
playFrame (Timeline default list) n = 
  let 
      iterate i total list = 
        if i > n then (0, default) else 
          case list of
            []   -> (0, default)
            (m, a) :: xs -> 
              if n > total && n <= total + m
              then (n, a)
              else 
                iterate (i + m) (total + m) xs
                
  in 
      iterate 0 0 list


play : Timeline Action -> Signal (Frame Action)
play timeline = 
  Signal.map (playFrame timeline) frame


actions : Signal (Frame Action)
actions = 
  play ripple
  


update : Frame Action -> Wave -> Wave
update (i, action) wave = 
  case action of 
    Reset ->
      { wave | radius <- 0 }
    Grow  ->
      { wave | radius <- wave.radius + 1 }
    Fade  ->
      { wave | alpha  <- wave.alpha * 0.9 }
      

 
view : Wave -> Element
view wave = 
  let
      color' = 
        let 
            {red, green, blue} = Color.toRgb wave.color
        in
            Color.rgba red green blue wave.alpha
            
  in
      circle wave.radius
      |> filled color'
      |> move (wave.center.x, wave.center.y)
      |> (\x -> [x])
      |> collage 400 400
      
      
main : Signal Element    
main = 
 Signal.map view
   (Signal.foldp update initial actions)