A simple and minimal animation sequencer.
A Timeline
interpolates properties of a model based on a progress value that runs from 0.0 to 1.0,
in a given length of time.
An easing function can be applied to this. An easing function should map 0.0 to 0.0 and 1.0 to 1.0, but does not have to remain between these values for all other inputs. An easing function can produce negative values or ones greater than 1.0. For example an easing may overshoot the end value and then come back again, if it is emulating a spring.
The user provides a callback to interpolate a model between a start and end value using the eased progress value.
Several timelines can be combined inside an Animator
container. A subscription can be generated
for the animator that will only be active when it contains a timeline that has not completed
all of its progress. When the subscription is active is will produce messages with timestamps
provided by Browser.Events.onAnimationFrame
.
The active state messages can be applied to update the model using the animator and the step
function.
A Timeline describes the timeline of something being animated.
The timeline has a start time and value and an end time and value. Between those times, the value will be interpolated between its start and end values by a user supplied interpolation function.
Outside of the period between the start and end times, the timeline will be considerd inactive, and no timer subscription created for it.
timeline : { durationMs : Basics.Int, easing : Basics.Float -> Basics.Float, start : a, end : a, interpolate : a -> a -> Basics.Float -> a } -> Timeline a
Creates an animation Timeline by specifying:
* The duration in milliseconds the animation is to run for.
* An easing function (use `identity` is no easing is required).
* An interpolation function to update some model.
* The start and end states to animate betwen.
static : a -> Timeline a
Creates a Timeline that is inactive and has a static value.
staticIfInactive : a -> Timeline a -> Timeline a
Updates a timeline to a static value, but only if the timeline is not currently being animated.
This can be useful when blending user input with animations, and you want to ignore the user input until an animation has completed.
value : Timeline a -> a
Gets the current value from a timeline.
startValue : Timeline a -> a
Gets the start value from a timeline.
endValue : Timeline a -> a
Gets the end value from a timeline.
The Animator is a set of functions that know how to update the timelines in some model.
empty : Animator mdl
Creates an empty animator, to act as a container to which more timelines can be added.
animate : (mdl -> Timeline a) -> (Timeline a -> mdl -> mdl) -> Animator mdl -> Animator mdl
Adds a timeline to animate to the Animator. Functions to extract and update the timeline on some model must be given.
subscriptions : Animator mdl -> (Time.Posix -> msg) -> mdl -> Platform.Sub.Sub msg
Given an animation and a function to create a message from a timestamp, will generate a subscription to listen to the animation frame callback and generate messages when it is ready.
The subscription will only be active if the animation has active animated states, so that timer messages will not be generated unnecessarily.
step : Time.Posix -> Animator mdl -> mdl -> mdl
Steps the animator to the given posix timestamp.
All of the timelines under its control will be updated.