Glissade

Glissade is a Rust animations and transitions library. It's framework-agnostic with optional euclid, nalgebra, cgmath, glam, and palette support. To make it work, you need to enable the corresponding feature.

The lib contains two main types: Animation and Inertial.

• Animation contains Keyframes and can be used in cases when we know start, end, and in between points. It's similar to CSS animations/keyframes.
• Inertial can be used to make an object smoothly follow a target value. It's similar to CSS transitions. For example, a particle following a cursor. Background color changing smoothly on theme change.

It also contains a set of easing functions to make animations more natural. See the Easing enum for more details.

To make code more general the library contains Animated trait which is implemented for both Animation and Inertial. With Stationary trait it's easy to pass static value in places where Animated expected. By default, it's implemented for primitive types like numbers or strings.

Most of the methods receive time as a parameter to allow testing without mocks, and have a consistent behavior during a single animation frame. It's expected that time is received, for example, from Instant::now() once at the beginning of the frame, and used lately during the frame rendering.

Any type that implements Time trait can be used as a time type. By default, it's implemented for std::time::Instant, std::time::SystemTime, f32, and f64. It's also implemented for web_time::* if "web-time" feature is enabled. It's recommended to use web_time::Instant and web_time::Duration as a time type in most cases.

Animation can be applied to any type that implements Mix trait. This trait is used to interpolate between two values. Mix trait is implemented for common types like f32, f64, bool, i8 - i64, u8 - u64, Option<T: Mix>, and tuples like (Mix, Mix), (Mix, Mix, Mix), etc. It's also implemented for some popular libraries: nalgebra, euclid, cgmath, glam, and palette.

Besides Mix, the library contains Distance trait to calculate the distance between two values. If your type implements Distance, you can use Keyframes::poly_to to animate a value along a path. Check the examples section for more details.

The full documentation is available on docs.rs.

Derive macro

The library contains a derive macro to implement the Mix trait for structs and tuples.

use glissade::Mix;
#[derive(Mix, PartialEq, Debug)]
struct Touch {
   x: f32,
   y: f32,
   pressure: u8,
}
let touch1 = Touch { x: 0.0, y: 0.0, pressure: 0 };
let touch2 = Touch { x: 100.0, y: 100.0, pressure: 200 };
let touch_mix = touch1.mix(touch2, 0.5);
assert_eq!(touch_mix, Touch { x: 50.0, y: 50.0, pressure: 100 });

Cargo features

• "derive" - enables derive macro for Mix trait. Enabled by default.
• "euclid" - enables euclid vectors, rotations, etc. animation.
• "nalgebra" - enables nalgebra vectors, matrices, transformations, etc. animation.
• "cgmath" - enables cgmath vectors, matrices, etc. animation.
• "glam" - enables glam vectors, matrices, etc. animation.
• "palette" - enables palette colors interpolation.
• "web-time" - use web_time::* instead of std::time::* for Instant and Duration types. It doesn't change anything for desktop platforms, but allows to use the same code for WASM. Enabled by default.

Examples

Live

• Following a path using keyframes [Live] [Source]
• Animating a shape using Inertial [Live] [Source]
• A set of particles following the cursor made with Inertial [Live] [Source]

Simple two-step Animation

use glissade::{keyframes, Animated, Easing, Keyframes};
use std::thread::sleep;
use std::time::{Duration, Instant};

const STEPS_COUNT: u32 = 10;
const STEP: Duration = Duration::from_millis(3500 / STEPS_COUNT as u64);

fn main() {
    let start_time = Instant::now();

    // Transition consists of two steps:
    // 1. from 0.0 to 10.0 in 1 second linearly,
    // 2. and then go to 5.0 with easing function.
    let animation = keyframes::from(0.0)
        .go_to(10.0, Duration::from_secs(1))
        .ease_to(5.0, Duration::from_secs(2), Easing::QuadraticInOut)
        .run(start_time);

    for _ in 0..STEPS_COUNT {
        println!(
            "{:.2}s: {:.4}",
            start_time.elapsed().as_secs_f64(),
            animation.get(Instant::now())
        );
        sleep(STEP);
    }
}

It prints the following output:

0.00s: 0.0000
0.35s: 3.5000
0.70s: 7.0000
1.05s: 9.9935
1.40s: 9.5980
1.75s: 8.5862
2.10s: 7.0160
2.45s: 5.7480
2.80s: 5.0970
3.15s: 5.0000

