制作流畅的滑动吧!
作者:
论宅 | 来源:发表于
2018-11-30 16:19 被阅读0次var newX = 0;
var oldX = 0;
var minValue=0;
var maxValue=100;
// 目前滑动高度
var nowPositionX = 25;
// 预设滑动高度
var targetPositionX = 25;
// 点击滑动事件
function ontouchstarts(event) {
newX = oldX = event.touches[0].clientX
}
function ontouchmove(event) {
newX = event.touches[0].clientX;
// 这里的/2是滑动速度,可根据情况调整
targetPositionX -= (newX - oldX) / 2;
if(targetPositionX <minValue) {
targetPositionX =minValue
} else if(targetPositionX >maxValue) {
targetPositionX = maxValue;
}
// 限定滑动的取值范围
updateIndex(targetPositionX);
oldX = newX;
}
// 调用requestAnimateFrame方法循环监听nowPositionX和targetPositionX
function render() {
requestAnimationFrame(render);
if(nowPositionX != targetPositionX) {
cameraMoveX();
}
}
// 发现有变动的话就直接执行下面的方法,这里移动的是摄像头,所以方法名
// 当两者相差非常近的时候,就强制令其相等
// 其他情况下,每次requestanimateframe都会移动两者间距的1/10,无论预设目标的值是否在变化,它都会运动间距的1/10
function cameraMoveX() {
if(targetPositionX - nowPositionX > -1 && targetPositionX - nowPositionX < 1) {
nowPositionX = targetPositionX
} else {
nowPositionX -= (nowPositionX - targetPositionX) / 10;
}
// 以下方法无关,原本是一个根据X坐标计算yz坐标的方法,来保证摄像机在特定轨迹上运动
var nowPostion = calculatedCoordinates(nowPositionX)
camera.position.x = nowPostion.x;
camera.position.y = nowPostion.y + 50;
camera.position.z = nowPostion.z + 50;
}
本文标题:制作流畅的滑动吧!
本文链接:https://www.haomeiwen.com/subject/vsmhcqtx.html
网友评论