fix: add animate instance to PageInstance #17930
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Walkthrough本次更新在 Taro 运行时中引入了动画相关的类型定义，包括 KeyFrame 和 ScrollTimelineOption，并在 PageInstance 接口中新增了 animate 方法重载，用于支持基于关键帧和滚动驱动的动画能力。同时，将 animate 相关类型导出到接口索引文件中，便于统一管理和引用。 Changes
Sequence Diagram(s)sequenceDiagram
participant 调用方 as 调用方
participant PageInstance as PageInstance
调用方->>PageInstance: animate(selector, keyFrames, duration, callback)
Note right of PageInstance: 执行动画，结束后回调
调用方->>PageInstance: animate(selector, keyFrames, duration, scrollTimeline)
Note right of PageInstance: 执行滚动驱动动画
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/taro-runtime/src/interface/animate.ts (1)
6-6: 潜在的重复属性定义
KeyFrame接口中同时定义了ease（第6行）和easing（第66行）属性，这可能会造成混淆。请确认是否需要两个属性，或者统一使用其中一个。建议保留其中一个属性定义：
- /** 动画缓动函数 */ - ease?: string ... (其他属性) /** 动画缓动函数 */ easing?: string或者在注释中说明两者的区别和使用场景。
Also applies to: 66-66
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/taro-runtime/src/dsl/instance.ts(2 hunks)packages/taro-runtime/src/interface/animate.ts(1 hunks)packages/taro-runtime/src/interface/index.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
packages/taro-runtime/src/interface/index.ts (1)
Learnt from: ianzone
PR: NervJS/taro#17746
File: packages/taro-runtime/tsdown.config.ts:10-16
Timestamp: 2025-05-25T18:02:31.387Z
Learning: 在 taro-runtime 包的 tsdown 配置中，必须禁用 treeshake 来保留 dom-external/index.js 文件。
🧬 Code Graph Analysis (1)
packages/taro-runtime/src/dsl/instance.ts (1)
packages/taro-runtime/src/interface/animate.ts (2)
KeyFrame(2-68)ScrollTimelineOption(71-82)
🔇 Additional comments (4)
packages/taro-runtime/src/interface/animate.ts (1)
2-82: 接口定义完整且符合预期动画相关的类型定义很全面，
KeyFrame接口涵盖了 CSS 动画的各种属性，ScrollTimelineOption接口为滚动驱动动画提供了合适的配置选项。中文注释清晰明了，有助于开发者理解每个属性的用途。packages/taro-runtime/src/interface/index.ts (1)
1-1: 导出语句正确新增的导出语句符合现有的模式，能够正确地将动画相关接口暴露给运行时的其他模块使用。
packages/taro-runtime/src/dsl/instance.ts (2)
4-4: 导入语句更新正确正确导入了新定义的动画相关类型，遵循了现有的导入模式。
62-65: 动画方法重载定义完善为
PageInstance接口添加的两个animate方法重载很好地覆盖了不同的使用场景：
- 第一个重载支持基于关键帧的动画，带有完成回调
- 第二个重载支持滚动驱动的动画，使用
ScrollTimelineOption配置这些方法签名正确解决了 PR 目标中提到的
this.animate缺失类型信息的问题，为微信小程序的动画功能提供了完整的 TypeScript 支持。
Single-Dancer
approved these changes
Jun 30, 2025
Single-Dancer
force-pushed
the
fix/fix-animate-type-lose
branch
from
c5bcbde to
ad68ae4
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #17930 +/- ##
========================================
Coverage 54.98% 54.98%
========================================
Files 417 417
Lines 21693 21693
Branches 5357 5355 -2
========================================
Hits 11928 11928
+ Misses 8243 8122 -121
- Partials 1522 1643 +121
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
This was referenced Jul 5, 2025
Single-Dancer
force-pushed
the
fix/fix-animate-type-lose
branch
2 times, most recently
from
a0abdcc to
fbd954d
Compare
Single-Dancer
force-pushed
the
fix/fix-animate-type-lose
branch
from
fbd954d to
25051d3
Compare
This was referenced Jul 12, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
这个 PR 做了什么？ (简要描述所做更改)
When I use
this.animatein function component, But the type is lost这个 PR 是什么类型？ (至少选择一个)
这个 PR 涉及以下平台：
Summary by CodeRabbit