微信小程序 Skyline 高性能交互动画：用…

当需要在微信小程序 Skyline 渲染模式下实现手势跟随、拖拽、惯性滑动、弹簧回弹等高性能交互动画时使用。

适用场景

解决思路

1. 按基本流程创建动画：先调用 wx.worklet 中的 shared(0) 创建共享变量 offset。
2. 使用 this.applyAnimatedStyle('#box', () => { 'worklet'; return { transform: `translateX(${offset.value}px)` } }) 将 SharedValue 绑定到节点样式，updater 必须是 worklet 函数。
3. 通过 offset.value = timing(300, { duration: 200 }) 修改共享变量值来驱动动画。
4. 定义 worklet 函数时，在函数顶部声明 'worklet' 指令，例如 function handleGesture(evt) { 'worklet'; offset.value += evt.deltaX }。
5. 读写 SharedValue 时始终使用 .value，例如 offset.value = 100；不要直接赋值 offset = 100，否则会替换整个 SharedValue 对象。
6. 在 worklet 中访问非 worklet 函数时必须使用 runOnJS，例如 function showModal(msg){...}; function handleTap(){ 'worklet'; const fn = this.showModal.bind(this); runOnJS(fn)('hello') }。
7. 在 worklet 中访问页面方法时使用 this.methodName.bind(this)，再传给 runOnJS，例如 const showModal = this.showModal.bind(this); runOnJS(showModal)(msg)。
8. 确保使用 Skyline 渲染模式：在 app.json 中配置 "renderer": "skyline"。
9. 确保开发者工具勾选「将 JS 编译成 ES5」。
10. 不要在 worklet 函数中直接调用 wx API，必须通过 runOnJS 回到 JS 线程。
11. 不要在 worklet 中通过解构 this.data 访问属性，例如 const { msg } = this.data；这会因 Object.freeze 冻结 this.data 导致 setData 失效，应改为 const msg = this.data.msg。
12. 使用 shared(initialValue) 创建 SharedValue。
13. 使用 derived(updaterWorklet) 创建衍生值（类比 computed）。
14. 使用 cancelAnimation(sharedValue) 取消动画。
15. 使用 timing(toValue, options?, callback?) 创建时间曲线动画，默认 300ms。
16. 使用 spring(toValue, options?, callback?) 创建弹簧物理动画。
17. 使用 decay(options?, callback?) 创建滚动衰减动画。
18. 使用 sequence(anim1, anim2, ...) 依次执行组合动画。
19. 使用 repeat(anim, reps, reverse?, callback?) 重复动画，负值表示无限。
20. 使用 delay(ms, anim) 延迟执行动画。
21. 使用 runOnUI(workletFn) 在 UI 线程执行 worklet 函数。
22. 使用 runOnJS(normalFn) 从 UI 线程回调 JS 线程。
23. 点击后平滑移动时，使用 timing + Easing。
24. 手势松开回弹时，使用 spring。
25. 手势松开惯性滑动时，使用 decay + velocity。
26. 先移动再弹回时，使用 sequence(timing, spring)。
27. 循环脉动效果时，使用 repeat(timing, -1, true)。
28. 延迟后开始动画时，使用 delay(ms, timing/spring)。
29. 了解 worklet 架构和完整概念时，查阅 references/core/worklet-overview.md。
30. 使用 SharedValue 和 DerivedValue 时，查阅 references/base/shared-derived.md。
31. 在 worklet 中操作 scroll-view 时，查阅 references/base/scroll-view-context.md。
32. 使用 timing/spring/decay 动画时，查阅 references/animation/timing-spring-decay.md。
33. 查看 Easing 缓动函数时，查阅 references/animation/easing.md。
34. 使用序列/重复/延迟组合动画时，查阅 references/animation/combine-animation.md。
35. 了解 runOnUI/runOnJS 线程通信时，查阅 references/tool/thread-communication.md。
36. 需要手势组件时，参考 skyline-components 技能处理 pan/tap/long-press 手势。
37. 需要渲染引擎概览时，参考 skyline-overview 技能了解 Skyline 配置和迁移。
38. 需要样式开发时，参考 skyline-wxss 技能了解 WXSS 支持与差异。
39. 需要路由转场时，参考 skyline-route 技能实现自定义路由动画。
40. references 目录结构为：animation/combine-animation.md、animation/easing.md、animation/timing-spring-decay.md、base/scroll-view-context.md、base/shared-derived.md、core/worklet-overview.md、tool/thread-communication.md。

适用边界 · 注意事项

• 非 Skyline 渲染模式：Worklet 动画仅在 Skyline 渲染模式下可用。
• 未在微信开发者工具勾选「将 JS 编译成 ES5」：会导致无法正常使用。
• 非微信小程序环境：该技能依赖 wx.worklet 和 Skyline，不能直接用于其他平台。