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
})

wx.worklet

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

相关文档: worklet 动画

worklet 对象,可以通过 wx.worklet 获取。

方法

SharedValue worklet.shared(any initialValue)

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

DerivedValue worklet.derived(WorkletFunction updaterWorklet)

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

worklet.cancelAnimation(SharedValue SharedValue)

取消由 SharedValue 驱动的动画。

function worklet.runOnUI(function fn)

在 UI 线程执行 worklet 函数。

function worklet.runOnJS(function fn)

worklet 函数运行在 UI 线程时,捕获的外部函数可能为 worklet 类型或普通函数,为了更明显的对其区分,要求必须使用 runOnJS 调回 JS 线程的普通函数。 有这样的要求是因为,调用其它 worklet 函数时是同步调用,但在 UI 线程执行 JS 线程的函数只能是异步,开发者容易混淆,试图同步获取 JS 线程的返回值。

AnimationObject worklet.timing(number toValue, Object options, function callback)

基于时间的动画。

AnimationObject worklet.spring(number|string toValue, Object options, function callback)

基于物理的动画。

AnimationObject worklet.decay(Object options, function callback)

基于滚动衰减的动画。

AnimationObject worklet.sequence(AnimationObject animationN)

组合动画序列,依次执行传入的动画。

AnimationObject worklet.repeat(AnimationObject animation, number numberOfReps, boolean reverse, function callback)

重复执行动画。

AnimationObject worklet.delay(number delayMS, AnimationObject delayedAnimation)

延迟执行动画。

worklet.scrollViewContext.scrollTo(Object object)

滚动至指定位置

wx.offParallelStateChange(function listener)

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

微信小程序插件:不支持

微信 Windows 版:支持

微信 Mac 版:支持

功能描述

移除微信小程序分栏状态变化事件的监听函数

参数

function listener

onParallelStateChange 传入的监听函数。不传此参数则移除所有监听函数。

示例代码

const listener = function (res) { console.log(res) }

wx.onParallelStateChange(listener)
wx.offParallelStateChange(listener) // 需传入与监听时同一个的函数对象

wx.offWindowResize(function listener)

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

微信小程序插件:不支持

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

功能描述

移除窗口尺寸变化事件的监听函数

参数

function listener

onWindowResize 传入的监听函数。不传此参数则移除所有监听函数。

示例代码

const listener = function (res) { console.log(res) }

wx.onWindowResize(listener)
wx.offWindowResize(listener) // 需传入与监听时同一个的函数对象

wx.offWindowStateChange(function listener)

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

微信小程序插件:不支持

微信 Windows 版:支持

微信 Mac 版:支持

功能描述

移除微信小程序窗口状态变化事件的监听函数

参数

function listener

onWindowStateChange 传入的监听函数。不传此参数则移除所有监听函数。

示例代码

const listener = function (res) { console.log(res) }

wx.onWindowStateChange(listener)
wx.offWindowStateChange(listener) // 需传入与监听时同一个的函数对象