最近在做一个有关Slot Machine小游戏的开发，其中遇到了不少的坑，现将个人遇到的问题总结如下，希望今后对大家开发的过程中有所的帮助。
这个项目是部署到微信朋友圈广告的，两天时间，PV就有14W之多，感觉这个项目还是挺成功的哦！！！
咱们闲话少说，直接上最终上线的项目效果图。
【意料之外的事情】这个项目竟然获奖了
这个项目的难点主要在于这个Slot Machine，我在开始开发的时候，也想过直接从github上直接找一个插件来实现，但是后来经过的的尝试，我失败了。在PC端类似的Slot Machine这种插件是非常多的，但是要是直接拿到移动端来用，是有好多的潜在问题的。我们都知道PC端目前对于性能来说，普遍是要比移动端好很多的，但是PC端的插件要是直接拿到移动端来使用的话，就会出现很多的性能问题，尤其是在安卓手机上，会卡的十分严重。那么，我们作为开发人员，只能硬着头皮去解决这些棘手的问题。下面是写的一个Demo。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> 6 <title>slot machine</title> 7 <style> 8 * { 9 padding: 0; 10 margin: 0; 11 } 12 13 html, body { 14 width: 100%; 15 height: 100%; 16 overflow: hidden; 17 } 18 19 .slot_machine { 20 display: inline-block; 21 position: absolute; 22 top: 8%; 23 left: 22%; 24 overflow: hidden; 25 } 26 27 .slot_machine img { 28 display: block; 29 } 30 31 #img_0 { 32 position: absolute; 33 top: -300%; 34 } 35 36 #img_1 { 37 38 } 39 40 #img_2 { 41 position: absolute; 42 top: -100%; 43 } 44 45 #img_3 { 46 position: absolute; 47 top: -200%; 48 } 49 50 #result_1 { 51 position: absolute; 52 top: -400%; 53 } 54 55 .move { 56 transform: translateY(100%); 57 } 58 59 .move_begin { 60 -webkit-animation: move_begin 1s ease-in; 61 } 62 63 @-webkit-keyframes move_begin { 64 from {-webkit-transform: translateY(0%);} 65 100% {-webkit-transform: translateY(200%);} 66 } 67 68 .move_stable { 69 -webkit-animation: move_stable .5s linear infinite; 70 } 71 72 @-webkit-keyframes move_stable { 73 from {-webkit-transform: translateY(0%);} 74 100% {-webkit-transform: translateY(300%);} 75 } 76 77 .move_end_1 { 78 -webkit-animation: move_end_1 1s ease-out; 79 } 80 81 @-webkit-keyframes move_end_1 { 82 100% {-webkit-transform: translateY(300%);} 83 } 84 85 .move_end_2 { 86 -webkit-animation: move_end_2 1s ease-out; 87 } 88 89 @-webkit-keyframes move_end_2 { 90 100% {-webkit-transform: translateY(100%);} 91 } 92 93 .move_end_3 { 94 -webkit-animation: move_end_3 1s ease-out; 95 } 96 97 @-webkit-keyframes move_end_3 { 98 100% {-webkit-transform: translateY(200%);} 99 } 100 101 102 </style> 103 </head> 104 <body> 105 <div class="slot_machine"> 106 <img id="img_0" src="./t1.png" alt="" /> 107 <img id="img_1" src="./t1.png" alt="" /> 108 <img id="img_2" src="./t2.png" alt="" /> 109 <img id="img_3" src="./t3.png" alt="" /> 110 </div> 111 <script src="./jquery-3.0.0.min.js" charset="utf-8"></script> 112 <script> 113 var begin = false; 114 var status = 0; // 0 stop 1 begin 2 loop 3 end 115 116 $('html').on('click touchstart', function(event) { 117 event.preventDefault(); 118 console.log(status); 119 120 if (status == 0) { // stop to begin 121 $('.slot_machine img').addClass('move_begin'); 122 status = 1; 123 124 $('.slot_machine img').one("webkitAnimationEnd", move_begin_complete); 125 126 } else if(status == 2) { // loop to end 127 $('.slot_machine img').one('animationiteration webkitAnimationIteration', function() { 128 console.log('move_stable_animationiteration'); 129 $('.slot_machine img').unbind("animationiteration webkitAnimationIteration"); 130 $('.slot_machine img').removeClass('move_stable').addClass('move_end_1'); 131 $('.slot_machine img').one("webkitAnimationEnd", move_end_complete); 132 status == 3; 133 }); 134 } 135 }); 136 function move_begin_complete(){ 137 console.log('move_begin_complete'); 138 $('.slot_machine img').unbind("webkitAnimationEnd"); 139 $('.slot_machine img').removeClass('move_begin').addClass('move_stable'); 140 status = 2; 141 } 142 function move_end_complete(){ 143 console.log('move_end_complete'); 144 $('.slot_machine img').unbind("webkitAnimationEnd"); 145 $('.slot_machine img').removeClass('move_end_1'); 146 status = 0; 147 } 148 </script> 149 </body> 150 </html>
这个Demo主要用到了CSS3动画，CSS3动画在移动端的性能还是比较好的，至少在安卓机上不会出现一卡一卡的现象。
测试效果图:
