skyline-worklet
Worklet 动画系统
适用场景
- 实现手势跟随、拖拽等交互动画
- 使用 timing/spring/decay 创建动画效果
- 通过 SharedValue 驱动节点样式变化
- 组合多段动画(序列、重复、延迟)
- 在 UI 线程和 JS 线程间传递数据
核心概念
双线程架构与 Worklet 的意义
小程序双线程架构中,UI 事件需跨线程传递到 JS 线程再回传,交互动画会有明显延迟。Worklet 动画让动画逻辑直接运行在 UI 线程,实现类原生动画体验。
三大核心概念
| 概念 | 说明 | 关键 API |
More from wechat-miniprogram/skyline-skills
skyline-route
Skyline 自定义路由与页面转场技能。涵盖自定义路由动画(routeBuilder)、预设路由(7 种 wx:// 类型)、页面返回手势、容器转场动画(open-container)、Router API。适用于实现半屏弹窗、页面缩放、底部弹出、卡片展开等转场效果。触发关键词:自定义路由、custom-route、routeBuilder、navigateTo、页面转场、半屏、预设路由、返回手势、open-container。
241skyline-components
Skyline 组件开发技能。涵盖 scroll-view 及其增强模式(列表/嵌套滚动)、swiper 高级特性、表单组件、图片/文本组件、半屏可拖拽组件、共享元素动画等。适用于需要开发滚动列表、轮播、表单输入、页面过渡动画等场景。
236skyline-config
Skyline 小程序 JSON 配置规范技能。涵盖 app.json 全局配置(renderer、rendererOptions、componentFramework)、页面 json 配置(navigationStyle、disableScroll)、project.config.json 项目配置。适用于创建新 Skyline 项目、迁移 WebView 项目、配置混合渲染。触发关键词:app.json、页面配置、renderer、rendererOptions、skyline配置、navigationStyle、disableScroll、componentFramework、glass-easel、project.config.json。
221skyline-overview
Skyline 渲染引擎概览与迁移技能。了解 Skyline 架构、性能优势、功能特性、迁移指南和最佳实践时使用此技能。适用于初次接触 Skyline、评估迁移成本、或需要了解整体框架的场景。
218skyline-scroll-api
Skyline 滚动控制 API 技能。涵盖 ScrollViewContext(程序化下拉刷新、下拉二级、滚动定位)、DraggableSheetContext(半屏面板程序化滚动)、worklet.scrollViewContext(UI 线程直接控制滚动)。适用于程序化触发刷新/二级、控制 DraggableSheet 位置、在 worklet 中操作滚动。触发关键词:ScrollViewContext、DraggableSheetContext、scrollTo、triggerRefresh、triggerTwoLevel、下拉刷新API、下拉二级API、滚动API、worklet scrollViewContext。
216skyline-wxss
Skyline WXSS 样式支持技能。提供 Skyline 支持的 CSS 属性、值和限制信息。触发关键词:WXSS、CSS 支持、样式兼容性、属性支持、不支持的属性、display grid、position sticky、overflow、filter、渐变、gradient、linear-gradient、radial-gradient、conic-gradient、border-style、white-space、font-weight、text-decoration、text-overflow、aspect-ratio、will-change、calc、env、mask、mask-image、background-image、transition、animation、transform、font-feature-settings。
214