利用JavaScript制作一個(gè)紙牌發(fā)牌動(dòng)畫？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了曲江免費(fèi)建站歡迎大家使用！

技術(shù)概要

1.對(duì)象操作
2.數(shù)據(jù)操作
3.JS animation動(dòng)畫
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"];
 //將你的撲克前戳名全部存儲(chǔ)到數(shù)組中
 var Obj = new Object(); //新建一個(gè)對(duì)象
 var array=[];//空數(shù)組一個(gè)
 for(var i=0;i<4;i++){//游戲演示里只需要發(fā)4張撲克，所以只要<4 
   var x=Math.round(Math.random()*52);//隨機(jī)數(shù)取整*52
   Obj[i]=x;//存入到全局變量中 否則每次只能存一個(gè)數(shù)值
 }
 console.log(Obj);//打印對(duì)象看看是不是4個(gè)對(duì)象
 window.array=[desen[Obj[0]],desen[Obj[1]],desen[Obj[2]],desen[Obj[3]]];
 //將存好的數(shù)組 帶入撲克全局
}

function send_poker(){ //該方法是發(fā)牌事件
 console.log(window.array);
 //測(cè)試你的全局變量是否正常
 //并且將傳遞的全局變量帶入temp[]
 var temp=[window.array[0],window.array[1],window.array[2],window.array[3]];
 var ti=0;
 var iamges="../poker/"+temp+".png";//這是圖片的默認(rèn)路徑 +你的 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++){//循環(huán)temp
  var that=this;
  var img_1=document.createElement("img");
  img_1.src+="./images/poker/"+temp[i]+".png";//對(duì)創(chuàng)建的img賦值可變的路徑
   console.log("等于0時(shí)");
  var ten=10;
  img_1.className="poker_float";//為其指定一個(gè)類，也就是默認(rèn)的初始發(fā)牌位置
  
  
  creator.appendChild(img_1);//生成對(duì)象
   
  
  //"../images/poker/"+temp.i+".png";
  
 }

 
  move_poker();//該方法是自封裝的動(dòng)畫
  
}

動(dòng)畫事件

function move_poker(){ //移動(dòng)撲克
 var node = document.getElementById("d_back").childNodes;//獲取父元素下的所有子節(jié)點(diǎn)
 console.log(node);//打印出有多少
 var n5=node[9];//以要操作的 img對(duì)象類為 9開始操作
 var n6=node[10];
 var n7=node[11];
 var n8=node[12];
 var popo=anime({//animation動(dòng)畫可在最后查看
  targets: n5, //操作的對(duì)象
  translateX:-150, //移動(dòng)到的橫向位置
  translateY: -250,//移動(dòng)到的縱向位置
  easing: 'easeInOutQuad',//緩動(dòng)，不更改css機(jī)制
  duration:100,//完成時(shí)間
  });
  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 是將所有節(jié)點(diǎn)復(fù)位，方便下次發(fā)牌
 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) { //該方法有多個(gè)dom時(shí)，則執(zhí)行異或異步線程模式進(jìn)行
 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++;
 }
}

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

本文名稱：利用JavaScript制作一個(gè)紙牌發(fā)牌動(dòng)畫-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://jinyejixie.com/article20/dehojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、網(wǎng)站收錄、電子商務(wù)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)