本文实例为大家分享了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张扑克，所以只要<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

var that=this;

var img_1=document.createElement("img");

img_1.src+="./images/poker/"+temp[i]+".png";//对创建的img赋值可变的路径

console.log("等于0时");

var ten=10;

img_1.className="poker_float";//为其指定一个类，也就是默认的初始发牌位置

creator.appendChild(img_1);//生成对象

//"../images/poker/"+temp.i+".png";

}

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 < 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++;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。