分类： 界面

worklet.runOnUI(function fn)

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

在 UI 线程执行 worklet 函数。

参数

function fn

worklet 类型函数。

返回值

function

runOnUI 为高阶函数，返回一个函数，执行时运行在 UI 线程。

示例代码


function someWorklet(greeting) {
  'worklet';
  console.log('hello', greeting); // print: [ui] hello Skyline
}

wx.worklet.runOnUI(someWorklet)('Skyline')

function worklet.runOnJS(function fn)

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

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

参数

function fn

未声明为 worklet 类型的普通函数。

返回值

function

runOnJS 为高阶函数，返回一个函数，执行时运行在 JS 线程。

示例代码


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

 function someWorklet() {
   'worklet'
   runOnJS(someFunc)('Skyline')
 }

 wx.worklet.runOnUI(someWorklet)()

AnimationObject worklet.sequence(AnimationObject animationN)

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

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

参数

AnimationObject animationN

动画对象

返回值

AnimationObject

返回 AnimationObject 类型值，可直接赋值给 SharedValue。

示例代码


const { shared, sequence, timing, spring } = wx.worklet
const offset = shared(0)
offset.value = sequence(timing(100), spring(0))

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

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

重复执行动画。

参数

AnimationObject animation

动画对象

number numberOfReps

重复次数。为负值时一直循环，直到被取消动画。

boolean reverse

反向运行动画，每周期结束动画由尾到头运行。该字段仅对 timing 和 spring 返回的动画对象生效。

function callback

动画完成回调。动画被取消时，返回 fasle，正常完成时返回 true。

返回值

AnimationObject

返回 AnimationObject 类型值，可直接赋值给 SharedValue。

示例代码


const { shared, repeat, timing } = wx.worklet
const offset = shared(0)
offset.value = repeat(timing(70), 2, true);

AnimationObject worklet.delay(number delayMS, AnimationObject delayedAnimation)

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

延迟执行动画。

参数

number delayMS

动画开始前等待的时间，单位：毫秒。

AnimationObject delayedAnimation

动画对象。

返回值

AnimationObject

返回 AnimationObject 类型值，可直接赋值给 SharedValue。

示例代码


const { shared, repeat, timing } = wx.worklet
const offset = shared(0)
offset.value = delay(1000, timing(70));

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

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

基于时间的动画。

参数

number toValue

目标值

Object options

动画配置

属性 类型 默认值 必填 说明
duration number 300 否 动画时长
easing function Easing.inOut(Easing.quad) 否 动画曲线，参考 Easing 模块。

function callback

动画完成回调。动画被取消时，返回 fasle，正常完成时返回 true。

返回值

AnimationObject

返回 AnimationObject 类型值，可直接赋值给 SharedValue。

示例代码


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



const { shared, timing, Easing } = wx.worklet
Page({
  onLoad() {
    const offset = shared(0)
    this.applyAnimatedStyle('#moved-box', () => {
      'worklet';
      return {
        transform: `translateX(${offset.value}px)`
      }
    })
    this._offset = offset
  }
  tap() {
    const random = Math.random()
    this._offset.value = timing(random, {
        duration: 500,
        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
      }),
    };
})

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

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

基于物理的动画。

参数

number|string toValue

目标值

Object options

动画配置

属性 类型 默认值 必填 说明
damping number 10 否 阻尼系数
mass number 1 否 重量系数，值越大移动越慢
stiffness number 100 否 弹性系数
overshootClamping boolean false 否 动画是否可以在指定值上反弹
restDisplacementThreshold number 0.01 否 弹簧静止时的位移
restSpeedThreshold number 2 否 弹簧静止的速度
velocity number 0 否 速度

function callback

动画完成回调。动画被取消时，返回 fasle，正常完成时返回 true。

返回值

AnimationObject

返回 AnimationObject 类型值，可直接赋值给 SharedValue。

示例代码


<pan-gesture-handler onGestureEvent="handlepan">
  <view class="circle"></view>
</pan-gesture-handler>



const { shared, spring } = wx.worklet
Page({
  onLoad() {
    const offset = shared(0);
    this.applyAnimatedStyle(".circle", () => {
      "worklet";
      return {
        transform: `translateX${offset.value}px`,
      };
    });
    this._offset = offset;
  },
  handlepan(evt) {
    "worklet";
    if (evt.state === GestureState.ACTIVE) {
      this._offset.value += evt.deltaX;
    } else if (evt.state === GestureState.END) {
      this._offset.value = spring(0);
    }
  },
});

