UNPKG

2.86 kBPlain TextView Raw
1'use strict';
2
3import type { AnimatedScreenTransition } from './commonTypes';
4
5const SwipeRight: AnimatedScreenTransition = {
6 topScreenStyle: (event) => {
7 'worklet';
8 return {
9 transform: [{ translateX: event.translationX }],
10 };
11 },
12 belowTopScreenStyle: (event, screenSize) => {
13 'worklet';
14 return {
15 transform: [
16 { translateX: (event.translationX - screenSize.width) * 0.3 },
17 ],
18 };
19 },
20};
21
22const SwipeLeft: AnimatedScreenTransition = {
23 topScreenStyle: (event) => {
24 'worklet';
25 return {
26 transform: [{ translateX: event.translationX }],
27 };
28 },
29 belowTopScreenStyle: (event, screenSize) => {
30 'worklet';
31 return {
32 transform: [
33 { translateX: (event.translationX + screenSize.width) * 0.3 },
34 ],
35 };
36 },
37};
38
39const SwipeDown: AnimatedScreenTransition = {
40 topScreenStyle: (event) => {
41 'worklet';
42 return {
43 transform: [{ translateY: event.translationY }],
44 };
45 },
46 belowTopScreenStyle: (event, screenSize) => {
47 'worklet';
48 return {
49 transform: [
50 { translateY: (event.translationY - screenSize.height) * 0.3 },
51 ],
52 };
53 },
54};
55
56const SwipeUp: AnimatedScreenTransition = {
57 topScreenStyle: (event) => {
58 'worklet';
59 return {
60 transform: [{ translateY: event.translationY }],
61 };
62 },
63 belowTopScreenStyle: (event, screenSize) => {
64 'worklet';
65 return {
66 transform: [
67 { translateY: (event.translationY + screenSize.height) * 0.3 },
68 ],
69 };
70 },
71};
72
73const TwoDimensional: AnimatedScreenTransition = {
74 topScreenStyle: (event, _screenSize) => {
75 'worklet';
76 return {
77 transform: [
78 { translateX: event.translationX },
79 { translateY: event.translationY },
80 ],
81 };
82 },
83 belowTopScreenStyle: (_event, _screenSize) => {
84 'worklet';
85 return {};
86 },
87};
88
89const Horizontal: AnimatedScreenTransition = {
90 topScreenStyle: (event, _screenSize) => {
91 'worklet';
92 return {
93 transform: [{ translateX: event.translationX }],
94 };
95 },
96 belowTopScreenStyle: (_event, _screenSize) => {
97 'worklet';
98 return {};
99 },
100};
101
102const Vertical: AnimatedScreenTransition = {
103 topScreenStyle: (event, _screenSize) => {
104 'worklet';
105 return {
106 transform: [{ translateY: event.translationY }],
107 };
108 },
109 belowTopScreenStyle: (_event, _screenSize) => {
110 'worklet';
111 return {};
112 },
113};
114
115const SwipeRightFade: AnimatedScreenTransition = {
116 topScreenStyle: (event, screenSize) => {
117 'worklet';
118 return {
119 opacity: 1 - Math.abs(event.translationX / screenSize.width),
120 };
121 },
122 belowTopScreenStyle: (_event, _screenSize) => {
123 'worklet';
124 return {};
125 },
126};
127
128export const ScreenTransition = {
129 SwipeRight,
130 SwipeLeft,
131 SwipeDown,
132 SwipeUp,
133 Horizontal,
134 Vertical,
135 TwoDimensional,
136 SwipeRightFade,
137};