applyAnimatedStyle 函数概览
applyAnimatedStyle 是微信小程序 Skyline 渲染引擎专属的动画 API，在 WebView 渲染模式下不可用。该函数挂载在 Page 或 Component 实例的 this 上，并非全局 wx API。
this.applyAnimatedStyle(selector, updater, [config], [callback])参数详解
selector（必填，string）
节点选择器，支持 id 和 class。仅能选中当前 Page/Component 内部节点，不支持跨组件选择。
updater（必填，worklet 函数）
- 必须添加
'worklet'标记。 - 运行在 UI 线程，内部读取
shared.value。 - 依赖的 shared 变量变化时，函数自动重新执行。
- 返回样式对象，属性名需使用驼峰写法（如 transform、opacity、translateY）。
- 限制：不能调用 wx API、不能使用定时器、不能引用普通外部变量（受快照捕获机制限制）。
示例：
const offset = shared(0)
function updater(){
'worklet'
return{
transform: `translateY(${offset.value}px)`,
opacity: offset.value / 200
}
}config（可选）
immediate: boolean，默认 true。
- true：绑定时立即执行一次 updater，应用初始样式。
- false：首次不执行，等待 shared 变化后才更新样式。
flush: sync | async，默认 async。
- async：样式在下一个渲染时间片生效，性能更优，适用于绝大多数场景。
- sync：在当前渲染时间片立即生效，开销较高，仅适用于要求位置严格对齐的场景，不建议滥用。
callback（可选，function）
回调参数返回 styleId，用于后续解绑动画绑定。
解绑 API
通过 callback 获取 styleId，配合 this.clearAnimatedStyle(styleIdList, callback) 使用。
- 传入 styleId 数组，解除 shared 与节点样式的绑定。
- 解绑后，已生效的样式不会自动还原，但不再随 shared 变化而更新。
- 当节点被销毁（组件 detach 或页面卸载）时，绑定会自动释放，避免内存泄漏。
完整示例：吸顶导航实现
const { shared, runOnUI } = wx.worklet
Page({
onLoad() {
this.scrollY = shared(0)
// 绑定动画
this.applyAnimatedStyle('#nav', () => {
'worklet'
return {
transform: `translateY(${Math.min(this.scrollY.value, 80)}px)`,
opacity: Math.max(1 - this.scrollY.value / 100, 0)
}
}, { immediate: true, flush: 'async' }, (styleId) => {
this.navStyleId = styleId
})
},
// worklet滚动监听
onScrollUpdate(evt) {
'worklet'
this.scrollY.value = evt.contentOffset.y
},
onUnload() {
// 手动解绑（可选，节点销毁时会自动释放）
this.clearAnimatedStyle([this.navStyleId])
}
})<scroll-view scroll-y worklet:onscrollupdate="onScrollUpdate">
<view id="nav" class="nav">我是吸顶导航</view>
</scroll-view>核心原理
applyAnimatedStyle在 JS 线程调用，向 UI 线程提交一条绑定规则。- 引擎自动追踪 updater 内部读取的 shared 变量。
- 当 shared.value 被修改（JS 线程或 UI 线程均可修改），UI 线程自动执行 updater 计算新样式并直接应用到节点。
- 整个样式更新链路不经过 JS 线程，因此在高速滚动等场景下不易卡顿。
避坑指南
- updater 为 worklet 函数，受快照捕获机制限制，无法访问普通外部变量（且不会实时更新），只能读取 shared。
- 仅支持 Skyline 引擎支持的可动画样式（如 transform、opacity），不支持复杂选择器及伪类。
- 避免在循环中频繁调用
applyAnimatedStyle，绑定是一次性的，后续依靠 shared 驱动。 - 避免与普通
style="{{}}"混用导致冲突，两者均设置 inline 样式，会相互覆盖。 - 单个节点可绑定多个
applyAnimatedStyle，通过不同的 styleId 独立管理。 - 若需在滚动中进行埋点上报，需在 updater 中使用
runOnJS切回 JS 线程，严禁直接调用wx.request。
applyAnimatedStyle 与 setData 对比
setData：JS 线程修改数据 → 跨线程通信 → 引擎 Diff 对比 → 更新视图。作为数据驱动方案，走小程序常规渲染链路，高频调用易导致 JS 线程阻塞。
applyAnimatedStyle：预先建立 shared 与节点样式的绑定。shared 变化直接在 UI 线程更新样式，跳过 Diff 和 setData 通信链路，专为流畅动画和滚动联动设计。
优先使用 setData 的场景
- 低频变更：表单输入、按钮文字、列表数据、Class 切换、弹窗显隐。
- 涉及文本修改、列表渲染、条件渲染（wx:if）。
- 需要兼容 WebView 渲染模式的页面。
优先使用 applyAnimatedStyle 的场景
- 滚动联动动画：吸顶导航、Tab 吸顶、滚动渐变、信息流卡片动画。
- 手势跟随动画：拖拽、侧滑。
- 需要持续高频更新样式，追求 60 帧极致流畅体验。
setData 是通用的数据渲染方案，功能强大但在高频更新场景下存在性能瓶颈；applyAnimatedStyle 则是 Skyline 引擎为动画场景定制的高性能通道，通过牺牲通用性换取了滚动和动画的极致流畅度。
#applyAnimatedStyle #微信小程序 #Skyline渲染引擎