UNPKG

3.5 kBTypeScriptView Raw
1import { Easing } from 'react-native';
2
3import type { TransitionSpec } from '../types';
4
5/**
6 * Exact values from UINavigationController's animation configuration.
7 */
8export 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 */
24export 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 */
36export 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 */
48export 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 */
62export 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 */
76export 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 */
89export 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};