reanimate-0.4.1.0: Animation library based on SVGs.

Reanimate.Animation

Synopsis

# Documentation

Duration of an animation or effect. Usually measured in seconds.

type Time = Double Source #

Time signal. Goes from 0 to 1, inclusive.

type SVG = Tree Source #

data Animation Source #

Animations are SVGs over a finite time.

Constructors

 Animation Duration (Time -> SVG)

# Creating animations

animate :: (Time -> SVG) -> Animation Source #

Construct an animation with a duration of 1.

Create an animation with provided duration, which consists of stationary frame displayed for its entire duration.

Empty animation (no SVG output) with a fixed duration.

Example:

pause 1 seqA drawProgress

# Querying animations

Query the duration of an animation.

Calculate the frame that would be displayed at given point in time of running animation.

The provided time parameter is clamped between 0 and animation duration.

# Composing animations

Play animations in sequence. The lhs animation is removed after it has completed. New animation duration is 'duration lhs + duration rhs'.

Example:

drawBox seqA drawCircle

Play left animation and freeze on the last frame, then play the right animation. New duration is 'duration lhs + duration rhs'.

Example:

drawBox andThen drawCircle

Play two animation concurrently. Shortest animation freezes on last frame. New animation duration is 'max (duration lhs) (duration rhs)'.

Example:

drawBox parA adjustDuration (*2) drawCircle

Play two animation concurrently. Shortest animation loops. New animation duration is 'max (duration lhs) (duration rhs)'.

Example:

drawBox parLoopA adjustDuration (*2) drawCircle

Play two animation concurrently. Animations disappear after playing once. New animation duration is 'max (duration lhs) (duration rhs)'.

Example:

drawBox parLoopA adjustDuration (*2) drawCircle

# Modifying animations

Set the duration of an animation by adjusting its playback rate. The animation is still played from start to finish without being cropped.

Change the duration of an animation. Animates are stretched or squished (rather than truncated) to fit the new duration.

mapA :: (SVG -> SVG) -> Animation -> Animation Source #

Map over the SVG produced by an animation at every frame.

Example:

mapA (scale 0.5) drawCircle

takeA duration animation creates a new animation consisting of initial segment of animation of given duration, played at the same rate as the original animation.

The duration parameter is clamped to be between 0 and animation's duration. New animation duration is equal to (eventually clamped) duration.

dropA duration animation creates a new animation by dropping initial segment of length duration from the provided animation, played at the same rate as the original animation.

The duration parameter is clamped to be between 0 and animation's duration. The duration of the resulting animation is duration of provided animation minus (eventually clamped) duration.

Freeze the last frame for t seconds at the end of the animation.

Example:

pauseAtEnd 1 drawProgress

Freeze the first frame for t seconds at the beginning of the animation.

Example:

pauseAtBeginning 1 drawProgress

Freeze the first and the last frame of the animation for a specified duration.

Example:

pauseAround 1 1 drawProgress

Loop animation n number of times. This number may be fractional and it may be less than 1. It must be greater than or equal to 0, though. New duration is n*duration input.

Example:

repeatA 1.5 drawCircle

Play an animation in reverse. Duration remains unchanged. Shorthand for: signalA reverseS.

Example:

reverseA drawCircle

Play animation before playing it again in reverse. Duration is twice the duration of the input.

Example:

playThenReverseA drawCircle

Modify the time component of an animation. Animation duration is unchanged.

Example:

signalA (fromToS 0.25 0.75) drawCircle

Arguments

 :: Time value between 0 and 1. The frame displayed at this point in the original animation will be displayed for the duration of the new animation -> Animation original animation, from which the frame will be taken -> Animation new animation consisting of static frame displayed for the duration of the original animation

freezeAtPercentage time animation creates an animation consisting of stationary frame, that would be displayed in the provided animation at given time. The duration of the new animation is the same as the duration of provided animation.

Overlay animation on top of static SVG image.

Example:

addStatic (mkBackground "lightblue") drawCircle

# Misc

(#) :: a -> (a -> b) -> b Source #

data Sync Source #

Constructors

 SyncStretch SyncLoop SyncDrop SyncFreeze

# Rendering

Arguments

 :: Maybe Number The number to use as value of the width attribute of the resulting top-level svg element. If Nothing, the width attribute won't be rendered. -> Maybe Number Similar to previous argument, but for height attribute. -> SVG SVG to render -> String String representation of SVG XML markup