移動端h5的三大抽獎方式：轉(zhuǎn)盤个扰，老虎機袄琳，翻紙牌。
前兩樣demo比較多体箕，用戶也審美疲勞了悟泵。這次微信公眾號要抽獎杈笔，于是調(diào)研了下翻紙牌。
預想的情景是糕非，加載進入頁面之后蒙具，紙牌從屏幕一個角落發(fā)放，并最終成為一個3*3的矩陣朽肥。
這件事可以直接用css的transform來解決禁筏，寫好每個元素要偏移的位置，但會顯得十分初級衡招，也不利于復用篱昔。
之前做游戲的時候有使用過createjs引擎，其中對動畫的處理使用了tween始腾，十分平滑也易于定義州刽。那么有沒有不依賴于createjs的tween？搜了下浪箭，答案是有穗椅，在這里。
先貼一個tweenjs的使用范例：
var element = document.getElementById('myElement');
var tween = new TWEEN.Tween({ top: 0, left: 0 })
.to({ top: 100, left: 100 }, 1000)
.onUpdate(function() {
element.style.transform = 'translate(' + this.left + 'px, ' + this.top + 'px);';
});
聰明的你看完肯定知道它是干啥的了奶栖。
現(xiàn)在發(fā)牌的問題歸結(jié)為：9張牌匹表，創(chuàng)建9個tween，發(fā)到不同的地方去驼抹。
關(guān)鍵的js代碼：
var tweens = new Array(9);
var position = {x: 0, y: 0, rotation: 0};
var targets = function(){
var tmp = new Array(9);
for(var j = 0 ; j < tmp.length ; j ++ ){
tmp[j] = document.getElementById('target'+(j+1));
}
return tmp ;
}();
console.log(targets);
function createTweens(){
var myW = targets[1].offsetWidth ;
var myH = targets[1].offsetHeight ;
for( var i = tweens.length -1 ; i >= 0 ; i -- ){
var tween = new TWEEN.Tween(position)
.to({x: ((i%3)*1.2-1.2)*myW, y: 0-(parseInt(i/3)+1)*myH-10*parseInt(i/3), rotation: 359}, 200)
.delay(0)
//.easing(TWEEN.Easing.Cubic.In)
.onUpdate(function(i){
var j = i;
return function(){
targets[j].style.webkitTransform = 'translate(' + position.x + 'px, ' + position.y + 'px)';
}
}(i))
.onComplete(function(){
position.x = 0 ;
position.y = 0 ;
console.log(position);
});
tweens[i] = tween ;
}
}
中間需要說明的是桑孩，寫了一個閉包來綁定onUpdate; 每張紙牌從一個點發(fā)放到指定位置，經(jīng)過了一些計算框冀。
然后我們從上往下發(fā)牌：
function init() {
createTweens();
for( var i = tweens.length -1 ; i > 0 ; i--){
tweens[i].chain(tweens[i-1]);
}
tweens[tweens.length -1].start();
}
