微信小程序
worklet.decay
# AnimationObject worklet.decay(Object options, function callback)
小程序插件:不支持
相关文档: worklet 动画
# 功能描述
基于滚动衰减的动画。
# 参数
# Object options
动画配置
# 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')
}
);
}
}
});