DrawText & DrawTex with useAnimation

Author: bea4dev

docs/docs/lib/animation.md

@@ -92,9 +92,19 @@ const Impact = () => (
 `<DrawText />` renders text as animated SVG strokes using a supplied font file.
 
 ```tsx
+import { useAnimation, useVariable } from "../src/lib/animation"
 import { DrawText } from "../src/lib/animation/effect/draw-text"
+import { seconds } from "../src/lib/frame"
+
+const Title = () => {
+  const progress = useVariable(0)
 
-<DrawText text="Hello" fontUrl="assets/Roboto.ttf" fontSize={96} />
+  useAnimation(async (context) => {
+    await context.move(progress).to(1, seconds(2))
+  })
+
+  return <DrawText text="Hello" fontUrl="assets/Roboto.ttf" fontSize={96} progress={progress} />
+}
 ```
 
 ## Effects: DrawTex
@@ -103,7 +113,19 @@ import { DrawText } from "../src/lib/animation/effect/draw-text"
 MathJax must be available in the build (this project uses a static import in `draw-text.tsx`).
 
 ```tsx
+import { useAnimation, useVariable } from "../src/lib/animation"
 import { DrawTex } from "../src/lib/animation/effect/draw-text"
+import { seconds } from "../src/lib/frame"
+
+const Formula = () => {
+  const progress = useVariable(0)
+
+  useAnimation(async (context) => {
+    await context.move(progress).to(1, seconds(2))
+  })
 
-<DrawTex tex={"\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}"} fontSize={96} />
+  return (
+    <DrawTex tex={"\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}"} fontSize={96} progress={progress} />
+  )
+}
 ```

docs/i18n/ja/docusaurus-plugin-content-docs/current/lib/animation.md

@@ -92,9 +92,19 @@ const Impact = () => (
 `<DrawText />` はフォントファイルを使ってテキストを SVG ストロークで描画します。
 
 ```tsx
+import { useAnimation, useVariable } from "../src/lib/animation"
 import { DrawText } from "../src/lib/animation/effect/draw-text"
+import { seconds } from "../src/lib/frame"
+
+const Title = () => {
+  const progress = useVariable(0)
 
-<DrawText text="Hello" fontUrl="assets/Roboto.ttf" fontSize={96} />
+  useAnimation(async (context) => {
+    await context.move(progress).to(1, seconds(2))
+  })
+
+  return <DrawText text="Hello" fontUrl="assets/Roboto.ttf" fontSize={96} progress={progress} />
+}
 ```
 
 ## Effects: DrawTex
@@ -103,7 +113,19 @@ import { DrawText } from "../src/lib/animation/effect/draw-text"
 MathJax がビルドに含まれている必要があります（このプロジェクトでは `draw-text.tsx` で静的 import しています）。
 
 ```tsx
+import { useAnimation, useVariable } from "../src/lib/animation"
 import { DrawTex } from "../src/lib/animation/effect/draw-text"
+import { seconds } from "../src/lib/frame"
+
+const Formula = () => {
+  const progress = useVariable(0)
+
+  useAnimation(async (context) => {
+    await context.move(progress).to(1, seconds(2))
+  })
 
-<DrawTex tex={"\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}"} fontSize={96} />
+  return (
+    <DrawTex tex={"\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}"} fontSize={96} progress={progress} />
+  )
+}
 ```

project/project.tsx

@@ -1,4 +1,6 @@
+import { useAnimation, useVariable } from "../src/lib/animation"
 import { DrawText } from "../src/lib/animation/effect/draw-text"
+import { BEZIER_SMOOTH } from "../src/lib/animation/functions"
 import { Clip } from "../src/lib/clip"
 import { seconds } from "../src/lib/frame"
 import { FillFrame } from "../src/lib/layout/fill-frame"
@@ -13,13 +15,21 @@ export const PROJECT_SETTINGS: ProjectSettings = {
 }
 
 const HelloScene = () => {
+  const progress = useVariable(0)
+
+  useAnimation(async (context) => {
+    await context.move(progress).to(1, seconds(2), BEZIER_SMOOTH)
+    await context.sleep(seconds(1))
+    await context.move(progress).to(0, seconds(2), BEZIER_SMOOTH)
+  }, [])
+
   return (
     <FillFrame style={{ alignItems: "center", justifyContent: "center" }}>
       <DrawText
         text="Hello, world!"
         fontUrl="assets/NotoSerifCJKJP-Medium.ttf"
         strokeWidth={2}
-        durationFrames={seconds(2)}
+        progress={progress}
       />
     </FillFrame>
   )
@@ -29,7 +39,7 @@ export const PROJECT = () => {
   return (
     <Project>
       <TimeLine>
-        <Clip label="Hello" duration={seconds(5)}>
+        <Clip label="Hello">
           <HelloScene />
         </Clip>
       </TimeLine>