Try it yourself with cargo run -p console-transition or view the source code in ./examples/console-transition.

Smoothly change color using Inertial

use glissade::{Animated, Inertial};

type Color = (u8, u8, u8);

const RED: Color = (255, 0, 0);
const GREEN: Color = (0, 255, 0);
const BLUE: Color = (0, 0, 255);

fn main() {
    let mut color = Inertial::new(RED);

    println!("Static color for one second.");
    for time in [0.0, 0.25, 0.5, 0.75, 1.0].iter().copied() {
        println!("{:.2}s: {:?}", time, color.get(time));
    }

    println!("\nThen go to green in 2 seconds.");
    color = color.go_to(GREEN, 1.0, 2.0);
    for time in [1.25, 1.5, 1.75, 2.0].iter().copied() {
        println!("{:.2}s: {:?}", time, color.get(time));
    }

    println!("\nIn the middle of the transition change direction to blue.");
    color = color.go_to(BLUE, 2.0, 2.0);
    for time in [2.25, 2.5, 2.75, 3.0, 3.25, 3.5, 3.75, 4.0, 4.25, 4.5]
        .iter()
        .copied()
    {
        println!("{:.2}s: {:?}", time, color.get(time));
    }
}

It prints the following output:

Static color for one second.
0.00s: (255, 0, 0)
0.25s: (255, 0, 0)
0.50s: (255, 0, 0)
0.75s: (255, 0, 0)
1.00s: (255, 0, 0)

Then go to green in 2 seconds.
1.25s: (247, 8, 0)
1.50s: (223, 32, 0)
1.75s: (183, 72, 0)
2.00s: (128, 128, 0)

In the middle of the transition change direction to blue.
2.25s: (70, 177, 8)
2.50s: (28, 195, 32)
2.75s: (6, 178, 72)
3.00s: (0, 128, 128)
3.25s: (0, 72, 183)
3.50s: (0, 32, 223)
3.75s: (0, 8, 247)
4.00s: (0, 0, 255)
4.25s: (0, 0, 255)
4.50s: (0, 0, 255)

Try it yourself with cargo run -p console-inertial or view the source code in ./examples/console-inertial.

Use the same code for Animation, Inertial, and Stationary

use glissade::{keyframes, Animated, Inertial, Keyframes};
use std::fmt::Debug;

/// Print the values of an animated value at 0.0, 0.25, 0.5, 0.75, and 1.0.
/// Any value that implements `Animated` can be passed to this function.
/// So, it can accept animations, inertial, and stationary values.
pub fn print_1s_values<T: Clone + Debug>(value: impl Animated<T, f32>) {
    for i in [0.0, 0.25, 0.5, 0.75, 1.0].iter() {
        println!("{:.2}s: {:?}", i, value.get(*i));
    }
}

fn main() {
    println!("Animation:");
    let animation = keyframes::from((0.0, 2.0)).go_to((1.0, 3.0), 1.0).run(0.0);
    print_1s_values(animation);

    println!("\nInertial:");
    let inertial = Inertial::new(5.0).go_to(10.0, 0.0, 1.0);
    print_1s_values(inertial);

    println!("\nStationary:");
    let stationary = 42;
    print_1s_values(stationary);

    println!("\nMapped animation:");
    let animation = keyframes::from((0.0, 0.0))
        .go_to((100.0, 40.0), 1.0)
        .run(0.0)
        .map(|v| format!("left: {:.2}; top: {:.2};", v.0, v.1));
    print_1s_values(animation);
}

It prints the following output:

Animation:
0.00s: (0.0, 2.0)
0.25s: (0.25, 2.25)
0.50s: (0.5, 2.5)
0.75s: (0.75, 2.75)
1.00s: (1.0, 3.0)

Inertial:
0.00s: 5.0
0.25s: 5.625
0.50s: 7.5
0.75s: 9.375
1.00s: 10.0

Stationary:
0.00s: 42
0.25s: 42
0.50s: 42
0.75s: 42
1.00s: 42

Mapped animation:
0.00s: "left: 0.00; top: 0.00;"
0.25s: "left: 25.00; top: 10.00;"
0.50s: "left: 50.00; top: 20.00;"
0.75s: "left: 75.00; top: 30.00;"
1.00s: "left: 100.00; top: 40.00;"

Try it yourself with cargo run -p animated or view the source code in ./examples/animated.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.