寫在前面
接著前面的移動(dòng)端效果的研究，這次來(lái)看看picker
選擇器的實(shí)現(xiàn)原理
移動(dòng)端效果之Swiper
1. 核心解析
1.1 基本HTML結(jié)構(gòu)
<!--
說明：
1. 類 picker-3d 是為了提供3d視角，如果不需要可以去掉
2. 類 picker-slot-absolute 在3d視角中需要加上，因?yàn)橄旅嫦鄬?duì)定位的 picker-items 是要相對(duì)父容器進(jìn)行
transform的，如果不加，就會(huì)造成位移不正確
3. DOM中所有的style樣式都是在初始化的時(shí)候加上的
-->
<div class="picker picker-3d">
<div class="picker-items">
<div class="picker-slot picker-slot-absolute" style="flex:1;">
<div class="picker-slot-wrapper" id="wrapper" style="height: 108px;">
<div class="picker-item picker-selected" style="height:36px;line-height: 36px">1981</div>
<!-- ... -->
<div class="picker-item" style="height:36px;line-height: 36px">1999</div>
</div>
</div>
</div>
<div class="picker-center-highlight" style="height:36px;margin-top:-18px;"></div>
</div>
1.2 初始化DOM
由于餓了么源碼中的picker是采用v-for指令生成的DOM，因此我這里只是簡(jiǎn)單的用javascript來(lái)模擬一下DOM的生成。
var el = document.querySelector('#wrapper');
var animationFrameId = null;
var currentValue;
var itemHeight = 36;
var visibleItemCount = 3;
var valueIndex = 0;
var rotateEffect = true;
var datas = ['1981', '1982', '1983', '...', '1999'];
// 如果支持3d視角，則給<div class="picker"></div>加上類"picker-3d"
// <div class="picker-slot" style="flex:1;">加上類"picker-slot-absolute"
if (rotateEffect) {
var picker = document.querySelector('.picker');
var pickerSlot = document.querySelector('.picker-slot');
picker.classList.add('picker-3d');
pickerSlot.classList.add('picker-slot-absolute');
}
// 限定容器高度
el.style.height = `${visibleItemCount * itemHeight}px`;
// 生成DOM
var html = '';
datas.forEach(function(data, index) {
html += `<div class="picker-item" style="height:36px;line-height:36px;">${data}</div>`;
});
el.innerHTML = html;
// 激活當(dāng)前item
var pickerItems = document.querySelectorAll('.picker-item');
pickerItems[valueIndex].classList.add('picker-selected');
1.3 初始化事件
總體上來(lái)說，picker的事件也包括滑動(dòng)開始、滑動(dòng)中、滑動(dòng)結(jié)束。因?yàn)楫吘故且苿?dòng)端，滑動(dòng)不可避免。這次，源碼中的對(duì)滑動(dòng)事件進(jìn)行了封裝，兼容了PC端以及排除了拖動(dòng)和選擇造成的影響，具體看一下分析。
* draggable.js
* 只是起到一定的兼容性
* 實(shí)質(zhì)和直接調(diào)用 el.addEventListener('touchstart', startFn); 并沒有多大差別
*/
// 滑動(dòng)開始
// touchstart 和 mousedown 可見對(duì)PC端的兼容
// onselectstart/ondragstart 直接return 可見排除了拖動(dòng)和選擇
element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
if (isDragging) return;
document.onselectstart = function() { return false; };
document.ondragstart = function() { return false; };
// ...
});
// 滑動(dòng)結(jié)束
var endFn = function(event) {
// 注銷事件
if (!supportTouch) {
document.removeEventListener('mousemove', moveFn);
document.removeEventListener('mouseup', endFn);
}
document.onselectstart = null;
document.ondragstart = null;
isDragging = false;
if (options.end) {
options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
}
}
要是DOM跟隨自己在手機(jī)屏幕上的滑動(dòng)而滑動(dòng)，方法大同小異，無(wú)非就是在開始滑動(dòng)記錄開始位置，滑動(dòng)中實(shí)時(shí)計(jì)算位移，滑動(dòng)結(jié)束之后將DOM滑動(dòng)應(yīng)該滑動(dòng)的位置。
// 滑動(dòng)開始的執(zhí)行事件方法
start: function(event) {
dragState = {
range: getDragRange(),
// ...
startTranslateTop: translateUtil.getElementTranslate(el).top
};
}
這其中有兩個(gè)方法，第一個(gè)getDragRange
和第二個(gè)getElementTranslate(el)
.
- 第一個(gè)函數(shù)的作用是獲取picker能夠滑動(dòng)的最小和最大的位移，這將會(huì)在滑動(dòng)結(jié)束事件中用到。關(guān)于如何計(jì)算，這里簡(jiǎn)單提一下，向下滑動(dòng)，最大不能超過最中間的item的最上方，這也就是為什么itemHeight * Math.floor(visibleItemCount / 2)，而向上滑動(dòng)，最大不能超過中間item的最下方，-itemHeight * (valuesLength - Math.ceil(visibleItemCount / 2))，細(xì)細(xì)想一下就好了。
- 第二個(gè)函數(shù)的作用是獲取當(dāng)前picker的transform值，作為下一次滑動(dòng)計(jì)算的依據(jù)。其實(shí)感覺這樣挺費(fèi)事，因?yàn)樵趖ouchend中最后肯定會(huì)計(jì)算translate值，我們只需要每次保存最后滑動(dòng)的移動(dòng)值就好了，而不要每次都要在DOM中取。
/**
* translateUtil
* 對(duì)瀏覽器對(duì)前綴支持的一些判斷
* 檢測(cè)瀏覽器對(duì)3d屬性的支持情況
* 獲取當(dāng)前的translate值/清空picker的translate值/移動(dòng)picker
* 對(duì)于瀏覽器的檢測(cè)方面，這也算是一個(gè)比較好的工具類
*/
var docStyle = document.documentElement.style;
var engine;
var translate3d = false;
// 瀏覽器判斷
if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
engine = 'presto';
} else if ('MozAppearance' in docStyle) {
engine = 'gecko';
} else if ('WebkitAppearance' in docStyle) {
engine = 'webkit';
} else if (typeof navigator.cpuClass === 'string') {
engine = 'trident';
}
// css前綴
var cssPrefix = {
trident: '-ms-', // IE
gecko: '-moz-', // FireFox
webkit: '-webkit-', // Chrome/Safari/etc...
presto: '-o-' // Opera
}[engine];
// style前綴
var vendorPrefix = {
trident: 'ms',
gecko: 'Moz',
webkit: 'Webkit',
presto: 'O'
}[engine];
var helpElem = document.createElement('div');
var perspectiveProperty = vendorPrefix + 'Perspective';
var transformProperty = vendorPrefix + 'Transform';
var transformStyleName = cssPrefix + 'transform';
var transitionProperty = vendorPrefix + 'Transition';
var transitionStyleName = cssPrefix + 'transition';
var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
if (helpElem.style[perspectiveProperty] !== undefined) {
translate3d = true;
}
// 講一下這個(gè)正則
// \s*(-?\d+(\.\d+?)?)px 這是一個(gè)單元，匹配這樣的 -23.15px, 剩下的應(yīng)該就好理解了
var regexp = /translate\(\s*(-?\d+(\.\d+?)?)px,\s*(-?\d+(\.\d+?)?)px\)\s*translateZ\(0px\)/ig;
接下來(lái)看看滑動(dòng)中
drag: function(event) {
// 加上 dragging 類是為了清除過渡效果，在swiper中也有同樣的應(yīng)用
el.classList.add('dragging');
dragState.left = event.pageX;
dragState.top = event.pageY;
var deltaY = dragState.top - dragState.startTop;
// 計(jì)算當(dāng)前的滑動(dòng)位移
var translate = dragState.startTranslateTop + deltaY;
// 滑動(dòng)元素
translateUtil.translateElement(el, null, translate);
velocityTranslate = translate - prevTranslate || translate;
prevTranslate = translate;
if (rotateEffect) {
updateRotate(prevTranslate, pickerItems);
}
}
看到以上的代碼中有一個(gè)velocityTranslate，這個(gè)值有神馬作用，最開始我也不清楚，后面發(fā)現(xiàn)在滑動(dòng)結(jié)束之后用到了，才明白了它代表了一個(gè)速率的位移值。什么是速率？就好比你快速滑動(dòng)的時(shí)候，總希望它能夠慣性滑動(dòng)一下，這個(gè)值乘以一個(gè)慣性值就可以得出一個(gè)慣性位移。看end中的代碼。
end: function() {
// 添加過渡
el.classList.remove('dragging');
// 慣性值
var momentumRatio = 7;
var currentTranslate = translateUtil.getElementTranslate(el).top;
var duration = new Date() - dragState.start;
var momentumTranslate;
if (duration < 300) {
momentumTranslate = currentTranslate + velocityTranslate * momentumRatio;
}
// 加上慣性速率之后的位移值
console.log('momentumTranslate', momentumTranslate);
dragRange = dragState.range;
setTimeout(function() {
var translate;
if (momentumTranslate) {
translate = Math.round(momentumTranslate / itemHeight) * itemHeight;
} else {
translate = Math.round(currentTranslate / itemHeight) * itemHeight;
}
// 取得最終的位移值，
// 必須為itemHeight的倍數(shù)
// 在范圍的最大值和最小值中取
translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);
translateUtil.translateElement(el, null, translate);
// 計(jì)算得出當(dāng)前位移下應(yīng)該對(duì)應(yīng)的實(shí)際值
currentValue = translate2Value(translate);
// 3d效果
if (rotateEffect) {
planUpdateRotate();
}
}, 10);
dragState = {};
}
這就是整個(gè)picker的實(shí)現(xiàn)流程，撇開3d效果就可以使用了。下面看一下如何實(shí)現(xiàn)的3D效果。在doOnValuesChange中有一個(gè)最開始的初始化。
[].forEach.call(items, function(item, index) {
translateUtil.translateElement(item, null, itemHeight * index);
});
給每一個(gè)item設(shè)置了根據(jù)索引來(lái)的位移值，此時(shí)的每一個(gè)item的定位都必須是absolute的，這樣位移下來(lái)才是緊挨著的，不然可能中間都會(huì)有一個(gè)itemHeight的空格。3D效果中最關(guān)鍵的一點(diǎn)就是如何進(jìn)行翻轉(zhuǎn)角度的計(jì)算。在源碼中定義了一個(gè)常量對(duì)象：
var VISIBEL_ITEMS_ANGLE_MAP = {
3: -45,
5: -20,
7: -15
};
可以看到，當(dāng)只有3個(gè)可見元素的時(shí)候，高亮部分相對(duì)于X軸平行，而上一個(gè)item就必須繞X軸順時(shí)針旋轉(zhuǎn)45度，反之下一個(gè)item繞X軸逆時(shí)針旋轉(zhuǎn)45度。另外在其中有一段代碼特別繞，根據(jù)我的理解是這樣的：
// 當(dāng)前item相對(duì)于頂部原本應(yīng)該有的位移值
var itemOffsetTop = index * itemHeight;
// 滑動(dòng)過程中，相對(duì)于最開始的位置滑動(dòng)的位移值
var translateOffset = dragRange[1] - currentTranslate;
// 當(dāng)應(yīng)該有的位移值和滑動(dòng)的位移值相等的時(shí)候，也就說明了當(dāng)前的`item`被選中
// 也就是說此時(shí)當(dāng)前的角度為0
var itemOffset = itemOffsetTop - translateOffset;
var percentage = itemOffset / itemHeight;
var angle = angleUnit * percentage;
if (angle > 180) angle = 180;
if (angle < -180) angle = -180;
rotateElement(item, angle);
如果覺得太繞，其實(shí)也沒有必要按照他的這種做法來(lái)，我們只要想辦法確定每一個(gè)item相對(duì)于當(dāng)前選中的item是處于上一個(gè)還是下一個(gè)，就可以根據(jù)此來(lái)計(jì)算角度。
2. 總結(jié)
關(guān)于餓了么中的picker組件就看了這么多，整體來(lái)說跟swiper中的滑動(dòng)十分相似，其中的關(guān)鍵點(diǎn)在于最后的計(jì)算位移值來(lái)根據(jù)位移值滑動(dòng)到正確的位置，至于怎么計(jì)算值，其實(shí)每個(gè)人的實(shí)現(xiàn)方式可能都是大同小異的，也沒要必要一定要按照源碼來(lái)，可以適當(dāng)加入自己的理解，這樣或許寫起代碼來(lái)更加得心應(yīng)手。這里只是個(gè)人的一點(diǎn)理解，希望能夠給自己也給大家提供一點(diǎn)幫助。
學(xué)習(xí)前端的同學(xué)注意了！！！
學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話，歡迎加入前端學(xué)習(xí)交流群461593224，我們一起學(xué)前端！
