网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现。
效果演示
核心思路
采用CSS3的transition(过渡效果),给定需要旋转的元素设置transform的rotate属性的结束角度,同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率,代码如下(浏览器前缀可自行添加):
#pointer {
transition: transform 6.5s;
transition-timing-function: ease-in-out;
}
复制代码
这样,给定结束角度后,元素就会旋转,结束角度可以自由控制旋转的圈数,例如结束角度为angelEnd,即圈数m=angelEnd/360 并取整,前几圈转满360无需特殊处理,关键是最后一圈的角度决定了抽奖的结果,代码如下:
let base = 2160; //先转满360×6圈
let result = getRandom(-30,330); // 最后一圈角度,获取-30到330的随机数
let angelEnd = -(base+result)// 结束角度数,负数代表逆时针旋转
$("#pointer").css({"transform":"rotate("+angelEn