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
|
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lustre Animation Example</title>
<style>
head,
body {
margin: 0;
padding: 1em;
background: linear-gradient(to bottom, #ffaff3, white);
}
</style>
<link rel="stylesheet" href="lustre_animation.css" />
</head>
<body>
<script type="text/javascript" src="highlight.js"></script>
<h1>Lustre Animation</h1>
You can use this package within Gleam with
<pre><code class="language-bash">gleam add lustre_animation</code></pre>
You can get the repository with
<pre><code class="no-highlight">git clone https://git.chmeee.org/lustre_animation</code></pre>
<h1>Usage</h1>
The basic usage is
<ol>
<li>keep 1 `Animations` value</li>
<li>add animations by some trigger</li>
<li>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).</li>
<li>update the animations with the new time.</li>
<li>evaluate for each animation you are interested in.</li>
</ol>
e.g. like this:
<pre><code class="language-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))
}</code></pre>
In the above <code>type Model</code>, <code>init</code> and <code>render</code> have been omitted.
<h1>Examples</h1>
Below are two working examples, of which the code is in the git repository.
<div style="display: flex; flex-wrap: wrap; overflow-y: auto; overflow-x: hidden;">
<div style="width: 320; margin-right: 2em;">
<h2>1. Two independent animations</h2>
<p>Click on the four buttons to manipulate the text horizontally,
and vertically.</p>
<p>See <code>./test/example_move_around.gleam</code></p>
<div id="root"
style="width: calc(320px - 2em); height: 480; border: 2px solid grey; padding: 0 1em 1em 1em;">
<h1>Lustre Animation Example</h1>
Please wait for the JavaScript (compiled Gleam) to take over.
<noscript>
<p>This site needs JavaScript to run, please enable/allow it.</p>
</noscript>
</div>
</div>
<div style="width: 320;">
<h2>2. Many animations that are all 'the same'</h2>
<p>Each drop behaves in the same way. Click in the area to generate them.</p>
<p>See <code>./test/example_drops.gleam</code></p>
<div id="drops" style="width: calc(320px - 2em); height: 480; border: 2px solid grey; padding: 1em;">
<h1>Lustre Animation Example</h1>
Please wait for the JavaScript (compiled Gleam) to take over.
<noscript>
<p>This site needs JavaScript to run, please enable/allow it.</p>
</noscript>
</div>
</div>
</div>
<script type="text/javascript" src="run_highlight.js"></script>
<script src="./test/start_examples.mjs" type="module"></script>
</body>
</html>
|
