我在onshow执行一系列动画效果，有时只执行一部分动画，在phone6s上是第一次进入没什么问题，第二次进入这个页面有时只执行一部分动画，在华为P6上测试有时扫码第一次进入只能看到后面的动画执行效果，第二次进入这个页面有的动画不执行，并且执行unBindAnimation这个方法的动画特别慢，明明只设置了10ms.
<view class="buttonkey"> <view class="buttonkey-lfsc"> <view class="buttonkey-lf boxs {{shop.SFHJ=='是'?'':'nocall'}}" animation="{{animationLf}}"> <view bindtap="tapMenu" class="buttonkey-lficon icon" animation="{{animationLficon}}"></view> <view class="datainfo" wx:if="{{order.length!=0}}" animation="{{animationLfdata}}">···</view> </view> </view> <view class="buttonkey-rtsc"> <view class="buttonkey-rt boxs" animation="{{animationRt}}" hidden="{{shop.SFHJ!='是'}}"> <view class="buttonkey-rticon icon" animation="{{animationRticon}}"></view> </view> </view> </view> |
.buttonkey { height: 100%; display: flex; justify-content: center; align-items: center; position: relative;} .buttonkey .buttonkey-lfsc,.buttonkey .buttonkey-rtsc{ width: 220rpx; height:220rpx; position: relative; margin-top: 220rpx; transform-origin: 100% 0 0; transform: rotate(45deg); } .buttonkey .buttonkey-rtsc{ transform-origin: 0 0 0; transform: rotate(-45deg); }.buttonkey .boxs{ width: 220rpx; height:220rpx; border-radius: 50% 0 50% 50%; background: #b05dba; opacity: 0; } .buttonkey .buttonkey-rt{ border-radius: 0 50% 50% 50%;} .buttonkey .icon{ width: 200rpx; height: 200rpx; background-color: #bc72c5; border-radius: 50%; position: absolute; top: 10rpx; left: 10rpx; z-index: 10; opacity: 0; } .buttonkey .buttonkey-lficon{ background-position: 60rpx 30rpx; transform: rotate(-45deg); } .buttonkey .buttonkey-rticon{ background-position: -251rpx 30rpx; transform: rotate(45deg); } .buttonkey .boxs.nocall{ border-radius: 50%; left: 50rpx; } .buttonkey .buttonkey-lf .datainfo{ display: block; width: 60rpx; height: 60rpx; line-height: 60rpx; color: #fff; font-size: 50rpx; text-align: center; background: #bc72c5; border: 8rpx solid #b05dba; border-radius: 50%; position: absolute; right: 63rpx; bottom: -50rpx; transform: rotate(-45deg); opacity: 0 } |
data: { animationLf:{}, animationRt:{}, animationLficon:{}, animationRticon:{}, aninationImg:{} },getAnimation:function(){ var animationlf = wx.createAnimation({ //各种动画加载 duration: 800, timingFunction: 'ease', transformOrigin: '100% 0 0' }) var animationrt = wx.createAnimation({ duration: 800, timingFunction: 'ease', transformOrigin: '0 0 0' }) var animationlficon = wx.createAnimation({ duration: 500, timingFunction: 'ease' }) var animationrticon = wx.createAnimation({ duration: 500, timingFunction: 'ease' }) var animationdata = wx.createAnimation({ duration: 500, timingFunction: 'ease' }) this.animationlf = animationlf this.animationrt = animationrt this.animationlficon = animationlficon this.animationrticon = animationrticon this.animationdata = animationdata this.unBindAnimation(); console.log("this.data.animationLf", this.data.animationLf) console.log("this.data.animationLficon", this.data.animationLficon) setTimeout(function(){ animationlf.opacity(1).scale(1).step() this.setData({ animationLf: animationlf.export() }) // console.log(this.data.animationLf) setTimeout(function () { animationlficon.opacity(1).step() animationdata.opacity(1).step() animationrt.opacity(1).scale(1).step() this.setData({ animationRt: animationrt.export(), animationLficon: animationlficon.export(), animationLfdata: animationdata.export() }) setTimeout(function () { animationrticon.opacity(1).step() this.setData({ animationRticon: animationrticon.export(), }) }.bind(this), 1000) }.bind(this), 1000) }.bind(this),100) setTimeout(function () { animationlficon.opacity(1).step() this.setData({ animationImg: animationlficon.export() }) }.bind(this), 2300) }, unBindAnimation: function () { var animationlf = wx.createAnimation({ //各种动画加载 duration: 10, timingFunction: 'ease', transformOrigin: '100% 0 0' }) var animationrt = wx.createAnimation({ //各种动画加载 duration: 10, timingFunction: 'ease', transformOrigin: '0 0 0' }) var animationlficon = wx.createAnimation({ duration: 10, timingFunction: 'ease' }) var animationrticon = wx.createAnimation({ duration: 10, timingFunction: 'ease' }) var animationdata = wx.createAnimation({ duration: 10, timingFunction: 'ease' }) var animationimg = wx.createAnimation({ duration: 10, timingFunction: 'ease' }) this.animationlf = animationlf this.animationrt = animationrt this.animationlficon = animationlficon this.animationrticon = animationrticon this.animationdata = animationdata this.animationimg = animationimg animationlf.scale(0).opacity(0).step() animationrt.scale(0).opacity(0).step() animationlficon.opacity(0).step() animationrticon.opacity(0).step() animationdata.opacity(0).step() animationimg.opacity(0).step() this.setData({ animationLf: animationlf.export(), animationRt: animationrt.export(), animationLficon: animationlficon.export(), animationRticon: animationrticon.export(), animationLfdata: animationdata.export(), animationImg: animationimg.export() }) }, |
