SharedValue worklet.shared(any initialValue)

微信小程序插件:不支持

相关文档: worklet 动画

功能描述

创建共享变量 SharedValue,用于跨线程共享数据和驱动动画。

参数

any initialValue

初始值,可通过 .value 属性进行读取和修改。类型可以是 number | string | bool | null | undefined | Object | Array | Function

返回值

SharedValue

返回 SharedValue 类型值,可被 worklet 函数捕获。

示例代码


const offset = wx.worklet.shared(0)
const someWorkletFn = () => {
 'worklet'
 console.log('offset: ', offset.value)
}

worklet.scrollViewContext.scrollTo(Object object)

基础库 3.3.0 开始支持,低版本需做兼容处理。

微信小程序插件:不支持

相关文档: worklet 动画、NodesRef.ref

功能描述

滚动至指定位置

参数

Object object

属性 类型 默认值 必填 说明
top number 顶部距离
left number 左边界距离
duration number 滚动动画时长
animated boolean 是否启用滚动动画
easingFunction string 动画曲线

示例代码


const { scrollViewContext } = wx.workelt

Page {
  onLoad() {
    this.scrollRef = shared()
    this.createSelectorQuery().select('.scrollable').ref(function(res) {
      this.scrollRef.value = res.ref
    }).exec()
  },

  onTap() {
    'worklet'
    scrollViewContext.scrollTo(this.scrollRef.value, {
      top: 200,
      duration: 2000,
      animated: true,
      easingFunction: 'ease'
    })
  }
}

示例代码

在开发者工具中预览效果

DerivedValue worklet.derived(WorkletFunction updaterWorklet)

微信小程序插件:不支持

相关文档: worklet 动画

功能描述

衍生值 DerivedValue,可以基于已有的 SharedValue 生成其他共享变量。

参数

WorkletFunction updaterWorklet

worklet 函数类型,该函数会立即执行,返回值作为 DerivedValue 的初始值。当函数内捕获的 SharedValue 类型值发生变化时,updaterWorklet 会被驱动执行,返回值用于更新 DerivedValue。可以类比 computed 计算属性来理解。

返回值

DerivedValue

返回 DerivedValue 类型值,可被 worklet 函数捕获。DerivedValue 也是 SharedValue 类型。

示例代码


const { shared, derived } = wx.worklet
const progress = shared(0)
const offset = derived(() => {
 'worklet'
 return progress.value * 255
})