s

touch拖动事件缓冲及光滑效果 原

发表于 | 分类于 ， | 浏览 次

html

1
2
3
4
<div class="container">
    <div class="wrapper">
    </div>
</div>

main

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
 * options
 * 1. container
 */
let config = {
    parent:'.container',
    ele:'.wrapper',
    scrollX:true,
    scrollY:true
}
class touchmove{
    constructor(options){
        this.options = $.extend({},true,config,options)
        this.target = document.querySelector(this.options.ele)
        this.init()
    }
}
touchmove.prototype = {
    init(){
        var _this = this,
        // 开始的偏移
        startY = 0,
        startX = 0,
        // 保存的偏移
        translateY = 0,
        translateX = 0,
        // 手指坐标
        startFingerX = 0,
        startFingerY = 0,
        maxHeight =  this.target.offsetHeight - (document.documentElement.offsetHeight - this.target.offsetTop),
        maxWidth = this.target.scrollWidth - (document.querySelector(this.options.parent).scrollWidth),
        lastTime = 0; //按下的时间
        _this.target.addEventListener('touchstart',function (e) {
            e.stopPropagation();
            if(_this.options.scrollY){
                startFingerY = e.changedTouches[0].clientY;
                _this.target.style.WebkitTransition = _this.target.style.transition = '';
                startY = translateY;
            }
            if(_this.options.scrollX){
                startFingerX = e.changedTouches[0].clientX;
                _this.target.style.WebkitTransition = _this.target.style.transition = '';
                startX = translateX;
            }
            lastTime = Date.now();
            // console.log(lastTime);
        });
        _this.target.addEventListener('touchmove',function (e) {
            e.stopPropagation();
            if(_this.options.scrollY){
                var nowFinger = e.changedTouches[0].clientY,
                    distance = nowFinger - startFingerY;
                translateY = distance + startY;
                // 弹性
                if(translateY > 0 ){ //拖动系数. 拉力的感觉
                    translateY *= 0.4;
                }else if( translateY < -maxHeight){  //最后.
                    translateY = distance*0.4 + startY;
                }
            }
            if(_this.options.scrollX){
                var nowFinger = e.changedTouches[0].clientX,
                    distance = nowFinger - startFingerX;
                translateX = distance + startX;
                // 弹性
                if(translateX > 0 ){ //拖动系数. 拉力的感觉
                    translateX *= 0.4;
                }else if( translateX < -maxWidth){  //最后.
                    translateX = distance*0.4 + startX;
                }
            }
            _this.shift(translateX,translateY);
            e.preventDefault()
        })
        _this.target.addEventListener('touchend',function (e) {
             /*
                惯性原理:
                产生的速度 = 移动距离 / 移动时间
                距离 = 松开的坐标 - 上次的坐标  (距离差)
                时间 = 松开的时间 - 按下的时间  (时间差)
             */
            if(_this.options.scrollY){
                var nowFinger = e.changedTouches[0].clientY,
                    distance = nowFinger - startFingerY,  //距离差
                    timeDis = Date.now() - lastTime,  //时间差
                    speed = (distance / timeDis)*100;
                // console.log(speed);  //很小 *倍数
                // 惯性
                translateY += speed;
                // 边界 ,弹回去
                if(translateY > 0){
                    translateY = 0;
                }else if(translateY < -maxHeight){
                    translateY = -maxHeight;
                }
            }
            if(_this.options.scrollX){
                var nowFinger = e.changedTouches[0].clientX,
                    distance = nowFinger - startFingerX,  //距离差
                    timeDis = Date.now() - lastTime,  //时间差
                    speed = (distance / timeDis)*100;
                // console.log(speed);  //很小 *倍数
                // 惯性
                translateX += speed;
                // 边界 ,弹回去
                if(translateX > 0){
                    translateX = 0;
                }else if(translateX < -maxWidth){
                    translateX = -maxWidth;
                }
            }
            // 添加贝塞尔曲线
            _this.target.style.WebkitTransition = _this.target.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';
            _this.shift(translateX,translateY);
        })
    },
    shift(x,y){
        this.target.style.WebkitTransform = this.target.style.transform = 'translate('+x+'px,'+y+'px)';
    }
}