ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Perf] Message List: Faster focus animations

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-13 17:31:26 +03:00
parent c3d6285795
commit c4e3a41ff1
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/message/hooks/useFocusMessage.ts
View File

@ -3,7 +3,7 @@ import fastSmoothScroll from '../../../../util/fastSmoothScroll';
import { FocusDirection } from '../../../../types'; import { FocusDirection } from '../../../../types';
// This is the max scroll offset within existing viewport. // This is the max scroll offset within existing viewport.
const FOCUS_MAX_OFFSET = 1500; const FOCUS_MAX_OFFSET = 1200;
// This is used when the viewport was replaced. // This is used when the viewport was replaced.
const RELOCATED_FOCUS_OFFSET = 1000; const RELOCATED_FOCUS_OFFSET = 1000;
const FOCUS_MARGIN = 20; const FOCUS_MARGIN = 20;

5
src/modules/actions/ui/messages.ts
View File

@ -26,7 +26,8 @@ import {
import { findLast } from '../../../util/iteratees'; import { findLast } from '../../../util/iteratees';
import { IS_TOUCH_ENV } from '../../../util/environment'; import { IS_TOUCH_ENV } from '../../../util/environment';
const FOCUS_DURATION = 2000; const FOCUS_DURATION = 1500;
const FOCUS_NO_HIGHLIGHT_DURATION = 500; // Matches `fastSmoothScroll:MAX_JS_DURATION`
const POLL_RESULT_OPEN_DELAY_MS = 450; const POLL_RESULT_OPEN_DELAY_MS = 450;
let blurTimeout: number | undefined; let blurTimeout: number | undefined;
@ -269,7 +270,7 @@ addReducer('focusMessage', (global, actions, payload) => {
newGlobal = updateFocusedMessage(newGlobal); newGlobal = updateFocusedMessage(newGlobal);
newGlobal = updateFocusDirection(newGlobal); newGlobal = updateFocusDirection(newGlobal);
setGlobal(newGlobal); setGlobal(newGlobal);
}, FOCUS_DURATION); }, noHighlight ? FOCUS_NO_HIGHLIGHT_DURATION : FOCUS_DURATION);
global = updateFocusedMessage(global, chatId, messageId, noHighlight); global = updateFocusedMessage(global, chatId, messageId, noHighlight);
global = updateFocusDirection(global, undefined); global = updateFocusDirection(global, undefined);

15
src/util/fastSmoothScroll.ts
View File

@ -7,9 +7,10 @@ import { dispatchHeavyAnimationEvent } from '../hooks/useHeavyAnimationCheck';
import { fastRaf } from './schedulers'; import { fastRaf } from './schedulers';
import { animateSingle } from './animation'; import { animateSingle } from './animation';
const MAX_DISTANCE = 1500; const MAX_DISTANCE = 1200;
const MIN_JS_DURATION = 250; const MIN_JS_DURATION = 250;
const MAX_JS_DURATION = 600; const MAX_JS_DURATION = 500;
const SHORT_CURVE_THRESHOLD = 150; // px
let isAnimating = false; let isAnimating = false;
@ -115,8 +116,10 @@ function scrollWithJs(
return; return;
} }
const absPath = Math.abs(path);
const transition = absPath < SHORT_CURVE_THRESHOLD ? shortTransition : longTransition;
const duration = forceDuration || ( const duration = forceDuration || (
MIN_JS_DURATION + (Math.abs(path) / MAX_DISTANCE) * (MAX_JS_DURATION - MIN_JS_DURATION) MIN_JS_DURATION + (absPath / MAX_DISTANCE) * (MAX_JS_DURATION - MIN_JS_DURATION)
); );
const startAt = Date.now(); const startAt = Date.now();
@ -133,6 +136,10 @@ function scrollWithJs(
}); });
} }
function transition(t: number) { function longTransition(t: number) {
return t === 1 ? 1 : 1 - 2 ** (-10 * t);
}
function shortTransition(t: number) {
return 1 - ((1 - t) ** 3.5); return 1 - ((1 - t) ** 3.5);
} }