1.旋轉(zhuǎn)
2.縮放
3.方向鎖定
4.下拉刷新
旋轉(zhuǎn)
原理：如圖， 旋轉(zhuǎn)角度為黃線與垂直線的夾角-綠線與垂直線的夾角
至于它們的夾角怎么算呢？這里用到了極其高深的的初中數(shù)學(xué)知識(shí)(笑哭)tanα = (a-m)/(n-b);
α=Math.atan2((n-b),(a-m))*180/Math.PI(因?yàn)檫@里指的是弧度,所以要乘180/Math.PI);
下面是一個(gè)具體的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
<title>移動(dòng)端手勢(shì)識(shí)別-旋轉(zhuǎn)原理</title>
<style media="screen">
* {margin:0;padding:0;}
.box {width:150px;height:150px;background-color:green;margin:50px auto;transform: rotate(0deg);}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
let oBox = document.querySelector(".box");
let old_Ang = 0;
oBox.addEventListener("touchstart",function(ev){
if(ev.targetTouches.length>=2){
let a = ev.targetTouches[0].clientX-ev.targetTouches[1].clientX;
let b = ev.targetTouches[0].clientY-ev.targetTouches[1].clientY;
let Ang = Math.atan2(b,a)*180/Math.PI;
let StartAng = old_Ang;
ev.preventDefault();
}
function FnMove(ev){
if(ev.targetTouches.length>=2){
let a = ev.targetTouches[0].clientX-ev.targetTouches[1].clientX;
let b = ev.targetTouches[0].clientX-ev.targetTouches[1].clientY;
let Ang2 = Math.atan2(b,a)*180/Math.PI;
let old_Ang = StartAng+Ang-Ang2;
this.style.transform = `transform(${old_Ang}deg)`;
}
}
function FnEnd(){
oBox.removeEventListener("touchmove",FnMove,false);
oBox.removeEventListener("touchend",FnEnd,false);
}
oBox.addEventListener("touchmove",FnMove,false);
oBox.addEventListener("touchend",FnEnd,false);
},false);
</script>
</body>
</html>
縮放
原理：如圖 手指從黃線的位置到綠線的位置,對(duì)應(yīng)的矩形比例沒變，從而可以計(jì)算出縮放后的矩形寬高
同樣，一個(gè)具體的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移動(dòng)端手勢(shì)-縮放原理</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
<style media="screen">
*{margin:0;padding:0}
.box {width: 150px;height: 150px;background-color: green;margin:50px auto;transform: scale(0deg);}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
let oBox = document.querySelector(".box");
oBox.addEventListener("touchstart",function(ev){
ev.preventDefault();
let a = ev.targetTouches[0].clientX - ev.targetTouches[1].clientX;
let b = ev.targetTouches[0].clientY - ev.targetTouches[1].clientY;
let dis = Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
let w = oBox.offsetWidth;
let h = oBox.offsetHeight;
function FnMove(ev){
if(ev.targetTouches.length>=2){
let a = ev.targetTouches[0].clientX - ev.targetTouches[1].clientX;
let b = ev.targetTouches[0].clientY - ev.targetTouches[1].clientY;
let dis2 = Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
oBox.style.width = w/dis*dis2 + "px";
oBox.style.height = h/dis*dis2 + "px";
}
}
function FnEnd(){
oBox.removeEventListener("touchmove",FnMove,false);
oBox.removeEventListener("touchend",FnEnd,false);
}
if(ev.targetTouches.length>=2){
ev.preventDefault();
oBox.addEventListener("touchmove",FnMove,false);
oBox.addEventListener("touchend",FnEnd,false);
}
},false)
</script>
</body>
</html>
方向鎖定與下拉刷新加載
所謂“方向鎖定”指的是,當(dāng)用戶手指向下滑動(dòng)頁面的時(shí)候就不能左右滑動(dòng)頁面，相反，左右滑動(dòng)頁面的時(shí)候則不能上下滑動(dòng)頁面，有一個(gè)方向是鎖定的。如果你對(duì)我說的有點(diǎn)疑惑，可以打開淘寶客戶端滑動(dòng)試試(我本人之前是沒有感覺到存在方向鎖定的問題)，這也應(yīng)了一句話，“最好的用戶體驗(yàn)是用戶完全感覺不到的”。
怎么判斷用戶是想上下滑動(dòng)還是左右滑動(dòng)呢？很簡(jiǎn)單，定個(gè)標(biāo)準(zhǔn)，當(dāng)左右滑動(dòng)距離大于5時(shí)認(rèn)為用戶是左右滑，當(dāng)上下滑動(dòng)距離大于5時(shí)，認(rèn)為用戶是上下滑。
當(dāng)然，下拉刷新也是在此基礎(chǔ)上順便可以實(shí)現(xiàn)的，因?yàn)槲覀円呀?jīng)確定了滑動(dòng)方向。
具體例子請(qǐng)?jiān)L問我的GitHub地址
https://github.com/clearlivings/dropLoad-and-direction-lock
