macro_rules! motion {
( enter : $kind:ident $distance:expr ; $($rest:tt)* ) => { ... };
( enter : $kind:ident ; $($rest:tt)* ) => { ... };
( exit : $kind:ident $distance:expr ; $($rest:tt)* ) => { ... };
( exit : $kind:ident ; $($rest:tt)* ) => { ... };
( $($decls:tt)* ) => { ... };
}Expand description
A Motion as a block of declarations.
Timing first, tweens after — though the order is yours; the only rule is
that enter: / exit: must come first, because they pick the
constructor rather than chain onto it.
ⓘ
motion! {
enter: slide_up 24; // a preset, optionally with its distance
duration: 420; // ms
delay: 80;
end_delay: 120;
ease: out back; // direction + curve
repeat: forever; // or `once`, or a count
alternate; // bare flags
reversed;
margins; // offsets as margins, for a pinned element
opacity: 0 => 1; // prop: from => to
y: 0 => [-30, 0]; // or a list of legs
bg: color!("#111") => color!("#333");
}Easings: linear, spring, steps(4), or a direction and a curve —
in/out/in_out over quad, cubic, quart, quint, sine,
expo, circ, back, elastic, bounce. Any Easing
expression works too.
Presets: fade, slide_up, slide_down, slide_left,
slide_right.
Props: opacity, x, y, w/width, h/height, mt/mr/mb/
ml, pt/pr/pb/pl, radius, border_width, gap, font_size,
bg/background, border_color, color, rotate, scale, and
custom("name") for a number that is not a style at all. Numbers are px
(or degrees, or a multiplier); colours are any Into<Hsla>.