美文网首页
制作流畅的滑动吧!

制作流畅的滑动吧!

作者: 论宅 | 来源:发表于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