关于 threejs-animation
threejs-animation 是一项为 Three.js 项目中的动画和时间线提供实现与验证指导的技能。内容涵盖基于时间的运动、动画混合、滚动时间线、减少动态效果支持及生命周期清理。
主要功能
- 01与帧率无关的运动
- 02动画混合器和片段过渡
- 03滚动时间线映射
- 04减少动态效果支持
- 05动画生命周期清理
- 06跨状态和帧率验证
适用场景
- 01实现动画片段间的过渡
- 02构建与页面滚动关联的动画
- 03保证标签页休眠后的运动一致性
- 04检查减少动态效果偏好下的行为
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/threejs-animation确认已加载。
详细介绍
动画与时间轴
使用项目已安装的版本和现有架构。这些说明是对用户任务的补充；不授权进行无关更改或外部操作。
明确每个动画属性由哪个系统负责：导入的动画片段、程序化运动、滚动时间轴、控件或物理系统。如果两个系统可能同时写入同一变换，请明确混合或交接方式。
使用经过的时间或以秒为单位的时间增量，而不是帧数。标签页恢复后，对较大的视觉时间增量进行限幅；物理系统需要采用单独的固定步长策略。使用与帧率无关的阻尼，例如 1 - exp(-lambda * delta)，并复用临时值。
为合适的根节点创建混合器，根据检查过的名称选择动画片段，并定义循环、暂停、结束和过渡行为。交叉淡化时，根据需要重置并播放目标动作；检查根运动，不要在不知情的情况下同时平移根节点及其父节点。
对于滚动，将区段的归一化进度映射到明确定义的时间轴。布局变化时重新计算范围，并处理反向滚动和直接跳转。不要把滚动增量累积起来，仿佛所有输入都是连续到达的。确保即使不沿动画相机路径移动，文本仍然易读且内容仍可访问。
遵循减少动态效果的偏好，移除非必要动画或呈现稳定状态。条件允许时，在场景不活动时暂停相关工作。停止所拥有的动作、移除混合器监听器，并且只有在动作停止后才取消缓存根节点。
在不同帧率下、切换到后台后、状态快速变化时、向上滚动时以及启用减少动态效果时进行验证。确认动画速度和最终状态始终一致。
API 参考
请查阅官方文档，了解准确的签名和特定版本的行为。如果无法访问文档，请检查已安装的类型定义或源码，并说明任何尚未确定之处。