移动端拖动惯性

拖动惯性

            惯性原理:
            产生的速度 = 移动距离 / 移动时间
            距离 = 松开的坐标 - 上次的坐标  (距离差)
            时间 = 松开的时间 - 按下的时间  (时间差)

---

//拖动

    var slide = document.querySelector('.header .h-nav'),
        nav = document.querySelector('.header .nav'),
        // 开始的偏移
        startX = 0,
        // 保存的偏移
        translateX = 0,
        // 手指坐标
        startFinger = 0,
        maxWidth = nav.offsetWidth - slide.offsetWidth,
        lastTime = 0; //按下的时间
    console.log(maxWidth);
    slide.addEventListener('touchstart',function (e) {
        e.stopPropagation();
        startFinger = e.changedTouches[0].clientX;
        nav.style.WebkitTransition = nav.style.transition = '';
        startX = translateX;
        lastTime = Date.now();
        console.log(lastTime);
    });
    slide.addEventListener('touchmove',function (e) {
        e.stopPropagation();
        var nowFinger = e.changedTouches[0].clientX,
            distance = nowFinger - startFinger;
        translateX = distance + startX;
        // 弹性
        if(translateX > 0 ){ //拖动系数. 拉力的感觉
            translateX *= 0.4;
        }else if( translateX < -maxWidth){  //最后.
            translateX = distance*0.4 + startX;
        }
        shift(translateX);
    })
    slide.addEventListener('touchend',function (e) {
         /*
            惯性原理:
            产生的速度 = 移动距离 / 移动时间
            距离 = 松开的坐标 - 上次的坐标  (距离差)
            时间 = 松开的时间 - 按下的时间  (时间差)
         */
        var nowFinger = e.changedTouches[0].clientX,
            distance = nowFinger - startFinger,  //距离差
            timeDis = Date.now() - lastTime,  //时间差
            speed = (distance / timeDis)*100;
        console.log(speed);  //很小 *倍数
        // 惯性
        translateX += speed;

        // 边界 ,弹回去
        if(translateX > 0){
            translateX = 0;
        }else if(translateX < -maxWidth){
            translateX = -maxWidth;
        }
        // 添加贝塞尔曲线
        nav.style.WebkitTransition = nav.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
        shift(translateX);
    })
    function shift(value){
        nav.style.WebkitTransform = nav.style.transform = 'translateX('+value+'px)';
    }

---