JS实现纸牌发牌动画

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"];
 //将你的扑克前戳名全部存储到数组中
 var Obj = new Object(); //新建一个对象
 var array=[];//空数组一个
 for(var i=0;i<4;i++){//游戏演示里只需要发4张扑克，所以只要<4 
   var x=Math.round(Math.random()*52);//随机数取整*52
   Obj[i]=x;//存入到全局变量中 否则每次只能存一个数值
 }
 console.log(Obj);//打印对象看看是不是4个对象
 window.array=[desen[Obj[0]],desen[Obj[1]],desen[Obj[2]],desen[Obj[3]]];
 //将存好的数组 带入扑克全局
}

function send_poker(){ //该方法是发牌事件
 console.log(window.array);
 //测试你的全局变量是否正常
 //并且将传递的全局变量带入temp[]
 var temp=[window.array[0],window.array[1],window.array[2],window.array[3]];
 var ti=0;
 var iamges="../poker/"+temp+".png";//这是图片的默认路径 +你的 desen
 var creator=document.getElementById("d_back"); //取得操作的dom父元素
 var po_1=document.createElement("div");//虚拟生成div
 var num = 0;       //初始化变量
 //po_1.src="../h_1.png";
 //img_1.scr="../images/poker/h_1.png";
 
 for(var i=0;i

function move_poker(){ //移动扑克
 var node = document.getElementById("d_back").childNodes;//获取父元素下的所有子节点
 console.log(node);//打印出有多少
 var n5=node[9];//以要操作的 img对象类为 9开始操作
 var n6=node[10];
 var n7=node[11];
 var n8=node[12];
 var popo=anime({//animation动画可在最后查看
  targets: n5, //操作的对象
  translateX:-150, //移动到的横向位置
  translateY: -250,//移动到的纵向位置
  easing: 'easeInOutQuad',//缓动，不更改css机制
  duration:100,//完成时间
  });
  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 是将所有节点复位，方便下次发牌
 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) { //该方法有多个dom时，则执行异或异步线程模式进行
 var i = 0;
 var animatiOns= instance.animations;
 var animatiOnsLength= animations.length; 
 while (i  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