worklet动画

小程序采用双线程架构，渲染线程（UI 线程）和逻辑线程（JS 线程）分离。JS 线程不会影响 UI 线程的动画表现，如滚动效果。但引入的问题是，UI 线程的事件发生后，需跨线程传递到 JS 线程，进而触发开发者回调，当做交互动画（如拖动元素）时，这种异步性会带来较大的延迟和不稳定。worklet动画正是为解决这类问题而诞生的，使得小程序可以做到类原生动画般的体验，有一点需要注意，worklet动画相关接口仅在 Skyline 渲染模式下才能使用。
下面直接举例一个简单的循环动画效果来展示下worklet动画的便捷性，封装了一个Animation-View的组件:

const { shared, Easing, timing, runOnUI, runOnJS, repeat } = wx.worklet
Component({
  data: {

  },
  methods: {
    startMoveAnimation() {
      console.log('开始MoveA动画')
      this._offset.value = repeat(timing(300,{
        duration: 1000,
        easing: Easing.ease
      }), -1, true);
    },
    startScaleAnimation() {
      this._scale.value = repeat(timing(1.5,{
        duration: 500,
        easing: Easing.ease
      }), -1, true);
    },
  },
  ready() {
    let that = this
    setTimeout(() => {
      console.log('ready了 开始动画')
      that.startMoveAnimation();
      that.startScaleAnimation();
    }, 2000);
    const offset = shared(0)
    this.applyAnimatedStyle('#moved-box', () => {
      'worklet'
      return {
        transform: `translateX(${offset.value}px)`
      }
    })
    this._offset = offset

    const scale = shared(1)
    this.applyAnimatedStyle('#scale-box', () => {
      'worklet'
      return {
        transform: `scale(${scale.value})`
      }
    })
    this._scale = scale
  }
});

下面是wxml文件：

<view class="container">
  <view id="moved-box" class="sliding-view"></view>
  <view id="scale-box" class="scale-view"></view>
</view>

下面是wxss文件：

.container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.sliding-view {
  width: 100px; /* 视图的宽度 */
  height: 120px; /* 视图的高度 */
  background-color: blue; /* 视图的背景色 */
}
.scale-view {
  margin-left: 60px;
  width: 200px; /* 视图的宽度 */
  height: 200px; /* 视图的高度 */
  background-color: red; /* 视图的背景色 */
}

我们在组件的ready中给2个小组件声明了移动和缩放的worklet动画，然后延迟2秒后执行，最外层是一个repeat，次数传的-1，代表这会一直循环执行动画。用起来的确非常的方便。

概念一：worklet 函数

一种声明在开发者代码中，可运行在 JS 线程或 UI 线程的函数，函数体顶部有 'worklet' 指令声明。

worklet 函数定义

function someWorklet(greeting) {
  'worklet';
  console.log(greeting);
}

// 运行在 JS 线程
someWorklet('hello') // print: hello

// 运行在 UI 线程
wx.worklet.runOnUI(someWorklet)('hello') // print: [ui] hello

worklet 函数间相互调用

const name = 'skyline'

function anotherWorklet() {
  'worklet';
  return 'hello ' + name;
}

// worklet 函数间可互相调用
function someWorklet() {
  'worklet';
  const greeting = anotherWorklet();
  console.log('another worklet says ', greeting);
}

wx.worklet.runOnUI(someWorklet)() // print: [ui] another worklet says hello skyline

从 UI 线程调回到 JS 线程

function someFunc(greeting) {
  console.log('hello', greeting);
}

function someWorklet() {
  'worklet'
  // 访问非 worklet 函数时，需使用 runOnJS
  // someFunc 运行在 JS 线程
  runOnJS(someFunc)('skyline')
}

wx.worklet.runOnUI(someWorklet)() // print: hello skyline

概念二：共享变量

在 JS 线程创建，可在两个线程间同步的变量。

const { shared, runOnUI } = wx.worklet

const offset = shared(0)
function someWorklet() {
  'worklet'
  console.log(offset.value) // print: 1
  // 在 UI 线程修改
  offset.value = 2
  console.log(offset.value) // print: 2
}
// 在 JS 线程修改
offset.value = 1

runOnUI(someWorklet)()

由 shared 函数创建的变量，我们称为 sharedValue 共享变量。用法上可类比 vue3 中的 ref，对它的读写都需要通过 .value 属性，但需注意的是它们并不是一个概念。sharedValue 的用途主要如下。

跨线程共享数据

由 worklet 函数捕获的外部变量，实际上会被序列化后生成在 UI 线程的拷贝，如下代码中， someWorklet 捕获了 obj 变量，尽管我们修改了 obj 的 name 属性，但在 someWorklet 声明的位置，obj 已经被序列化发送到了 UI 线程，因此后续的修改是无法同步的。

const obj = { name: 'skyline'}
function someWorklet() {
  'worklet'
  console.log(obj.name) // 输出的仍旧是 skyline
}
obj.name = 'change name'

wx.worklet.runOnUI(someWorklet)() 

sharedValue 就是用来在线程间同步状态变化的变量。

const { shared, runOnUI } = wx.worklet

const offset = shared(0)
function someWorklet() {
  'worklet'
  console.log(offset.value) // 输出的是新值 1
}
offset.value = 1

runOnUI(someWorklet)() 

驱动动画

worklet 函数和共享变量就是用来解决交互动画问题的。相关接口 applyAnimatedStyle 可通过页面/组件实例访问，接口文档参考。

<view id="moved-box"></view>
<view id="btn" bind:tap="tap">点击驱动小球移动</view>

Page({
  onLoad() {
    const offset = wx.worklet.shared(0)
    this.applyAnimatedStyle('#moved-box', () => {
      'worklet';
      return {
        transform: `translateX(${offset.value}px)`
      }
    })
    this._offset = offset
  },
  tap() {
    // 点击时修改 sharedValue 值，驱动小球移动
    this._offset.value = Math.random()
  }
})

当点击按钮 #btn 时，我们用随机数给 offset 进行赋值，小球会随之移动。

applyAnimatedStyle 接口的第二个参数 updater 为一个 worklet 函数，其捕获了共享变量 offset，当 offset 的值变化时，updater 会重新执行，并将返回的新 styleObject 应用到选中节点上。