diff --git a/docs/docs/behaviors/hold-tap.md b/docs/docs/behaviors/hold-tap.md index c410183d..e94875cb 100644 --- a/docs/docs/behaviors/hold-tap.md +++ b/docs/docs/behaviors/hold-tap.md @@ -71,15 +71,19 @@ On the other hand, if the interrupting key is released before the hold-tap, the - - -![Hold-tap comparison](../assets/hold-tap/comparison.svg) +As seen below, the hold duration of the 'tap-unless-interrupteed' hold-tap does not have an effect on the output. The 'tap' behavior will always be invoked. + + + +Only another key being pressed can invoke the 'hold' behavior. + + diff --git a/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted.meta b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted.ts b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted.ts new file mode 100644 index 00000000..04a050b8 --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted.ts @@ -0,0 +1,8 @@ +import { makeProject } from "@motion-canvas/core/lib"; + +import tap_unless_interrupted from "../scenes/hold_tap/tap_unless_interrupted?scene"; + +export default makeProject({ + scenes: [tap_unless_interrupted], + background: "#FFFFFF", +}); diff --git a/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted_invoke_hold.meta b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted_invoke_hold.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted_invoke_hold.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted_invoke_hold.ts b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted_invoke_hold.ts new file mode 100644 index 00000000..ab4aa437 --- /dev/null +++ b/docs/src/animationhelpers/src/hold_tap/tap_unless_interrupted_invoke_hold.ts @@ -0,0 +1,8 @@ +import { makeProject } from "@motion-canvas/core/lib"; + +import tap_unless_interrupted_invoke_hold from "../scenes/hold_tap/tap_unless_interrupted_invoke_hold?scene"; + +export default makeProject({ + scenes: [tap_unless_interrupted_invoke_hold], + background: "#FFFFFF", +}); diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted.meta b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted.tsx b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted.tsx new file mode 100644 index 00000000..6e73b7fd --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted.tsx @@ -0,0 +1,54 @@ +import { makeScene2D } from "@motion-canvas/2d/lib/scenes"; +import { Text } from "@motion-canvas/2d/lib/components"; +import { createRef, 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.output.text("f", 0)) + ); + 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_unless_interrupted_invoke_hold.meta b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted_invoke_hold.meta new file mode 100644 index 00000000..0e33e3fe --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted_invoke_hold.meta @@ -0,0 +1,3 @@ +{ + "version": 0 +} \ No newline at end of file diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted_invoke_hold.tsx b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted_invoke_hold.tsx new file mode 100644 index 00000000..20c9b1f3 --- /dev/null +++ b/docs/src/animationhelpers/src/scenes/hold_tap/tap_unless_interrupted_invoke_hold.tsx @@ -0,0 +1,50 @@ +import { makeScene2D } from "@motion-canvas/2d/lib/scenes"; +import { makeRefs } from "@motion-canvas/core/lib/utils"; +import { any, 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 interrupt = makeRefs(); + view.add(); + interrupt.group.position.x(125); + interrupt.group.position.y(-150); + interrupt.duration.fill("#D9D9D9"); + + const hold = makeRefs(); + view.add(); + hold.group.position.x(-125); + hold.group.position.y(-150); + hold.duration.fill("#D9D9D9"); + + const hold_output = makeRefs(); + view.add(); + hold_output.group.position(hold.group.position().addX(125)); + hold_output.group.position.y(hold_output.group.position.y() + 300); + + yield* waitFor(0.5); + yield* any( + hold.body.position.y(KeyTravel, 0.15), + hold.duration.grow(0.75, 1.5, linear) + ); + yield* delay( + 1.2, + all( + interrupt.body.position.y(KeyTravel, 0.15), + hold.duration.fill("F21D00", 0.15) + ) + ); + yield* chain( + hold.group.rotation(3, 0.03), + hold.group.rotation(-3, 0.06), + hold.group.rotation(0, 0.03), + all( + delay(0.15, hold_output.output.text("J", 0)), + hold_output.shift.fill("#969696", 0.15) + ) + ); + yield* waitFor(0.25); + yield* hold.body.position.y(0, 0.15); + yield* delay(0.5, hold.duration.grow(0, 0.15)); +}); diff --git a/docs/src/animationhelpers/vite.config.ts b/docs/src/animationhelpers/vite.config.ts index eb726d14..4cb00623 100644 --- a/docs/src/animationhelpers/vite.config.ts +++ b/docs/src/animationhelpers/vite.config.ts @@ -10,6 +10,8 @@ export default defineConfig({ "./src/hold_tap/balanced_other_key_up.ts", "./src/hold_tap/balanced_hold_tap_up.ts", "./src/hold_tap/tap_preferred_hold_tap_up.ts", + "./src/hold_tap/tap_unless_interrupted.ts", + "./src/hold_tap/tap_unless_interrupted_invoke_hold.ts", ], }), ],