或许跟手拖拽已经足够普遍,可是跟手沿着圆弧转动的罗盘指针,却依然足够挑战,先来看看我们要实现的小目标,查看效果(请用手机打开,或者用chrome的手机模式打开)
任务分解、分析
一、 跟手拖拽的一般套路
- touchstart 的时候记录初始位置:ox,oy
- touchmove 的过程中移动到新的位置:x = x1-ox, y = x1 - oy
- touchend 的时候,这步好像也不需要干啥
二、圆弧转盘转动的一般做法
- 设定圆心转动的原点
- 动态的修改旋转的角度(或者弧度)
三、合二为一
如何将手势动作反应到圆弧的角度或者弧度变更上,这是问题的症结所在,起初我也为此而困顿不已
先是通过设定某一位移而旋转固定的角度,但是很难确定圆弧的有效位移,就算确定了有效位移,当旋转到一百八十度之后也蒙圈,反着动了~~
而且这种不均匀的运动实在也难以服众
纠结之际,我拿起了纸和笔,重新寻找灵感:
注意到图片红色的点是圆心,绿色的点是 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);
}复制代码
刚才只考虑了顺时针的情况,不能忽略逆时针的方向:
这种情况的弧度值为 -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="" 0;="" }<="" code="">0)>复制代码
完整的程序代码
结语
Js 特效,有时候代码不需要很多,但是找到其中的规律再转化为机器认识的语言绝非易事,难就难在这个数学建模的过程,需要一点想象力,可以给予的经验就是,拿起你的笔和纸,去画,灵感自来
欢迎来到我的会客厅: