From ba2437a0e449e9accdd052e6752eeff156a7afdc Mon Sep 17 00:00:00 2001 From: Kurtis Lew Date: Fri, 10 Feb 2023 20:09:53 -0800 Subject: [PATCH] feat(docs/hold-tap): Implement balanced and tap-preferred default animations --- docs/docs/behaviors/hold-tap.md | 10 ++-- .../balanced/balanced_comparison.meta | 3 ++ .../hold_tap/balanced/balanced_comparison.ts | 8 +++ .../tap_preferred_comparison.meta | 3 ++ .../tap_preferred/tap_preferred_comparison.ts | 8 +++ .../balanced/balanced_comparison.meta | 3 ++ .../hold_tap/balanced/balanced_comparison.tsx | 53 +++++++++++++++++++ .../tap_preferred_comparison.meta | 3 ++ .../tap_preferred_comparison.tsx | 53 +++++++++++++++++++ docs/src/animationhelpers/vite.config.ts | 2 + 10 files changed, 143 insertions(+), 3 deletions(-) create mode 100644 docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.meta create mode 100644 docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.ts create mode 100644 docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.meta create mode 100644 docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.ts create mode 100644 docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.meta create mode 100644 docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.tsx create mode 100644 docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.meta create mode 100644 docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.tsx diff --git a/docs/docs/behaviors/hold-tap.md b/docs/docs/behaviors/hold-tap.md index 0c63e245..81f3d490 100644 --- a/docs/docs/behaviors/hold-tap.md +++ b/docs/docs/behaviors/hold-tap.md @@ -41,7 +41,6 @@ values={[ > The 'hold-preferred' flavor triggers the hold behavior when the `tapping-term-ms` has expired or another key is pressed. > When the hold-tap key is released and the hold behavior has not been triggered, the tap behavior will trigger. - As shown previously, the hold-tap decision is generally made after the [`tapping-term-ms`](#tapping-term-ms) has expired. @@ -57,8 +56,7 @@ Alternatively, the 'hold-preferred' flavor triggers the hold behavior when anoth > The 'balanced' flavor will trigger the hold behavior when the `tapping-term-ms` has expired or another key is pressed and released. > When the hold-tap key is released and the hold behavior has not been triggered, the tap behavior will trigger. - -The following section describes the behavior of the 'balanced' hold-tap when another key is pressed while the hold-tap is held. + If another key is pressed while the 'balanced' hold-tap pressed, releasing the hold-tap before the interrupting keypress will invoke the tap behavior. @@ -75,6 +73,12 @@ On the other hand, if the interrupting key is released before the hold-tap, the > The 'tap-preferred' flavor triggers the hold behavior when the `tapping-term-ms` has expired. Pressing another key within `tapping-term-ms` does not affect the decision. > When the hold-tap key is released and the hold behavior has not been triggered, the tap behavior will trigger. +Like other flavors of hold-tap, releasing the 'tap-preferred' hold-tap before [`tapping-term-ms`](#tapping-term-ms) has expired will invoke the 'tap'. Holding it for past the tapping-term will invoke the 'hold'. + + + +As shown below, pressing other keys while the 'tap-preferred' hold-tap is pressed does not interrupt its activity. + diff --git a/docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.meta b/docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.ts b/docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.ts new file mode 100644 index 00000000..6c0389ef --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.ts @@ -0,0 +1,8 @@ +import { makeProject } from "@motion-canvas/core/lib"; + +import balanced_comparison from "../../scenes/hold_tap/balanced/balanced_comparison?scene"; + +export default makeProject({ + scenes: [balanced_comparison], + background: "#FFFFFF", +}); diff --git a/docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.meta b/docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.ts b/docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.ts new file mode 100644 index 00000000..7656cf4d --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.ts @@ -0,0 +1,8 @@ +import { makeProject } from "@motion-canvas/core/lib"; + +import tap_preferred_comparison from "../../scenes/hold_tap/tap_preferred/tap_preferred_comparison?scene"; + +export default makeProject({ + scenes: [tap_preferred_comparison], + background: "#FFFFFF", +}); diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.meta b/docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.tsx b/docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.tsx new file mode 100644 index 00000000..9dfa54c8 --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.tsx @@ -0,0 +1,53 @@ +import { makeScene2D } from "@motion-canvas/2d/lib/scenes"; +import { makeRefs } from "@motion-canvas/core/lib/utils"; +import { all, chain, delay, waitFor } from "@motion-canvas/core/lib/flow"; +import Key, { KeyTravel } from "../../../components/Key"; +import Output from "../../../components/Output"; +import { linear } from "@motion-canvas/core/lib/tweening"; + +export default makeScene2D(function* (view) { + const tap = makeRefs(); + view.add(); + tap.group.position.x(-400); + tap.group.position.y(-150); + tap.duration.fill("#D9D9D9"); + + const tap_output = makeRefs(); + view.add(); + tap_output.group.position(tap.group.position()); + tap_output.group.position.y(tap_output.group.position.y() + 300); + + const hold = makeRefs(); + view.add(); + hold.group.position.x(400); + hold.group.position.y(-150); + hold.duration.fill("#D9D9D9"); + + const hold_output = makeRefs(); + view.add(); + hold_output.group.position(hold.group.position()); + hold_output.group.position.y(hold_output.group.position.y() + 300); + + yield* waitFor(0.5); + yield* all( + tap.body.position.y(KeyTravel, 0.15), + hold.body.position.y(KeyTravel, 0.15) + ); + yield* all( + tap.duration.grow(0.5, 1, linear), + delay(1, tap.body.position.y(0, 0.15)), + hold.duration.grow(1, 2, linear) + ); + yield* chain( + all(tap.group.rotation(3, 0.03), hold.group.rotation(3, 0.03)), + all(tap.group.rotation(-3, 0.06), hold.group.rotation(-3, 0.06)), + all(tap.group.rotation(0, 0.03), hold.group.rotation(0, 0.03)), + all(tap_output.output.text("f", 0), hold_output.shift.fill("#969696", 0.15)) + ); + yield* waitFor(0.25); + yield* hold.body.position.y(0, 0.15); + yield* delay( + 0.5, + all(tap.duration.grow(0, 0.15), hold.duration.grow(0, 0.15)) + ); +}); diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.meta b/docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.tsx b/docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.tsx new file mode 100644 index 00000000..6121175b --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.tsx @@ -0,0 +1,53 @@ +import { makeScene2D } from "@motion-canvas/2d/lib/scenes"; +import { makeRefs } from "@motion-canvas/core/lib/utils"; +import { all, chain, delay, waitFor } from "@motion-canvas/core/lib/flow"; +import Key, { KeyTravel } from "../../../components/Key"; +import Output from "../../../components/Output"; +import { linear } from "@motion-canvas/core/lib/tweening"; + +export default makeScene2D(function* (view) { + const tap = makeRefs(); + view.add(); + tap.group.position.x(-400); + tap.group.position.y(-150); + tap.duration.fill("#D9D9D9"); + + const tap_output = makeRefs(); + view.add(); + tap_output.group.position(tap.group.position()); + tap_output.group.position.y(tap_output.group.position.y() + 300); + + const hold = makeRefs(); + view.add(); + hold.group.position.x(400); + hold.group.position.y(-150); + hold.duration.fill("#D9D9D9"); + + const hold_output = makeRefs(); + view.add(); + hold_output.group.position(hold.group.position()); + hold_output.group.position.y(hold_output.group.position.y() + 300); + + yield* waitFor(0.5); + yield* all( + tap.body.position.y(KeyTravel, 0.15), + hold.body.position.y(KeyTravel, 0.15) + ); + yield* all( + tap.duration.grow(0.5, 1, linear), + delay(1, tap.body.position.y(0, 0.15)), + hold.duration.grow(1, 2, linear) + ); + yield* chain( + all(tap.group.rotation(3, 0.03), hold.group.rotation(3, 0.03)), + all(tap.group.rotation(-3, 0.06), hold.group.rotation(-3, 0.06)), + all(tap.group.rotation(0, 0.03), hold.group.rotation(0, 0.03)), + all(tap_output.output.text("f", 0), hold_output.shift.fill("#969696", 0.15)) + ); + yield* waitFor(0.25); + yield* hold.body.position.y(0, 0.15); + yield* delay( + 0.5, + all(tap.duration.grow(0, 0.15), hold.duration.grow(0, 0.15)) + ); +}); diff --git a/docs/src/animationhelpers/vite.config.ts b/docs/src/animationhelpers/vite.config.ts index 76486f63..4e9fd189 100644 --- a/docs/src/animationhelpers/vite.config.ts +++ b/docs/src/animationhelpers/vite.config.ts @@ -7,8 +7,10 @@ export default defineConfig({ project: [ "./src/hold_tap/hold_tap_comparison.ts", "./src/hold_tap/hold_tap_interrupted.ts", + "./src/hold_tap/balanced/balanced_comparison.ts", "./src/hold_tap/balanced/balanced_other_key_up.ts", "./src/hold_tap/balanced/balanced_hold_tap_up.ts", + "./src/hold_tap/tap_preferred/tap_preferred_comparison.ts", "./src/hold_tap/tap_preferred/tap_preferred_hold_tap_up.ts", "./src/hold_tap/tap_unless_interrupted/tap_unless_interrupted.ts", "./src/hold_tap/tap_unless_interrupted/tap_unless_interrupted_invoke_hold.ts",