diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2023-08-23 22:59:02 +0100 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2023-08-23 22:59:02 +0100 |
commit | 21d59712dd56909293b3804b1d89320216f6906a (patch) | |
tree | 06300d54c0e5c2804f80167967c40f5371011401 /compat/lustre_animation/README.md | |
parent | 83962575c255cc3b58677d18262a1d7b18e8239d (diff) | |
download | lustre-21d59712dd56909293b3804b1d89320216f6906a.tar.gz lustre-21d59712dd56909293b3804b1d89320216f6906a.zip |
:ambulance: Update third-party lustre_animation package to new api.
Diffstat (limited to 'compat/lustre_animation/README.md')
-rw-r--r-- | compat/lustre_animation/README.md | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/compat/lustre_animation/README.md b/compat/lustre_animation/README.md new file mode 100644 index 0000000..338e9c1 --- /dev/null +++ b/compat/lustre_animation/README.md @@ -0,0 +1,52 @@ +# Lustre Animation + +The basic usage is + * keep 1 `Animations` value + * add animations by some trigger + * call `animation.cmd()` on your value and let your lustre `update()` return it. + This will cause a dispatch on the next JS animation frame, unless all animations have finished (and auto-removed) + * update the animations with the new time. + * evaluate for each animation you are interested in. + +e.g. like this: +```gleam +import lustre/animation as a + +pub type Msg { + Trigger + Tick(Float) +} + +pub fn update(model: Model, msg: Msg) { + let m = case msg of { + Trigger -> { + let new_anim = a.add(model.animations, "id", 1.0, 2.0, 0.250) + Model(1.0, animations: new_anim) + } + Tick(t) -> { + let new_anim = a.tick(model.animations, t) + let new_value = a.value(new_anim, "id", model.value) + Model(new_value, new_anim) + } + } + #(m, animation.cmd(m.animations, Tick)) +} +``` + +In the above `type Model`, `init` and `render` have been omitted. + +There are fully functional examples animations in the `test/` directory, +which you can build by +```bash +gleam test +npx vite +```` + +and then pointing your browser to the URL that vite indicates. + +## TODO +* `every(Minute)`, etc +* `after(seconds: 2.5)` +* quadratic, cubic, etc interpolators +* Compose animations + `from("anim", 1.0) |> after(0.250) |> cubic(3.0, 0.250) |> after(0.250) |> quadr(2.0, 0.250)`
\ No newline at end of file |