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.
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.
|
||||
|
||||
**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
|
||||
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
|
||||
are quadratic. Set it 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 it 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 ease in-out, a half-round key ease in or ease out, a square a step. Player and
|
||||
preview evaluate it in one place, so both show the same curve.
|
||||
key. The inspector shows it as two fields:
|
||||
|
||||
- **Easing** is the curve: *Linear* (the default, stored as no field at all), *Step* (holds until
|
||||
the next key, like a texture does), or one of the ten curves also known from CSS and easings.net:
|
||||
*Sine*, *Quad*, *Cubic*, *Quart*, *Quint*, *Expo*, *Circ*, *Back*, *Elastic*, *Bounce*.
|
||||
- **Direction** only appears for a curve: *In* starts slow, *Out* starts fast and ends slow,
|
||||
*In-out* is slow at both ends and halfway at half the time. A new curve keeps the direction the
|
||||
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
|
||||
**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 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
|
||||
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
|
||||
./e2e.sh start [GM_STEPS] # the same run detached, see below
|
||||
./e2e.sh status # live progress, or the last run's result
|
||||
|
||||
Reference in new issue
Block a user