微信小程序插件:不支持
相关文档: 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), }), }; })