分类： 动画

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