请使用firefox,chrome等最新浏览器浏览本站。

HTML5转盘抽奖示例讲解

html5 阿豹 703次浏览 1个评论 扫描二维码

之前写过一款基于canvas的刮刮乐插件,详情请查看html5刮刮乐插件,今天给大家分享基于转盘形式的抽奖案例:

turn

由图可知我们将转盘分为12块区域,每块区域为30度。要实现随机旋转,首先我们要规定每块区域最终标记的度数。比如一等奖区域,我们显示为0度,二等奖区域,我们显示为120度。
所以我们可以定义一个12位的数组记录最终的度数:

var dataObj = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];

然后获取0-11的init型数据,获得最终显示的度数:

var key = getRandom(0, 11);
var deg = dataObj[key]+1440;
function getRandom(min, max) {
//x上限,y下限
var x = max;
var y = min;
if (x < y) { x = min; y = max; } var rand = parseInt(Math.random() * (x - y + 1) + y); return rand; }

代码中的+1440是为了让转盘多旋转四圈,这样显得不那么单调。

此时获得的key就是数组下标(在后面的监听动画结束的回调中可以根据这个key值,来进行逻辑判读),获得的deg就是转盘最终要旋转的度数。接下来就是实现旋转:
要实现旋转,我们首先想到的就是css3 transform:rotate(deg)来实现

$("#btn").on("click", function(){
    var key = getRandom(0, 11);
    var deg = dataObj[key]+1440; 
    $("#img").css({
        webkitTransform: "";
        webkitTansition : "all 2s ease"
    });
    setTimeout(function(){
        $("#img").css({
            webkitTansition : "all 2s ease"
            webkitTansform : "rotate("+deg+"deg)";
        });
    }, 30);	
   
});

以上代码包含重置css transform,是为了多次点击,先将元素重置到原始状态,再进行旋转。

写到这里动画效果已经完成,最终我们要监听动画结束的回调,在回调中去完成我们的逻辑:

$("#btn").on("click", function(){
    var key = getRandom(0, 11);
    var deg = dataObj[key]+1440; 
    $("#img").css({
        webkitTransform: "";
        webkitTansition : "all 2s ease"
    });
    setTimeout(function(){
        $("#img").css({
            webkitTansition : "all 2s ease"
            webkitTansform : "rotate("+deg+"deg)";
        });
        $("#img").bind("webkitTransitionEnd", callBack);
    }, 30);	
   
});
var callBack = function(){
    //去除绑定事件
    $("#img").unbind("webkitTransitionEnd", callBack);
    if (typeId == 0) {
        alert("恭喜你获得一等奖");
    } else if (typeId == 4) {
        alert("恭喜你获得二等奖");
    } else if (typeId == 8) {
        alert("恭喜你获得三等奖");
    } else {
        alert("再接再厉");
    }
}

以上我们的逻辑是实现点击按钮实现绑定transitionEnd事件,在回调中解除transitionEnd事件。这样就可以防止事件的叠加。

使用插件

a:如果大家觉得这样麻烦,我已将旋转的动画封装成了jquery/zepto插件(rotateModule.js):
查看demo
github下载

参数说明:

/*
 *
 * @param {type} option
 * {
 *   @param beginAngle: num,//初始化的角度
 *   @param time: num,//动画时间
 *   @param callBack: function(){},//动画结束的回调
 *   @param easing: ease/ease-in/ease-out/linear,//动画的运动曲线
 * }
 * 
 * return obj
 *   @param rotateTo(deg)//旋转的度数
 *
 */

使用:

var dataObj = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
$(function() {
	var rotating = false;
	var myTurn = $("#outer").rotateModule({
		beginAngle: 0,
		time: 3,
		endAngule: null,
		callBack: function() {
			rotating = false;
			if (typeId == 0) {
				alert("恭喜你获得一等奖");
			} else if (typeId == 4) {
				alert("恭喜你获得二等奖");
			} else if (typeId == 8) {
				alert("恭喜你获得三等奖");
			} else {
				alert("再接再厉");
			}
		}
	});
	$("#inner").on("click", function() {
		/***
		 * ajax在后台获取0-12的随机数*
		 * **/
		var key = getRandom(0, 11);
		if (!rotating) {
			rotating = true;
			//alert(dataObj[key] + "," + key);
			myTurn.rotateTo(dataObj[key] + 1440);
			typeId = key;
		}
	});
});

function getRandom(min, max) {
	//x上限,y下限   
	var x = max;
	var y = min;
	if (x < y) {
		x = min;
		y = max;
	}
	var rand = parseInt(Math.random() * (x - y + 1) + y);
	return rand;
}

b:使用jQueryRotate.js实现:
github下载

c:使用zepto的 animate方法实现,原理和以上讲的类似。都是通过监听transitionEnd方法。

d:使用jquery的anmate方法实现,原理是使用setTimeout实现回调。


喜欢 (5)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(1)个小伙伴在吐槽
  1. 学习了
    匿名2016-05-18 21:55 回复