好吧,把创建的对象放到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(), }); },
同一个动画数据连续调用,动画效果不一致了?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
2020-10-29