1 | import { Easing } from 'react-native';
|
2 |
|
3 | import type { TransitionSpec } from '../types';
|
4 |
|
5 | /**
|
6 | * Exact values from UINavigationController's animation configuration.
|
7 | */
|
8 | export const TransitionIOSSpec: TransitionSpec = {
|
9 | animation: 'spring',
|
10 | config: {
|
11 | stiffness: 1000,
|
12 | damping: 500,
|
13 | mass: 3,
|
14 | overshootClamping: true,
|
15 | restDisplacementThreshold: 10,
|
16 | restSpeedThreshold: 10,
|
17 | },
|
18 | };
|
19 |
|
20 | /**
|
21 | * Configuration for activity open animation from Android Nougat.
|
22 | * See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
|
23 | */
|
24 | export const FadeInFromBottomAndroidSpec: TransitionSpec = {
|
25 | animation: 'timing',
|
26 | config: {
|
27 | duration: 350,
|
28 | easing: Easing.out(Easing.poly(5)),
|
29 | },
|
30 | };
|
31 |
|
32 | /**
|
33 | * Configuration for activity close animation from Android Nougat.
|
34 | * See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
|
35 | */
|
36 | export const FadeOutToBottomAndroidSpec: TransitionSpec = {
|
37 | animation: 'timing',
|
38 | config: {
|
39 | duration: 150,
|
40 | easing: Easing.in(Easing.linear),
|
41 | },
|
42 | };
|
43 |
|
44 | /**
|
45 | * Approximate configuration for activity open animation from Android Pie.
|
46 | * See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
|
47 | */
|
48 | export const RevealFromBottomAndroidSpec: TransitionSpec = {
|
49 | animation: 'timing',
|
50 | config: {
|
51 | duration: 425,
|
52 | // This is super rough approximation of the path used for the curve by android
|
53 | // See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
|
54 | easing: Easing.bezier(0.35, 0.45, 0, 1),
|
55 | },
|
56 | };
|
57 |
|
58 | /**
|
59 | * Approximate configuration for activity open animation from Android Q.
|
60 | * See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
|
61 | */
|
62 | export const ScaleFromCenterAndroidSpec: TransitionSpec = {
|
63 | animation: 'timing',
|
64 | config: {
|
65 | duration: 400,
|
66 | // This is super rough approximation of the path used for the curve by android
|
67 | // See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
|
68 | easing: Easing.bezier(0.35, 0.45, 0, 1),
|
69 | },
|
70 | };
|
71 |
|
72 | /**
|
73 | * Configuration for bottom sheet slide in animation from Material Design.
|
74 | * See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
|
75 | */
|
76 | export const BottomSheetSlideInSpec: TransitionSpec = {
|
77 | animation: 'timing',
|
78 | config: {
|
79 | duration: 250,
|
80 | // See https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/animation/AccelerateDecelerateInterpolator.java
|
81 | easing: (t) => Math.cos((t + 1) * Math.PI) / 2.0 + 0.5,
|
82 | },
|
83 | };
|
84 |
|
85 | /**
|
86 | * Configuration for bottom sheet slide out animation from Material Design.
|
87 | * See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
|
88 | */
|
89 | export const BottomSheetSlideOutSpec: TransitionSpec = {
|
90 | animation: 'timing',
|
91 | config: {
|
92 | duration: 200,
|
93 | // See https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/animation/AccelerateInterpolator.java
|
94 | easing: (t) => (t === 1.0 ? 1 : Math.pow(t, 2)),
|
95 | },
|
96 | };
|