danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-12-12 09:09:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

[Perf] Adjust animation curves

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-07 13:28:59 +03:00
parent 676329abff
commit 81b1d9d432
5 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/left/LeftColumn.tsx
View File

@ -6,7 +6,7 @@ import { withGlobal } from '../../lib/teact/teactn';
import { GlobalActions } from '../../global/types';
import { LeftColumnContent, SettingsScreens } from '../../types';
import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
import { LAYERS_ANIMATION_NAME } from '../../util/environment';
import captureEscKeyListener from '../../util/captureEscKeyListener';
import { pick } from '../../util/iteratees';
@ -240,7 +240,7 @@ const LeftColumn: FC<StateProps & DispatchProps> = ({
return (
<Transition
id="LeftColumn"
name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
name={LAYERS_ANIMATION_NAME}
renderCount={RENDER_COUNT}
activeKey={contentType}
shouldCleanup

4
src/components/left/newChat/NewChat.tsx
View File

@ -4,7 +4,7 @@ import React, {
import { LeftColumnContent } from '../../../types';
import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
import { LAYERS_ANIMATION_NAME } from '../../../util/environment';
import Transition from '../../ui/Transition';
import NewChatStep1 from './NewChatStep1';
@ -36,7 +36,7 @@ const NewChat: FC<OwnProps> = ({
return (
<Transition
id="NewChat"
name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
name={LAYERS_ANIMATION_NAME}
renderCount={RENDER_COUNT}
activeKey={content}
>

4
src/components/left/settings/Settings.tsx
View File

@ -2,7 +2,7 @@ import React, { FC, memo, useCallback } from '../../../lib/teact/teact';
import { SettingsScreens } from '../../../types';
import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
import { LAYERS_ANIMATION_NAME } from '../../../util/environment';
import useFoldersReducer from '../../../hooks/reducers/useFoldersReducer';
import useTwoFaReducer from '../../../hooks/reducers/useTwoFaReducer';
@ -213,7 +213,7 @@ const Settings: FC<OwnProps> = ({
return (
<Transition
id="Settings"
name={IS_SINGLE_COLUMN_LAYOUT ? 'slide-layers' : 'push-slide'}
name={LAYERS_ANIMATION_NAME}
activeKey={currentScreen}
renderCount={TRANSITION_RENDER_COUNT}
>

14
src/styles/_variables.scss
View File

@ -140,6 +140,8 @@ $color-user-8: #faa774;
--color-default-shadow: #72727240;
--color-light-shadow: #7272722B;
--vh: 1vh;
--border-radius-default: 0.75rem;
--border-radius-default-small: 0.625rem;
--border-radius-default-tiny: 0.375rem;
@ -201,14 +203,16 @@ $color-user-8: #faa774;
--layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
--layer-blackout-opacity: 0.3;
--slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
--select-transition: 200ms ease-out;
// For some reason these parameters cause worse animation in desktop Chrome
@media (max-width: 600px) {
--layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
}
--vh: 1vh;
--slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
body.is-android {
--slide-transition: 200ms ease-in-out;
}
--select-transition: 200ms ease-out;
}

1
src/util/environment.ts
View File

@ -60,6 +60,7 @@ export const IS_OPUS_SUPPORTED = Boolean((new Audio()).canPlayType('audio/ogg; c
export const IS_CANVAS_FILTER_SUPPORTED = (
!IS_TEST && 'filter' in (document.createElement('canvas').getContext('2d') || {})
);
export const LAYERS_ANIMATION_NAME = IS_ANDROID ? 'slide-fade' : IS_IOS ? 'slide-layers' : 'push-slide';
export const DPR = window.devicePixelRatio || 1;