同一个动画数据连续调用,动画效果不一致了?
wxml
<view id="goods-ball" animation="{{actionData}}">
</view>
js代码
// 创建动画实例
runGoodsAnim: function(callback) {
let animObj = wx.createAnimation({
duration: 700,
delay: 0,
timingFunction: "ease-in-out"
});
// 缩放动画
animObj.opacity(1).scale(0.3).step();
// 曲线动画
animObj.translateX(-250).translateY(1900).opacity(0).step();
this.setData({
actionData: animObj.export(),
});
callback()
},
wxss
#goods-ball {
position: fixed;
top: 2%;
left: 50%;
opacity: 0;
width: 300rpx;
height: 300rpx;
background-color: red;
margin-left: -150rpx;
border-radius: 50%;
overflow: hidden;
}
我需要的效果是先放大然后位移下去,结果多次调用后,这个view就会从下面往上出来了QAQ
1 回复
好吧,把创建的对象放到onLoad
onLoad(){
this.animObj = wx.createAnimation({
duration: 700,
delay: 0,
timingFunction: "ease-in-out"
});
}
每次调用前把状态清掉就行了
initAnim: function() {
this.actionObj.translateX(0)
.translateY(0)
.opacity(0)
.scale(1)
.step({duration: 2000})
this.setData({
actionData: this.actionObj.export(),
});
},