Tegaki时间控制完整指南uncontrolled、controlled、CSS三种模式如何同步时间轴【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegakiTegaki手書き是一款把任意字体变成逐笔手写动画的开源项目其时间控制系统支持 uncontrolled、controlled、CSS 三种模式让你轻松驱动并同步时间轴——无论是自动播放、跟随滑块进度还是用滚动驱动动画。本指南帮新手快速搞懂三种模式的差异与用法。三种时间模式速览Tegaki 通过一个time属性控制动画时间轴核心类型定义见 packages/renderer/src/core/types.ts。模式写法谁来驱动时间典型场景uncontrolled默认time{{ mode: uncontrolled }}组件内部时钟页面自动播放、循环controlledtime{2.5}或{ mode: controlled, value: 2.5 }外部代码传值滑块拖动、视频逐帧CSStimecssCSS 自定义属性滚动驱动、纯 CSS 动画uncontrolled 模式组件自己管理时钟这是默认模式不传time时即{ mode: uncontrolled }组件内部维护播放时钟常用选项有speed播放速度倍率默认1loop播完后是否循环默认falseplaying暂停 / 恢复默认truedelay/loopGap起始延迟与循环间隔秒catchUp文本超前时自动加速追赶适合流式打字场景例如time: { mode: uncontrolled, speed: 2, loop: true }表示以 2 倍速循环播放。该模式下还可以用engine.seek(50%)跳转到指定时间点实现见 packages/renderer/src/core/engine.ts。controlled 模式由外部代码同步时间轴当动画需要跟随时序之外的状态滑块、视频帧、数据时直接传入当前时间即可。数字秒数是{ mode: controlled, value }的简写百分比字符串50%则等价于 0–1 的进度比例time: 2.5 // 等价于 { mode: controlled, value: 2.5 } time: 50%官方首页就有一个滑块拖笔的例子拖动input typerange更新time文字就实时“写”到对应位置源码在 packages/website/src/components/home/ControlledTime.tsx。controlled 模式下动画是时间的纯函数同一个time值永远画出同一帧因此非常适合视频渲染和精确回放。CSS 模式零 JavaScript 动画循环time: css // 等价于 { mode: css }该模式下渲染器不再跑 JS 动画循环而是每帧读取容器上的三个 CSS 自定义属性定义见 packages/renderer/src/lib/css-properties.ts--tegaki-time当前时间秒--tegaki-progress进度 0–1--tegaki-duration时间轴总时长配合浏览器的滚动时间轴animation-timeline: view()可以让文字“滚到哪写到哪”性能极佳。官方首页的滚动联动示例见 packages/website/src/components/home/ControlledTime.tsx。如何为场景选择时间模式只想让文字自动写出来→ uncontrolled配loop: true循环展示要做进度条、滑块或视频合成→ controlled把外部时间直接喂给time滚动叙事、纯 CSS 场景、追求最佳性能→ CSS 模式打字机式流式文字→ uncontrolled catchUp缓冲多时自动加速更多细节可查阅官方文档 packages/website/src/content/docs/guides/rendering.mdx 与 API 参考 packages/website/src/content/docs/api/renderer.mdx。【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegaki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考