diff --git a/Animations.md b/Animations.md index a30e54e..05553e3 100644 --- a/Animations.md +++ b/Animations.md @@ -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 `-` (`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** diff --git a/Development.md b/Development.md index e807e53..787abdf 100644 --- a/Development.md +++ b/Development.md @@ -15,7 +15,7 @@ npm run build # writes dist/ and regenerates index.html php tools/make-user.php [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