在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

      })

    }

 }