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 or tasks), 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: Creating and running an animation requires the current time, which is best obtained with
AnimationFrame.times.
You can also specify the duration of animation, and delay it prior to starting.
Easing: An easing function makes an animation come alive with acceleration or even elasticity. You can find all kinds of crazy easing functions in 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. Animations go through three phases (not related to the three stages of
rendering): they are scheduled, they run, and then they are done.
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. You can also use static to
create animations of constant value. By using these two degenerate cases, you ought to be able to keep animations in
your model without worrying about when they aren't actually animating.
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. 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.
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). The animation will retain its average speed (but not necessarily
duration). 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's already done, from becomes the
old to, to and start are set to the values provided, and the delay is set to zero. If the old and new to values
are the same, the animation is unchanged.
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. Static animations are always done.
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, not accounting for delay. For animations created with animate, this is the
argument that was passed. 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 at the given time. 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.