我做了一个圆形的3d云此词图,通过滑动屏幕控制云此图的旋转速度,现在不知道如何写来控制旋转方向,求一个大佬看看我的代码,教我怎么通过滑动方向来控制旋转方向
init: function() {
var tagEle = [
]
var arr = this.data.roast_list
for(var index in arr){
tagEle.push({
title: arr[index].body,
x: 0,
y: 0,
z: 0,
s: 0,
o: 1,
f: 15,
angleX: 0,
angleY: 0
})
}
for (var i = 0; i < tagEle.length; i++) {
var fallLength = 100
var k = (2 * (i + 1) - 1) / tagEle.length - 1;
var a = Math.acos(k);
var b = a * Math.sqrt(tagEle.length * Math.PI);
var numx = 120 * Math.sin(a) * Math.cos(b)
var numy = 120 * Math.sin(a) * Math.sin(b);
var numz = 220 * Math.cos(a);
tagEle[i].x = numx * 2
tagEle[i].y = numy * 2
tagEle[i].z = numz
tagEle[i].s = 350 / (400 - tagEle[i].z)
}
var interBoolean = true;
this.setData({
timer:setInterval(() => {
if(interBoolean == true){
interBoolean = false
for (var i = 0; i < tagEle.length; i++) {
tagEle[i].s = 350 / (400 - tagEle[i].z)
var cos = Math.cos(angleX);
var sin = Math.sin(angleX);
var y1 = tagEle[i].y * cos - tagEle[i].z * sin;
var z1 = tagEle[i].z * cos + tagEle[i].y * sin;
tagEle[i].y = y1;
tagEle[i].z = z1;
var cos = Math.cos(angleY);
var sin = Math.sin(angleY);
var x1 = tagEle[i].x * cos - tagEle[i].z * sin;
var z1 = tagEle[i].z * cos + tagEle[i].x * sin;
tagEle[i].x = x1;
tagEle[i].z = z1;
}
this.setData({
tagEle: tagEle
})
interBoolean = true
}
}, 25)
})
},
可以写个代码片段的话,我明早可以帮你看
fristclientX 和 fristclientY 先不要取绝对值
fristclientX大于0,是右;小于0,是左。
fristclientY大于0,是下;小于0,是上。
组合起来就是8个方向。
然后根据方向不同,计算 x y z的公式也是不一样的,
比如你现在是默认方向是 左上,那么 line: 151 152 158 159的参数就是 angleX和angleY。那么对应的右下放下公式就是把 angleX和angleY直接改成 -angleX和-angleY。四个方向的正负号各有区别,自己摸索下吧。
更精确的方向需要根据具体的direction值来计算angleX和angleY的值
fristclientX = event.changedTouches[0].clientX;
fristclientY = event.changedTouches[0].clientY;
fristtime = new Date().getTime();
},
touchEnd:function(event){
var time = new Date().getTime() - fristtime;
fristclientX = Math.abs(event.changedTouches[0].clientX - fristclientX);
fristclientY = Math.abs(event.changedTouches[0].clientY - fristclientY);
if(time == 0){
time = 100
}
if(fristclientX > fristclientY){
angleY = fristclientX/time * 0.1
angleX = fristclientX/time * 0.1
}else{
angleY = fristclientY/time * 0.1
angleX = fristclientY/time * 0.1
}
// tagEle
},
这是控制转动速度的代码
<view class="tagBall" >
<a class="tag" wx:for="{{tagEle}}" wx:key="index" style="opacity:{{item.o}};z-index:{{item.z}};left: {{item.x}}rpx;top: {{item.y}}rpx;transform: scale({{item.s}})">
{{item.title}}
</a>
</view>