javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(ripple-effect): using requestIdleCallback

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-19 18:56:21 +02:00
parent 08c6c974d5
commit ea1c3d4100
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/src/components/ripple-effect/ripple-effect.tsx
View File

@@ -14,7 +14,7 @@ export class RippleEffect {
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
@Prop({ context: 'document' }) doc!: Document;
@Prop({ context: 'window' }) win!: Window;
@Prop() parent?: HTMLElement | string = 'parent';
@@ -56,6 +56,15 @@ export class RippleEffect {
*/
@Method()
addRipple(pageX: number, pageY: number) {
let rIC = (this.win as any).requestIdleCallback;
if (!rIC) {
rIC = window.requestAnimationFrame;
}
rIC(() => this.prepareRipple(pageX, pageY));
}
private prepareRipple(pageX: number, pageY: number) {
let x: number;
let y: number;
let size: number;
@@ -65,18 +74,17 @@ export class RippleEffect {
const width = rect.width;
const height = rect.height;
size = Math.min(Math.sqrt(width * width + height * height) * 2, MAX_RIPPLE_DIAMETER);
x = pageX - rect.left - (size / 2);
y = pageY - rect.top - (size / 2);
x = pageX - rect.left - (size * 0.5);
y = pageY - rect.top - (size * 0.5);
});
this.queue.write(() => {
const div = this.doc.createElement('div');
const div = this.win.document.createElement('div');
div.classList.add('ripple-effect');
const style = div.style;
const duration = Math.max(RIPPLE_FACTOR * Math.sqrt(size), MIN_RIPPLE_DURATION);
style.top = y + 'px';
style.left = x + 'px';
style.width = size + 'px';
style.height = size + 'px';
style.width = style.height = size + 'px';
style.animationDuration = duration + 'ms';
const container = this.el.shadowRoot || this.el;
@@ -84,10 +92,6 @@ export class RippleEffect {
setTimeout(() => div.remove(), duration + 50);
});
}
render() {
return null;
}
}
const RIPPLE_FACTOR = 35;