跟手拖拽，轉盤旋轉，都不是難事，然而跟手轉動一個轉盤或者轉盤上的指針，確是個值得思考的問題
查看效果(請用手機打開，或者用chrome的手機模式打開)
分析
一、 跟手拖拽的做法是：touchstart的時候記錄下原始位置，touchmove的時候拿到位置的變化，動態更新位置就可以了
二、轉盤轉動的做法是：設定圓心為轉動原點，動態的修改旋轉角度（或者弧度）
三、 現在我們需要在手發生移動的時候，映射到角度或者弧度的變化，此時通過x軸方向和y軸方向的距離變化來映射將會是一片困頓，是時候發揮你的想象力了，請拿起你的紙和筆。這里就不賣關子了，直接上圖：
wheel.png
注意到圖片紅色的點是圓心，綠色的點是touchstart時候記錄下的起始點，藍色的點是touchmove的過程中不斷變化的目標點。我們的目標很明確，計算指針變化的角度（或弧度），用我僅有的初中數學知識思考得知，知道三角形的每個頂點，是可以求出每個頂角的角度。運用三角形的余弦定理，求弧度值：
//獲得point2頂角的弧度值
//point1傳入起始點，point2傳入圓心，point3傳入結束點，可求得指針運動的夾角弧度
function getAngle(point1, point2, point3) {
var bb = (point2.y - point1.y)*(point2.y - point1.y) + (point2.x - point1.x)*(point2.x - point1.x);
var aa = (point3.y - point1.y)*(point3.y - point1.y) + (point3.x - point1.x)*(point3.x - point1.x);
var cc = (point3.y - point2.y)*(point3.y - point2.y) + (point3.x - point2.x)*(point3.x - point2.x);
var cosa = (bb + cc - aa)/(2*Math.sqrt(bb)*Math.sqrt(cc));
return Math.acos(cosa);
}
四、 剛才只考慮了順時針的情況，并沒有考慮逆時針的方向
wheel2.png
這種情況的弧度值為-getAngle(point1, point2, point3)，這并不難理解，難點在于如何判斷到底是逆時針還是順時針，可以通過如下的面積量的方法來判斷順時針還是逆時針
//通過面積量的方法來判斷順時針還是逆時針
//point1傳入圓心，point2傳入起始點，point3傳入終點
function duration(point1, point2, point3) {
var sp = (point1.x-point3.x)*(point2.y-point3.y)-(point1.y-point3.y)*(point2.x-point3.x);
console.log(sp);
if(sp>0) {//順時針
return 1
} else if(sp<0) {//逆時針
return -1
} else {
return 0;
}
}
完整的程序代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跟手轉動羅盤指針</title>
<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=1.0,user-scalable=0">
<style type="text/css">
+ {
padding: 0;
margin: 0;
}
html,
body,
.container {
width: 100%;
height: 100%;
background-color: rgb(5, 15, 77);
position: relative;
}
.circle {
width: 320px;
height: 262px;
position: absolute;
top: 50%;
margin-top: -131px;
background-image: url(img/circle.png);
background-size: 100% 100%;
}
.line {
width: 72px;
height: 138px;
background-image: url(img/line.png);
background-size: 100% 100%;
top: 0;
left: 123px;
position: absolute;
transform: rotate(0deg);
transform-origin: 36px 138px;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 36px 138px;
}
</style>
</head>
<body>
<script type="text/javascript">
var clientWidth = document.documentElement.clientWidth,
viewport = null,
viewportWidth = 'device-width',
viewportScale = 1;
if (clientWidth > 320) {
viewport = document.querySelector('meta[name="viewport"]');
viewportScale = clientWidth / 320;
viewportWidth = 320;
viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
}
</script>
<div class="container">
<div class="circle">
<div class="line" id='line'></div>
</div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript">
//獲得point2頂角的弧度值
function getAngle(point1, point2, point3) {
var bb = (point2.y - point1.y) * (point2.y - point1.y) + (point2.x - point1.x) * (point2.x - point1.x);
var aa = (point3.y - point1.y) * (point3.y - point1.y) + (point3.x - point1.x) * (point3.x - point1.x);
var cc = (point3.y - point2.y) * (point3.y - point2.y) + (point3.x - point2.x) * (point3.x - point2.x);
var cosa = (bb + cc - aa) / (2 * Math.sqrt(bb) * Math.sqrt(cc));
return Math.acos(cosa);
}
//通過面積量的方法來判斷順時針還是逆時針
//point1傳入圓心，point2傳入起始點，point3傳入終點
function duration(point1, point2, point3) {
var sp = (point1.x-point3.x)*(point2.y-point3.y)-(point1.y-point3.y)*(point2.x-point3.x);
console.log(sp);
if(sp>0) {
return 1
} else if(sp<0) {
return -1
} else {
return 0;
}
}
var line = document.getElementById('line');
var oX = 0;
var oY = 0;
//全局記錄
var rolate = 0;
//圓心
var pointCenter = {
x: 159,
y: 187
}
//初始移動點
var pointO = false;
var ro = 0;
//在手機瀏覽器（如微信）中打開頁面拖動的時候頁面會漏底
//禁掉默認事件，不然影響咱們的更手轉動
$(document).on('touchstart', function(e) {
e.preventDefault();
}).on('touchmove', function(e) {
e.preventDefault();
});
line.addEventListener('touchstart', function(e) {
var touche = e.touches[0];
oX = touche.clientX;
oY = touche.clientY;
pointO = {
x: oX,
y: oY
}
});
line.addEventListener('touchmove', function(e) {
var mx = e.touches[0].clientX;
var my = e.touches[0].clientY;
ro = getAngle(pointO, pointCenter, {
x: mx,
y: my
});
ro = ro * duration(pointCenter, pointO, {
x: mx,
y: my
});
ro = rolate + ro;
$('#line').css({
'-webkit-transform': 'rotate(' + ro + 'rad)',
'transform': 'rotate(' + ro + 'rad)'
});
});
line.addEventListener('touchend', function() {
rolate = ro;
});
</script>
</body>
</html>
結語
這類效果，代碼不需要很多，但是找到其中的規律再轉化為機器認識的語言絕非易事，難就難在這個數學建模的過程，需要一點想象力，可以給予的經驗就是，拿起你的筆和紙，去畫，靈感自來。
源碼在這里
歡迎一起交流
