预览(请再chrome模拟手机模式打开)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<style>
.pan {
width: 5.73rem;
height: 6.71rem;
background: url(http://a.xnimg.cn/wap/wechatLive/img/scroll-back.png) no-repeat 50% 50%/100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.scroll {
position: absolute;
width: 4.78rem;
height: 4.77rem;
left: 50%;
top: 0.47rem;
background: url(http://a.xnimg.cn/wap/wechatLive/img/scroll-table.png) no-repeat 50% 50%/100%;
z-index: 2;
transform: translateX(-50%);
/*transition: all 2111ms linear;*/
}
.row {
position: absolute;
left: 50%;
top: 1.75rem;
width: 1.59rem;
height: 1.9rem;
background: url(http://a.xnimg.cn/wap/wechatLive/img/scroll-start.png) no-repeat 50% 50%/100%;
z-index: 3;
transform: translateX(-50%);
}
</style>
<script>
window.onresize = r;
function r(resizeNum){
var winW = window.innerWidth,
html = document.querySelector('html');
html.style.fontSize = winW*0.15625+'px';
//修复小米等小字体出现的布局bug
var fontSize = parseFloat(html.style.fontSize, 10),
computeFontSize = parseFloat(window.getComputedStyle(html).fontSize, 10);
if (fontSize !== computeFontSize) {
html.style.fontSize = fontSize * fontSize / computeFontSize+'px';
}
if(winW > window.screen.width && resizeNum<=10){
setTimeout(function(){
r(++resizeNum);
}, 10);
}
}
r(0);
var isOperate = true,
rotate = 270,
totalRotate = 0;
function change() {
var scroll = document.querySelector('.scroll'),
deg = getCurrentRotationFixed();
//服务结果未返回,走requestanimationframe渲染动画
if (isOperate) {
//每次增加角度10°
scroll.style.transform = 'translate3d(-50%,0,0) rotate('+ (deg+10) +'deg)';
window.requestAnimationFrame(change);
} else {
//设置一个最后想要停留的角度为n*360+rotate,在本次n我取3
totalRotate = 1080+rotate;
//设置transition的时间为指定时间,为了保证动画流畅从requestanimationframe过渡到transition
// 16.7ms = (1/60)*1000,每帧增加10度,所有每增加1度需要16.7ms/10 = 1.67ms
scroll.style.transitionDuration = totalRotate*(16.7/10)+'ms';
scroll.style.transitionProperty = 'all';
scroll.style.transitionTimingFunction = 'cubic-bezier(0.48, 0.48, 0.68, 0.97)';
scroll.style.transform = 'translate3d(-50%,0,0) rotate('+ totalRotate +'deg)'
}
}
//获取transform rotate角度
function getCurrentRotationFixed() {
var el = document.querySelector(".scroll");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"fail...";
if( tr !== "none") {
var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var scale = Math.sqrt(a*a + b*b);
var radians = Math.atan2(b, a);
if ( radians < 0 ) {
radians += (2 * Math.PI);
}
var angle = Math.round( radians * (180/Math.PI));
} else {
var angle = 0;
}
return angle;
}
function bindEvent() {
document.querySelector('.row').addEventListener('click', function(e) {
var scroll = document.querySelector('.scroll');
isOperate = true;
scroll.style.transform = 'translate3d(-50%,0,0) rotate('+ getCurrentRotationFixed() +'deg)';
scroll.style.transitionDuration = '0ms';
window.requestAnimationFrame(change);
//模拟服务端请求,返回中奖结果
setTimeout(function(e) {
//修改标记,动画停止,过度到tansition
isOperate = false;
//模拟服务返回的中奖结果
rotate = Math.random()*360;
}, 2000)
})
}
document.addEventListener('DOMContentLoaded', function(e) {
bindEvent();
})
</script>
</head>
<body>
<div class="pan">
<div class="row"></div>
<div class="scroll">
</div>
</div>
</body>
</html>