A library for animating between two Float values. For example, animate a panel's width from 100px to 300px over 2 seconds, or make a button spin and grow on hover. Everything is a pure function, no signals in sight, so you can use it easily within your architecture. You can also inspect animations to determine if they are still running and for how long, and even smoothly retarget a different destination midflight.
The library encapsulates a 3-stage animation pipeline:
Timekeeping: You are expected to maintain a running clock, which could be as simple as Signal.foldp (+) 0 (Time.fps 30)
or part of your state and action types. You use this clock to create an animation and again to obtain the current
value. You can also specify a delay and the duration for your animation.
Easing: An easing function is what makes an animation come alive with acceleration and sometimes even elasticity. When setting the easing function for your animation, I recommend Dan's library. (Dan also has your back if you need to interpolate pairs or colors with the output of this library.)
Interpolation: It wouldn't be very useful is all animations went from 0 to 1 (the default), would it? You can
specify values to animate from and to. Furthermore, you can set the average speed (distance between these two
values per milisecond) instead of a duration.
Once you have your value at the current time, you can render it to any frontend you choose: Collage, Element, Html, turtles...
animation creates an animation starting at the given time (usually the current time). animate takes the current time
and an animation and produces the current value.
import Animation exposing (..)
import Time exposing (second)
myAnim = animation 0 |> from 100 |> to 300 |> duration (4*second) |> delay (1*second)
List.map (\t -> animate (t*second) myAnim) [0..6]
-- [100, 100, 129.29, 200, 270.71, 300, 300]Notice that the value remains constant during the delay and after the animation is done, and that sinusoidal easing in and out is applied by default. Animations go through three phases (not related to the three stages of rendering): they are scheduled, they run, and then they are done.
Create a static animation that is always the given value.
Produce the value of an animation at a given time.
You may set an animation's duration or speed but not both, since one determines the other.
Set the duration of an animation to the time specified. This setting overrides, and is overriden by, speed (last
application wins). Note that the Time argument is not the current running time but the duration to be set.
Set the average speed of an animation. Speed is the rate at which the animation progresses between the from and
to values per milisecond. Most easing functions will deviate from the average speed. You do not need to worry about
the sign. It is safe to alter the from and to values after setting speed, but a set speed will be overwritten by
duration.
Set the delay of an animation to the time specified. An animation will not start until after the delay. The default
delay is 0. Note that the Time argument is not the current running time but the delay to be set.
Set the easing function of an animation. It is expected that f 0 == 0 and f 1 == 1. The default is a sinusoidal
in-out.
Set the initial value of an animation. The default is 0.
Set the final value of an animation. The default is 1.
For animations that are already running, use retarget.
Run an animation in reverse from its current state, beginning immediately (even if the animation was delayed or has been done for a while).
Usually you don't want to undo an animation that has been retargeted; just retarget it again. Similarly, undoing an undone animation is frequently not what you want.
Change the to value of a running animation, without an abrupt change in velocity. The easing function will be
retained (but you can change it with ease). A new speed and duration will be chosen based on what makes the animation
smooth. If you retarget multiple animations at once (e.g. x and y), you will need to sync their durations (perhaps to
the timeRemaining in the old animations).
If the retargeted animation is still scheduled, the to value is replaced. If it is already done, from becomes the
old to, to and start are set to the values provided, and the delay is set to zero.
Equality on animations. Compared to (==) (which should not be used), this
function handles the conversion of speed and duration, and start and delay. It
also samples the easing functions, which may produce false positives (but
usually not in practice).
-- These are True
animation 0 `equals` animation 0
(animation 0 |> delay 10) `equals` animation 10
(animation 0 |> duration 1000) `equals` (animation 0 |> speed 0.001)
-- These are False
static 0 `equals` animation 0
(animation 0 |> from -1) `equals` animation 0
(animation 0 |> ease identity) `equals` animation 0Determine if an animation is scheduled, meaning that it has not yet changed value.
Determine if an animation is running, meaning that it is currently changing value.
Determine if an animation is done, meaning that it has arrived at its final value.
Get the time elapsed since the animation started playing (after the end of delay). Will be zero for animations that are still scheduled, and is not bounded for animations that are already done.
Get the time that the animation has yet to play (or be delayed) before becoming done. Will be zero for animations that are already done.
Get the current velocity of the animation, aproximated by looking 10ms forwards and backwards (the central difference). The velocity may be negative.
Get the start time of the animation, the argument to animate. For interrupted animations, this is when the
interruption occured.
Get the duration of the animation, not counting delay.
Get the average speed of the animation.
Get the delay of the animation.
Get the easing function of the animation.
Get the initial value of the animation.
Get the final value of the animation.
An Animation is an opaque type that represents a time-varying number (floating point value).
Create an animation that begins now. By default, animations have no delay, last 750ms, and interpolate between 0 and 1 with a sinusoidal easing function. All of these can be changed.