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

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

@ -63,7 +63,8 @@ export class PickerColumnCmp {
private elementRef: ElementRef,
private _sanitizer: DomSanitizer,
private _zone: NgZone,
private _haptic: Haptic) {
private _haptic: Haptic
) {
this.rotateFactor = config.getNumber('pickerRotateFactor', 0);
this.scaleFactor = config.getNumber('pickerScaleFactor', 1);
this.decelerateFunc = this.decelerate.bind(this);
@ -104,7 +105,6 @@ export class PickerColumnCmp {
// some "click" events to capture
ev.preventDefault();
this.debouncer.debounce(() => {
// cancel any previous raf's that haven't fired yet
if (this.rafId) {
cancelRaf(this.rafId);
@ -131,7 +131,6 @@ export class PickerColumnCmp {
this.minY = (minY * this.optHeight * -1);
this.maxY = (maxY * this.optHeight * -1);
});
return true;
}
@ -139,12 +138,13 @@ export class PickerColumnCmp {
ev.preventDefault();
ev.stopPropagation();
let currentY = pointerCoord(ev).y;
this.pos.push(currentY, Date.now());
this.debouncer.debounce(() => {
if (this.startY === null) {
return;
}
let currentY = pointerCoord(ev).y;
this.pos.push(currentY, Date.now());
// update the scroll position relative to pointer start position
let y = this.y + (currentY - this.startY);
@ -214,7 +214,8 @@ export class PickerColumnCmp {
var movedTop = (this.pos[startPos - 1] - this.pos[endPos - 1]);
// 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) {
@ -641,3 +642,4 @@ let pickerIds = -1;
const PICKER_OPT_SELECTED = 'picker-opt-selected';
const DECELERATION_FRICTION = 0.97;
const FRAME_MS = (1000 / 60);
const MAX_PICKER_SPEED = 50;