worklet.Easing

相关文档: worklet 动画

Easing 模块实现了常见的动画缓动函数（动画效果参考 https://easings.net/ ），可从 wx.worklet 对象中读取。

示例代码

在开发者工具中预览效果

预置动画函数

  • Easing.bounce 反弹动画
  • Easing.ease 惯性动画
  • Easing.elastic 弹性动画

标准缓动函数

  • Easing.linear 线性
  • Easing.quad 二次方
  • Easing.cubic 三次方
  • Easing.poly 实现其它幂函数

其它数学函数

  • Easing.bezier 三次贝塞尔曲线
  • Easing.circle 圆形曲线
  • Easing.sin 正弦函数
  • Easing.exp 指数函数

缓动方式

以上效果均有三种缓动方式

  • Easing.in 正向执行缓动函数
  • Easing.out 反向执行缓动函数
  • Easing.inOut 前半程正向，后半程反向 以 sin 函数为例，其中 Easing.in(Easing.sin) 和直接使用 Easing.sin 效果相同。
  1. Easing.in(Easing.sin) 动画效果参考 https://easings.net/#easeInSine
  2. Easing.out(Easing.sin) 动画效果参考 https://easings.net/#easeOutSine
  3. Easing.inOut(Easing.sin) 动画效果参考 https://easings.net/#easeInOutSine

Easing.bounce

简单的反弹效果，动画效果参考

Easing.bounce(t)

Easing.ease

简单的惯性动画，动画效果参考

Easing.ease(t)

Easing.elastic

简单的弹性动画，类似弹簧来回摆动，高阶函数。默认弹性为 1，会稍微超出一次。弹性为 0 时 不会过冲。动画效果参考

Easing.elastic(bounciness = 1)

Easing.linear

线性函数，f(t) = t，动画效果参考

Easing.linear(t)

Easing.quad

二次方函数，f(t) = t * t，动画效果参考

Easing.quad(t)

Easing.cubic

立方函数，f(t) = t * t * t，动画效果参考

Easing.cubic(t)

Easing.poly

高阶函数，返回幂函数

poly(4): 动画效果参考

poly(5): 动画效果参考

Easing.poly(n)

Easing.bezier

三次贝塞尔曲线，效果同 css transition-timing-function

调试参数可借助 可视化工具

Easing.bezier(x1, y1, x2, y2)

Easing.circle

圆形曲线，动画效果参考

Easing.circle(t)

Easing.sin

正弦函数，动画效果参考

Easing.sin(t)

Easing.exp

指数函数，动画效果参考

Easing.exp(t)

Easing.in

正向运行 easing function，高阶函数。

Easing.in(easing)

Easing.out

反向运行 easing function，高阶函数。

Easing.out(easing)

Easing.inOut

前半程正向，后半程反向，高阶函数。

Easing.inOut(easing)

AnimationObject worklet.decay(Object options, function callback)

微信小程序插件：不支持

相关文档: worklet 动画

功能描述

基于滚动衰减的动画。

参数

Object options

动画配置

属性 类型 默认值 必填 说明
velocity number 0 否 初速度
deceleration number 0.998 否 衰减速率
clamp Array.<number> [] 否 边界值，长度为 2 的数组

function callback

动画完成回调。动画被取消时，返回 fasle，正常完成时返回 true。

返回值

AnimationObject

返回 AnimationObject 类型值，可直接赋值给 SharedValue。

示例代码

在开发者工具中预览效果

<pan-gesture-handler onGestureEvent="handlepan">
  <view class="circle"></view>
</pan-gesture-handler>

const { shared, decay } = wx.worklet
Page({
  onLoad() {
    this._offset = shared(0);
    this.applyAnimatedStyle('.circle', () => {
      'worklet';
      return {
        transform: `translateX(${this._offset.value}px)`
      };
    });
  },
  handlepan(evt) {
    'worklet';
    if (evt.state === GestureState.ACTIVE) {
      this._offset.value += evt.deltaX;
    } else if (evt.state === GestureState.END) {
      this._offset.value = decay({
         velocity: evt.velocityX,
         clamp: [-200, 200],
        },
        () => {
           'worklet'
           console.info('@@@ decay finish')
        }
      );
    }
  }
});

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