javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(picker): improves picker UX feedback

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-11-17 09:53:39 +01:00
parent 9469b4ff9a
commit cfbc5eabca
2 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/animations/animation.ts
View File

@ -914,6 +914,7 @@ export class Animation {
_willChg(addWillChange: boolean) { _willChg(addWillChange: boolean) {
let wc: string[]; let wc: string[];
let effects = this._fx; let effects = this._fx;
let willChange: string;
if (addWillChange && effects) { if (addWillChange && effects) {
wc = []; wc = [];
for (var i = 0; i < effects.length; i++) { for (var i = 0; i < effects.length; i++) {
@ -925,8 +926,10 @@ export class Animation {
wc.push(propWC); wc.push(propWC);
} }
} }
willChange = wc.join(',');
} else {
willChange = '';
} }
let willChange = (wc && wc.length) ? wc.join(',') : '';
for (var i = 0; i < this._eL; i++) { for (var i = 0; i < this._eL; i++) {
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
(<any>this._e[i]).style.willChange = willChange; (<any>this._e[i]).style.willChange = willChange;

62
src/components/picker/picker-component.ts
View File

@ -63,7 +63,8 @@ export class PickerColumnCmp {
private elementRef: ElementRef, private elementRef: ElementRef,
private _sanitizer: DomSanitizer, private _sanitizer: DomSanitizer,
private _zone: NgZone, private _zone: NgZone,
private _haptic: Haptic) { private _haptic: Haptic
) {
this.rotateFactor = config.getNumber('pickerRotateFactor', 0); this.rotateFactor = config.getNumber('pickerRotateFactor', 0);
this.scaleFactor = config.getNumber('pickerScaleFactor', 1); this.scaleFactor = config.getNumber('pickerScaleFactor', 1);
this.decelerateFunc = this.decelerate.bind(this); this.decelerateFunc = this.decelerate.bind(this);
@ -104,34 +105,32 @@ export class PickerColumnCmp {
// some "click" events to capture // some "click" events to capture
ev.preventDefault(); ev.preventDefault();
this.debouncer.debounce(() => { // cancel any previous raf's that haven't fired yet
// cancel any previous raf's that haven't fired yet if (this.rafId) {
if (this.rafId) { cancelRaf(this.rafId);
cancelRaf(this.rafId); this.rafId = null;
this.rafId = null; }
// remember where the pointer started from`
this.startY = pointerCoord(ev).y;
// reset everything
this.velocity = 0;
this.pos.length = 0;
this.pos.push(this.startY, Date.now());
let options = this.col.options;
let minY = (options.length - 1);
let maxY = 0;
for (var i = 0; i < options.length; i++) {
if (!options[i].disabled) {
minY = Math.min(minY, i);
maxY = Math.max(maxY, i);
} }
}
// remember where the pointer started from` this.minY = (minY * this.optHeight * -1);
this.startY = pointerCoord(ev).y; this.maxY = (maxY * this.optHeight * -1);
// reset everything
this.velocity = 0;
this.pos.length = 0;
this.pos.push(this.startY, Date.now());
let options = this.col.options;
let minY = (options.length - 1);
let maxY = 0;
for (var i = 0; i < options.length; i++) {
if (!options[i].disabled) {
minY = Math.min(minY, i);
maxY = Math.max(maxY, i);
}
}
this.minY = (minY * this.optHeight * -1);
this.maxY = (maxY * this.optHeight * -1);
});
return true; return true;
} }
@ -139,12 +138,13 @@ export class PickerColumnCmp {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
let currentY = pointerCoord(ev).y;
this.pos.push(currentY, Date.now());
this.debouncer.debounce(() => { this.debouncer.debounce(() => {
if (this.startY === null) { if (this.startY === null) {
return; return;
} }
let currentY = pointerCoord(ev).y;
this.pos.push(currentY, Date.now());
// update the scroll position relative to pointer start position // update the scroll position relative to pointer start position
let y = this.y + (currentY - this.startY); let y = this.y + (currentY - this.startY);
@ -214,7 +214,8 @@ export class PickerColumnCmp {
var movedTop = (this.pos[startPos - 1] - this.pos[endPos - 1]); var movedTop = (this.pos[startPos - 1] - this.pos[endPos - 1]);
// based on XXms compute the movement to apply for each render step // based on XXms compute the movement to apply for each render step
this.velocity = ((movedTop / timeOffset) * FRAME_MS); var velocity = ((movedTop / timeOffset) * FRAME_MS);
this.velocity = clamp(-MAX_PICKER_SPEED, velocity, MAX_PICKER_SPEED);
} }
if (Math.abs(endY - this.startY) > 3) { if (Math.abs(endY - this.startY) > 3) {
@ -641,3 +642,4 @@ let pickerIds = -1;
const PICKER_OPT_SELECTED = 'picker-opt-selected'; const PICKER_OPT_SELECTED = 'picker-opt-selected';
const DECELERATION_FRICTION = 0.97; const DECELERATION_FRICTION = 0.97;
const FRAME_MS = (1000 / 60); const FRAME_MS = (1000 / 60);
const MAX_PICKER_SPEED = 50;