Skyline Worklet

This handles the Skyline worklet animation system for WeChat mini-programs, letting you run animations directly on the UI thread instead of bouncing between threads and adding lag. You get SharedValues for cross-thread state, timing/spring/decay animations, and worklet functions that bypass the usual JS thread bottleneck. The mandatory rules are strict: every worklet needs the 'worklet' directive at the top, you must use .value to read SharedValues, and you have to wrap page methods with bind(this) when calling from runOnJS or things break. It's overkill for simple fades but essential for gesture-driven interactions like drag or scroll-based animations where frame timing matters.

skills.sh installs: 1.1K
GitHub stars: 56
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wechat-miniprogram/skyline-skills --skill skyline-worklet --agent claude-code

Installs into .claude/skills of the current project.

Files

Worklet 动画系统

适用场景

实现手势跟随、拖拽等交互动画
使用 timing/spring/decay 创建动画效果
通过 SharedValue 驱动节点样式变化
组合多段动画（序列、重复、延迟）
在 UI 线程和 JS 线程间传递数据

核心概念

双线程架构与 Worklet 的意义

小程序双线程架构中，UI 事件需跨线程传递到 JS 线程再回传，交互动画会有明显延迟。Worklet 动画让动画逻辑直接运行在 UI 线程，实现类原生动画体验。

三大核心概念

概念	说明	关键 API
worklet 函数	可运行在 JS 或 UI 线程的函数，顶部声明 `'worklet'` 指令	`runOnUI()`, `runOnJS()`
共享变量	跨线程同步的变量，通过 `.value` 读写	`shared()`, `derived()`
动画驱动	将 SharedValue 绑定到节点样式	`applyAnimatedStyle()`

基本流程

const { shared, timing } = wx.worklet

// 1. 创建共享变量
const offset = shared(0)

// 2. 绑定到节点样式（updater 为 worklet 函数）
this.applyAnimatedStyle('#box', () => {
  'worklet'
  return { transform: `translateX(${offset.value}px)` }
})

// 3. 修改值驱动动画
offset.value = timing(300, { duration: 200 })