Animations a script creates before the runtime loads land up to a frame off, differently each load
维护者通常 1 天内回复
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 72/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- typescript
调研方向
Start in packages/core/src/runtime/adapters/waapi.ts, focusing on ensureBaseline and how it records an animation's currentTime. Run the supplied headless Chrome reproduction with window.__player.seek(2) across several page loads, then verify the computed transform consistently reads translateX(50px) for the pre-runtime animation.
由索引模型根据 Issue 内容生成。
描述
What happens
An animation a composition's script creates with el.animate() before the runtime loads lands up to a frame off after a seek, differently on each page load. A 4 s linear 100 px slide seeked to 2 s reads 50 to 51.25 px instead of 50.
The WAAPI adapter records a baseline for each animation the first time it sees it, including the animation's own currentTime at that moment (ensureBaseline in packages/core/src/runtime/adapters/waapi.ts). An animation created before the runtime has already been running on the wall clock for however long loading took, so every later seek is offset by that amount. Animations created after the runtime loads go through the adapter's Element.prototype.animate hook and are anchored where they are created.
Repro
Headless Chrome, the runtime built from main, window.__player.seek(2), then read the computed transform. Load the page several times.
<div data-composition-id="main" data-root="true" data-start="0" data-duration="10" data-width="640" data-height="360">
<div id="el" class="clip" data-start="0" data-duration="10">el</div>
</div>
<script>
document.getElementById("el").animate(
[{ transform: "translateX(0)" }, { transform: "translateX(100px)" }],
{ duration: 4000, easing: "linear", fill: "both" },
);
</script>
<!-- then the runtime script -->
Expected: translateX(50px) on every load.
Observed: 50 to 51.25 px, varying by load.
Notes
- Same family as #4555 (CSS animations in shadow roots and on pseudo-elements), which anchors CSS animations at their clip's start. Script-created animations need their own decision about where they start, so they are kept separate.
- 主要语言
- TypeScript
- 星标
- 54.1k
- 派生
- 4.9k
- 平均合并
- 9 小时 3 分钟
- 30 天内合并 PR
- 670
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
heygen-com/hyperframes 的其他 Issue
-
难度 1/5 1 小时以内 新手友好度 88/100
heygen-com/hyperframes#5863 ·
维护者通常 1 天内回复
-
product-launch-video: assemble-index.mjs is not idempotent — a second run drops every approved frame video可能已有人在做 @Dante-dan 于 3 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 75/100
heygen-com/hyperframes#5733 ·
维护者通常 1 天内回复
-
gsap_tween_tail counts GSAP's force3D and autoRound flags as properties可能已有人在做 @rudycelekli 于 3 天前认领。 未关闭bug triage/needs-triage
难度 2/5 1-3 小时 新手友好度 78/100
heygen-com/hyperframes#5683 ·
维护者通常 1 天内回复
-
Timeline: show a clip's full name when its label is cut off可能已有人在做 @DanielMcSheehy 于 1 天前认领。 未关闭desktop-candidate difficulty/easy enhancement good first issue help wanted triage/ready
难度 2/5 1-3 小时 新手友好度 85/100
heygen-com/hyperframes#5582 · 2 条评论 ·
维护者通常 1 天内回复
-
Studio: press ? to open the keyboard shortcuts panel可能已有人在做 @B-Payal 于 6 天前认领。 未关闭desktop-candidate difficulty/easy enhancement good first issue help wanted triage/ready
难度 2/5 1-3 小时 新手友好度 82/100
heygen-com/hyperframes#5580 · 1 条评论 ·
维护者通常 1 天内回复
查看 heygen-com/hyperframes 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
simkimsia/netlify-axi#19 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
subhranshudash13-dotcom/Contribo#74 ·
维护者通常 1 天内回复
-
enhancement frontend good first issue Stellar Wave trivial
难度 2/5 1-3 小时 新手友好度 76/100
Godgift-care/sci-healthcare-frontend#166 · 1 条评论 ·
维护者通常 1 天内回复
-
backend good first issue security Stellar Wave trivial
难度 2/5 1-3 小时 新手友好度 82/100
Godgift-care/sci-healthcare-backend#171 · 1 条评论 ·
维护者通常 1 天内回复