JS realizes the card dealing animation

function desen_x(){
 let that = this;
 var desen=["h_1","h_2","h_3","h_4","h_5","h_6","h_7","h_8",
 "h_9","h_10","h_11","h_12","h_13","p_1","p_2","p_3","p_4"
 ,"p_5","p_6","p_7","p_8","p_9","p_10","p_11","p_12","p_13"
 ,"t_1","t_2","t_3","t_4","t_5","t_6","t_7","t_8","t_9","t_10"
 ,"t_11","t_12","t_13","x_1","x_2","x_3","x_4","x_5","x_6","x_7"
 ,"x_8","x_9","x_10","x_11","x_12","x_13"];
 //Store all your poker prefix names in an array var Obj = new Object(); //Create a new object var array=[]; //Empty array for(var i=0;i<4;i++){ //Only 4 poker cards are needed in the game demo, so only <4 
   var x=Math.round(Math.random()*52);//Random number rounded*52
   Obj[i]=x; //Store in global variable, otherwise only one value can be stored at a time}
 console.log(Obj);//Print the object to see if there are 4 objects window.array=[desen[Obj[0]],desen[Obj[1]],desen[Obj[2]],desen[Obj[3]]];
 // Bring the stored array into the poker global }

function send_poker(){ //This method is the card dealing event console.log(window.array);
 //Test whether your global variables are normal//and bring the passed global variables into temp[]
 var temp=[window.array[0],window.array[1],window.array[2],window.array[3]];
 var ti=0;
 var iamges="../poker/"+temp+".png"; //This is the default path of the image + your desen
 var creator = document.getElementById("d_back"); //Get the DOM parent element of the operation var po_1 = document.createElement("div"); //Virtual generation of div
 var num = 0; // Initialize variables //po_1.src="../h_1.png";
 //img_1.scr="../images/poker/h_1.png";
 
 for(var i=0;i<temp.length;i++){//loop temp
  var that=this;
  var img_1 = document.createElement("img");
  img_1.src+="./images/poker/"+temp[i]+".png"; //Assign a variable path to the created img console.log("when it is equal to 0");
  var ten=10;
  img_1.className="poker_float";//Assign a class to it, which is the default initial dealing position creator.appendChild(img_1);//Generate object//"../images/poker/"+temp.i+".png";
  
 }

 
  move_poker(); //This method is a self-encapsulated animation}

function move_poker(){ //Move poker var node = document.getElementById("d_back").childNodes; //Get all child nodes under the parent element console.log(node); //Print out how many var n5=node[9]; //Start the operation with the img object class to be operated as 9 var n6=node[10];
 var n7=node[11];
 var n8=node[12];
 var popo = anime({//animation can be viewed at the end targets: n5, //operated object translateX:-150, //horizontal position to move to translateY: -250, //vertical position to move to easing: 'easeInOutQuad', //easing, no change to CSS mechanism duration:100, //completion time });
  var popo1 = anime({
  targets: n6,
  translateX:-100,
  translateY: -250,
  easing: 'easeInOutQuad',
  duration:200,
  });
  var popo2 = anime({
  targets: n7,
  translateX:-50,
  translateY: -250,
  easing: 'easeInOutQuad',
  duration:300,
  });
  var popo3 = anime({
  targets: n8,
  translateX:0,
  translateY: -250,
  easing: 'easeInOutQuad',
  duration:400,
  });
}
function gui(){ //GUI resets all nodes to facilitate the next card deal var node = document.getElementById("d_back").childNodes;
 var n5=node[9];
 var n6=node[10];
 var n7=node[11];
 var n8=node[12];
 var popo4 = anime({
  targets: [n5,n6,n7,n8],
  translateX:0,
  translateY: 0,
 })
 node.removeChild(popo4);
}

function setAnimationsProgress(insTime) { //When this method has multiple doms, it executes XOR asynchronous thread mode var i = 0;
 var animations = instance.animations;
 var animationsLength = animations.length; 
 while (i < animationsLength) { 
  var anim = animations[i];
  var animatable = anim.animatable;
  var tweens = anim.tweens;
  var tweenLength = tweens.length - 1;
  var tween = tweens[tweenLength];
  if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; } 
  var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
  var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed);
  var strings = tween.to.strings;
  var round = tween.round;
  var numbers = [];
  var toNumbersLength = tween.to.numbers.length;
  var progress = (void 0);
  for (var n = 0; n < toNumbersLength; n++) {
  var value = (void 0);
  var toNumber = tween.to.numbers[n];
  var fromNumber = tween.from.numbers[n] || 0;
  if (!tween.isPath) {
   value = fromNumber + (eased * (toNumber - fromNumber));
  } else {
   value = getPathProgress(tween.value, eased * toNumber);
  }
  if (round) {
   if (!(tween.isColor && n > 2)) {
   value = Math.round(value * round) / round;
   }
  }
  numbers.push(value);
  }
  var stringsLength = strings.length;
  if (!stringsLength) {
  progress = numbers[0];
  } else {
  progress = strings[0];
  for (var s = 0; s < stringsLength; s++) {
   var a = strings[s];
   var b = strings[s + 1];
   var n$1 = numbers[s];
   if (!isNaN(n$1)) {
   if (!b) {
    progress += n$1 + ' ';
   } else {
    progress += n$1 + b;
   }
   }
  }
  }
  setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms);
  anim.currentValue = progress;
  i++;
 }
}