test-animation-api.elm

module Main exposing (..)

import Style


------------ Style initialization ---------------


{-| Normal init

-}
style : Style.Animation
style =
    Style.init
        [ Rotate 0 Turn
        , Translate 0 0 Px
        ]


{-| Use initWith to set default interpolation strategy.

type Options
        = Spring { stiffness : Int
                 , damping : Int }
        | Ease { ease : Int -> Int
               , duration : Time
               }


-}
style : Style.Animation
style =
    Style.initWith
        (Spring
            { stiffness = 205
            , damping = 20
            }
        )
        [ Rotate 0 Turn
        , Translate 0 0 Px
        ]



-------------- Basic Animation -------------


{-| Interrupt any current animations
-}
style : Style.Animation
style =
    Style.to
        [ Rotate 0.7 Turn
        , Translate 90 40 Px
        ]
        |> Style.on model.style


{-| Update a style based on its previous values
-}
style : Style.Animation
style =
    Style.to
        [ Rotate ((+) 5) Turn
        , Translate ((+) 5) ((+) 5) Px
        ]
        |> Style.on model.style


{-| Add an animation to the queue
-}
style : Style.Animation
style =
    Style.wait (2 * second)
        |> Style.to
            [ Rotate 0.7 Turn
            , Translate 90 40 Px
            ]
        |> Style.queueOn model.style


{-| Set a one time use spring.

A default spring can be set on

    Style.initWith
        (Spring
            { stiffness = 205
            , damping = 20 }
        )
        initialStyle

-}
style : Style.Animation
style =
    Style.wait (2 * second)
        |> Style.with (Spring { stiffness = 205, damping = 20 })
            [ Rotate 0.7 Turn
            , Translate 90 40 Px
            ]
        |> Style.on model.style


{-| Send a message between keyframes
-}
style : Style.Animation
style =
    Style.wait (0.2 * second)
        |> Style.to
            [ Opacity 0
            , Translate 0 0 Px
            ]
        |> Style.send MyCustomMessage
        |> Style.to
            [ Rotate 0 Turn
            , Translate 0 0 Px
            ]
        |> Style.on model.style



----------------------------- Repeating --------------------------


{-|
Repeat an animation
-}
style : Style.Animation
style =
    Style.repeat 5
        (Style.wait (0.2 * second)
            |> Style.to
                [ Rotate 0 Turn
                , Translate 0 0 Px
                ]
        )
        |> Style.on model.style


{-|

Initial Animation and then a repetition
-}
style : Style.Animation
style =
    Style.to
        [ Rotate 0 Turn
        , Translate 0 0 Px
        ]
        |> Style.repeat 5
            (Style.wait (0.2 * second)
                |> Style.to
                    [ Rotate 1 Turn
                    ]
                |> Style.set
                    [ Rotate 0 Turn
                    ]
            )
        |> Style.on model.style



--------------------- Following a curve ----------------------------


{-| provide a function that describes where a prop should be along a certain curve

So, it takes a value from 0-1 and returns a value from 0-1 like an easing.

However the number it takes in is not the exact time, it's the time that would be given by linear easing.

-}
style : Style.Animation
style =
    let
        curve =
            { x = \x -> x ^ 2
            , y = \y -> sin (y * turns)
            }
    in
        Style.animate
            |> Style.follow
                [ Translate curve.x curve.y Px
                ]
            |> Style.to
                [ Rotate 0 Turn
                , Translate 0 0 Px
                ]
            |> Style.on model.style


{-|  Use `followWith` just like `Style.with`
-}
style : Style.Animation
style =
    let
        curve =
            { x = \x -> x ^ 2
            , y = \y -> sin (y * turns)
            }
    in
        Style.animate
            |> Style.followWith (Spring { stiffness = 205, damping = 20 })
                [ Translate curve.x curve.y Px
                ]
            |> Style.to
                [ Rotate 0 Turn
                , Translate 0 0 Px
                ]
            |> Style.on model.style



--------------------- Dealing With Forces -------------------------


{-| Apply a force to a style.  The values for the properties are given as (unit/s^2) * mass
Accepts a duration over which to apply the force.
Mass defaults to 1.
-}
style : Style.Animation
style =
    Style.Force.apply (1 * second)
        [ Rotate 0.1 Turn
        , Translate 5 5 Px
        ]
        |> Style.on model.style
style : Style.Animation
style =
    Style.Force.apply (1 * second)
        [ Rotate 0.1 Turn
        , Translate 5 5 Px
        ]
        |> Style.on model.style


{-| Set the mass for each value of each property
-}
style : Style.Animation
style =
    Style.Force.mass
        [ Rotate 1 Turn
        , Translate 200 200 Px
        ]
        model.style


{-| Clear forces on the selected attributes
-}
style : Style.Animation
style =
    Style.Force.clear model.style


{-| `Nudge` forces can be applied every tick.  They are used once and then disappear after each tick.
This allows for dynamically changing forces.  Forces are given as the same units as above.

-}
style : Style.Animation
style =
    Style.Force.nudge
        [ Rotate 0.1 Turn
        , Translate 5 5 Px
        ]
        |> Style.on model.style