这篇文章主要为大家详细介绍了JS实现纸牌发牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现纸牌发牌动画的具体代码，供大家参考，具体内容如下
先看演示
游戏构建准备
1.准备52张纸牌
2.一张桌布
3.编辑工具为 Visual Code
技术概要
1.对象操作
2.数据操作
3.JS animation动画
4.全局变量
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张扑克，所以只要 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-600";//这是图片的默认路径 +你的 desen var creator=document.getElementById("d_back"); //取得操作的dom父元素 var po_1=document.createElement("div");//虚拟生成div var num = 0; //初始化变量 //po_1.src="../h_1.png-600"; //img_1.scr="../images/poker/h_1.png-600"; for(var i=0;i<temp.length;i++){//循环temp var that=this; var img_1=document.createElement("img"); img_1.src+="./images/poker/"+temp[i]+".png-600";//对创建的img赋值可变的路径 console.log("等于0时"); var ten=10; img_1.className="poker_float";//为其指定一个类，也就是默认的初始发牌位置 creator.appendChild(img_1);//生成对象 //"../images/poker/"+temp.i+".png-600"; } move_poker();//该方法是自封装的动画 }
动画事件
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); }
animation封装
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 <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++; } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是JS实现纸牌发牌动画的详细内容，更多请关注本站其它相关文章！
