Describe the easing curves of animation keys

The inspector now offers ten curves with a direction instead of the
three quadratic eases.

- Animations lists the curves, the Easing and Direction fields, the
  clamping to min and max, and the saved names (ease-* stays Quad).
- Development has the check sum 1396.
admin committed 2026-09-25 22:02:35 +02:00
1 parent 0e42e2fecb
commit a6fb029a44
2 files changed
+27 -9

No files matched your search

+26 -8
@@ -40,14 +40,32 @@ whose object is gone stays, labelled *(missing)*, and is skipped when playing. T
and property cannot be keyed twice on one animation. and property cannot be keyed twice on one animation.
**Easing.** Every key of a number or colour row has an **Easing** for the way from it to the next **Easing.** Every key of a number or colour row has an **Easing** for the way from it to the next
key: *Linear* (the default, stored as no field at all), *Step* (holds until the next key, like a key. The inspector shows it as two fields:
texture does), *Ease in* (starts slow: at half the time a quarter of the way), *Ease out* (starts
fast: three quarters) and *Ease in-out* (slow at both ends, halfway at half the time). The curves - **Easing** is the curve: *Linear* (the default, stored as no field at all), *Step* (holds until
are quadratic. Set it in the inspector for all picked keys at once; keys of a row that cannot blend the next key, like a texture does), or one of the ten curves also known from CSS and easings.net:
are left alone. A new value or a move keeps a key's easing. The timeline draws it into the key: the *Sine*, *Quad*, *Cubic*, *Quart*, *Quint*, *Expo*, *Circ*, *Back*, *Elastic*, *Bounce*.
right half is the start of the way, the left half its end, a round half a slow one — a diamond is - **Direction** only appears for a curve: *In* starts slow, *Out* starts fast and ends slow,
linear, a circle ease in-out, a half-round key ease in or ease out, a square a step. Player and *In-out* is slow at both ends and halfway at half the time. A new curve keeps the direction the
preview evaluate it in one place, so both show the same curve. key had; a key that was linear or a step gets *In-out*.
How strongly a curve bends, at half the time going *In*: Sine 0.29 of the way, Quad 0.25, Cubic
0.125, Quart 0.06, Quint 0.03, Expo 0.03, Circ 0.13. *Out* is the same curve mirrored, *In-out*
runs the *In* curve on the first half and the *Out* curve on the second. *Back* first pulls back
about 10 % against the way (or shoots 10 % past the end going *Out*), *Elastic* swings around the
end several times, *Bounce* hops into the end like a dropped ball.
*Back* and *Elastic* leave the range between the two keys. For position or rotation that is the
point. A number property with a **min** or **max** is held to it, so a *Back in* from scale 0
stays at 0 instead of turning the sprite over. A colour is held to its channels.
Stored, a curve is `<curve>-<direction>` (`cubic-out`, `back-in-out`). Quad keeps the name it had
when it was the only curve, `ease-in`, `ease-out` and `ease-in-out`, so older projects play as
before. Set the easing in the inspector for all picked keys at once; keys of a row that cannot
blend are left alone. A new value or a move keeps a key's easing. The timeline draws the direction
into the key: the right half is the start of the way, the left half its end, a round half a slow
one — a diamond is linear, a circle *In-out*, a half-round key *In* or *Out*, a square a step.
Player and preview evaluate it in one place, so both show the same curve.
**The Animation tab.** Each animation opens in a tab of its own. The header picks what it **The Animation tab.** Each animation opens in a tab of its own. The header picks what it
**animates** (the root), **+ Row** **animates** (the root), **+ Row**
+1 -1
@@ -15,7 +15,7 @@ npm run build # writes dist/ and regenerates index.html
php tools/make-user.php <name> <password> [admin|user] # an account; every tool signs in (see Accounts) php tools/make-user.php <name> <password> [admin|user] # an account; every tool signs in (see Accounts)
php tests/php/accounts.test.php # the API's account rules, no server needed (CI's gate job) php tests/php/accounts.test.php # the API's account rules, no server needed (CI's gate job)
php tests/php/snapshots.test.php # the snapshot store (#231), the same way php tests/php/snapshots.test.php # the snapshot store (#231), the same way
node tools/seed-e2e.mjs && node tools/e2e.mjs # 1393 editor checks, screenshots in /tmp/gm-e2e-*.png node tools/seed-e2e.mjs && node tools/e2e.mjs # 1396 editor checks, screenshots in /tmp/gm-e2e-*.png
GM_STEPS=20 node tools/e2e.mjs # or 1-12, or 6,20 — a subset while working on one step GM_STEPS=20 node tools/e2e.mjs # or 1-12, or 6,20 — a subset while working on one step
./e2e.sh start [GM_STEPS] # the same run detached, see below ./e2e.sh start [GM_STEPS] # the same run detached, see below
./e2e.sh status # live progress, or the last run's result ./e2e.sh status # live progress, or the last run's result