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;
}
制作流畅的滑动吧!
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 华为近日清退了一批34岁以上的中年员工,都是程序员,原因很容易想得到,中年人精力和创造力方面弱很多,而稀少的管理岗...