美文网首页
JS拖动到达边界产生阻力,拉力,弹力,松开回弹

JS拖动到达边界产生阻力,拉力,弹力,松开回弹

作者: SystemLight | 来源:发表于2020-05-23 10:45 被阅读0次

    安装工具函数

    npm install micro-touch micro-transform2d --save
    

    micro-transform2d使用说明
    micro-touch使用说明

    实现举例

    let pullN = 0.2;
    
    let tg = new TouchGesture(divDom.current);
    let t2d = new Transform2D(divDom.current);
    t2d.setTranslate(50, 0);
    
    tg.on("tapDown", function () {
        divDom.current.style.removeProperty("transition");
        t2d.setTranslate(50, 0);
    });
    
    tg.on("pressMove", function (e) {
        let {moveDistance: {x, y, d}} = e;
        let [nowX, nowY] = t2d.getTranslate();
    
        if (nowY > 50) {
            y *= pullN;
        }
    
        t2d.setTranslate(50, nowY + y);
    });
    
    tg.on("tapUp", function () {
        divDom.current.style.transition = "500ms";
        t2d.setTranslate(50, 0);
    });
    

    相关文章

      网友评论

          本文标题:JS拖动到达边界产生阻力,拉力,弹力,松开回弹

          本文链接:https://www.haomeiwen.com/subject/qrjkahtx.html