参考地址 使用tweenjs写一个发牌的demo
移动端h5的三大抽奖方式:转盘,老虎机,翻纸牌。
前两样demo比较多,用户也审美疲劳了。这次微信公众号要抽奖,于是调研了下翻纸牌。
预想的情景是,加载进入页面之后,纸牌从屏幕一个角落发放,并最终成为一个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);'; });
聪明的你看完肯定知道它是干啥的了。
现在发牌的问题归结为:9张牌,创建9个tween,发到不同的地方去。
关键的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; 每张纸牌从一个点发放到指定位置,经过了一些计算。
然后我们从上往下发牌:
function init() { createTweens(); for( var i = tweens.length -1 ; i > 0 ; i--){ tweens[i].chain(tweens[i-1]); } tweens[tweens.length -1].start(); }