本文实例为大家分享了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<temp.length;i++){ //循环temp
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++;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_20144597/article/details/112761171