仪表盘滑动效果 uni-app 微信小程序

 需求：滑动时使三角按钮围绕圆圈转动；

在网上找了下类似的只有图表展示，并不能手动滑动。

思考过程如下：

1.实现转动的效果

通过改变旋转的角度可以让按钮转起来

transform:rotate(0deg);
transition:all .1s;

 2.获取转动的角度

首先我们在图形中画个坐标轴xy，先按钮处于第一象限时，按钮旋转的角度就是bc边的夹角，

a边的长度是： 屏幕触摸位置的x值减去节点到屏幕左侧的距离再减去节点一半的宽度；

b边的长度是： 屏幕触摸位置的y值减去节点到屏幕上侧的距离再减去节点一半的高度之后取绝对值；

有了a和b的长度之后就用勾股定理算出c的长度；

用 a / c 之后用 Math.asin 方法取反正弦值 之后再  * 180/Math.PI ；

所得到的值就是bc边的夹角了；

如果按钮处于第四象限时，

 这时a边与b边的计算方法调换；其他的与处于第一象限时一样，最后的角度加上90度；

第三象限与第一象限计算方法相同，最后的角度加上180度；

第二象限与第四象限计算方法相同，最后的角度加上270度；

这样我们就获取到了滑动到任何位置的角度了。

代码实现：

 html、css代码我这里就不贴了，根据自己的界面样式实现即可。

首先在onload中获取下外层节点的属性并计算出中心点的位置；

//由于小程序中不支持ref所以使用这种方式；
uni.createSelectorQuery().select('.inner').boundingClientRect(
	(rect) => {
		this.rect = rect;
		this.rect.width_c = this.rect.width / 2;
		this.rect.height_c = this.rect.height / 2;
		console.log(this.rect);
	}
).exec();

然后再外层节点中监听下touchmove

<view class="inner" @touchmove="move">

move中内容如下：

/* 
触摸位置的值减去节点距离屏幕边缘的位置 就得到了触摸点在节点中所在的位置;
注意这里的值并不是坐标轴里面的xy值，而是从节点的左上角向右向下延伸的值；
*/
let left = e.touches[0].pageX - this.rect.left;
let top = e.touches[0].pageY - this.rect.top;

// 这里根据中心点的位置判断下，触摸点所在的象限；
let now_index = 0;
if (left < this.rect.width_c) {
	if (top < this.rect.height_c) {
		now_index = 3
	} else {
		now_index = 2;
	}
} else {
	if (top < this.rect.height_c) {
		now_index = 0;
	} else {
		now_index = 1;
	}
}

// 触摸点在节点中所在的位置减去节点宽高的一半之后取绝对值，这样就确定了坐标轴中xy的值了。然后根据勾股定理计算出斜边的值；
let x = Math.abs(left - this.rect.width_c);
let y = Math.abs(top - this.rect.height_c);
let z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));


// 根据触摸点所在的象限判断 是取哪条边的值除以斜边之后取反正弦值
let asin = 0;
if (now_index == 0 || now_index == 2) {
	asin = Math.asin(x / z);
} else {
	asin = Math.asin(y / z);
}
// 计算出反正弦值后 * 180 / Math.PI后就得出了角度，再加上之前象限的角度就得到了所要旋转的角度了，之后赋值给html中的样式就可以了
let angle = Number((asin * 180 / Math.PI).toFixed(2)) + (now_index * 90);

写到这里需求就基本实现了。

原创不易，希望大家多多留言点赞。

仪表盘滑动效果-优快云直播仪表盘滑动效果 uni-app 微信小程序https://live.youkuaiyun.com/v/182330