在IOS小程序中,同一个页面同时执行多个动画,出现卡顿,动画到一半直接跳到结束
业务场景:
类似塔罗牌洗牌过程,需要54张牌进行洗牌动作,能力有限,只使用了animation.translate进行移动跟复原模拟打乱排序的动画目的
wxml代码:
<view wx:for="{{card_list}}" wx:for-index="idx" wx:for-item="item" style="width:11.1111%;display: flex;" animation="{{animationList[idx]}}">
<image src="{{http_host}}/{{item.img_url}}" mode="widthFix" class="test-card" data-index="{{idx}}"></image>
</view>
js代码
translate: function () {
var that = this;
let animationList = that.data.animationList;
var animation = wx.createAnimation({
duration:'400'
});
this.animation = animation;
for(var i = 0; i < 54; i++){
var tarX = Math.random() * 100 - 80;
var tarY = Math.random() * 100 - 80;
if(that.data.shuffle_num == 6){
this.animation.translate(0, 0)
.step()
}else{
this.animation.translate(tarX, tarY)
.step()
}
animationList[i] = animation.export();
this.setData({
animationList:animationList
})
}
}
你好,可更新微信版本到最新版后重试。
若还有问题,请提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
系统:iOS 15.0
微信版本:8.0.17
开发者工具1.05.2201132
开发者工具正常
手机型号:iPhone XS Max
系统:iOS 15.0
微信版本:8.0.17
开发者工具1.05.2201132
开发者工具正常