mina 0.1.1

A simple, expressive, framework-independent animation library for Rust
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

<img src="art/logo.png" height="300px">

# Mina


A simple, expressive, framework-independent animation library for Rust.

## Features


- Animate the properties of any standard `struct`.
- Concise, [CSS-like syntax][1] for frames and timing.
- State-based animators, à la [CSS transitions][2].
- [Easings][3] included, no math required.
- GUI agnostic - you write the event loop and decide what the properties mean.

## Goals


- **Simple**: Creating and experimenting with animations should be _easy_.
- **Smooth**: Animations should blend well, behave intuitively and never look janky.
- **Adaptable**: Be able to animate simple properties out of the box, and less-simple properties with a few small tweaks.
- **Versatile**: Incorporate into any app with a timer or event loop.

## Timeline Example


_Note: This is example, and all other examples on this page, include only the code used to create the timelines and/or
animators. The full examples will always be available in the [examples directory](examples/)._

![Moving Shape](doc/basic_example.gif)

```rust
#[derive(Animate)]

struct Shape {
    size: f32,
    #[animate] x: f32,
    #[animate] y: f32,
}

impl Shape {
    pub fn new(size: f32) -> Self {
        Shape { size, x: 0.0, y: 0.0 }
    }
}

let timeline = timeline!(Shape 5s infinite Easing::OutCubic
    from { x: -150.0, y: 60.0 }
    25% { x: 150.0, y: 60.0 }
    50% { x: 150.0, y: -60.0 }
    75% { x: -150.0, y: -60.0 }
    to { x: -150.0, y: 60.0 });
```

See the [full example](examples/basic_timeline.rs) (uses [nannou](https://nannou.cc/)).

## Animator Example


![Fancy Widgets](doc/iced_example.gif)

```rust
#[derive(Animate, Clone, Debug, Default)]

struct Effects {
    background_alpha: f32,
    emission_alpha: f32,
    emission_scale: f32,
}

const EFFECT_SCALE: f32 = 2.0;

let animator = animator!(Effects {
    default(Interaction::None, {
        background_alpha: 0.5,
        emission_alpha: 0.25,
        emission_scale: 0.85
    }),
    Interaction::None => [
        0.5s Easing::OutCubic to { background_alpha: 0.5 },
        2s Easing::OutQuint infinite
            from { emission_alpha: 0.0, emission_scale: 0.0 }
            2% { emission_alpha: 0.15, emission_scale: 0.0 }
            5% { emission_scale: 0.85 } Easing::InOutCirc
            75% { emission_alpha: 0.0 }
            100% { emission_scale: EFFECT_SCALE },
    ],
    Interaction::Over => 0.5s Easing::OutCubic to {
        background_alpha: 0.8,
        emission_alpha: 0.0,
        emission_scale: 0.85,
    },
    Interaction::Down => [
        0.5s Easing::OutCubic to {
            background_alpha: 1.0,
            emission_alpha: 0.0,
            emission_scale: 0.85,
        },
        3s Easing::OutExpo
            1% { emission_scale: 1.05 }
            to { emission_alpha: 0.1, emission_scale: 1.5 }
    ]
});
```

The above is taken from the [widget example](examples/iced_widget/main.rs) using [iced](https://github.com/iced-rs/iced).

## Roadmap


- [x] Standalone timelines with builder-style syntax
- [x] State-based animators
- [x] CSS-like grammar using proc macros
- [ ] Tie up loose ends in macro grammar (per-keyframe easing, idents for duration/delay, etc.)
- [ ] GUI-specific sub-crates for plug-and-play integration
- [ ] Expand examples/integration crates to include more GUI libraries
- [ ] Decouple from `enum-map` dependency
- [ ] Built-in [palette](https://docs.rs/palette/latest/palette/) support (for color interpolation)

## More Examples


### [Progress Indicator](examples/delays.rs)


![Progress Indicator](doc/progress_example.gif)

### [Bevy Shapes and Sprites](examples/bevy_app)


![Progress Indicator](doc/bevy_example.gif)

### Canvas Example (code coming soon!)


![Canvas Example](doc/iced_canvas_example.gif)

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
[3]: https://easings.net/
[4]: https://docs.rs/palette/latest/palette/