@momo-kits/carousel 0.0.65-alpha.12 → 0.0.65-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/utils/animationsV2.js +279 -297
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/carousel",
3
- "version": "0.0.65-alpha.12",
3
+ "version": "0.0.65-alpha.13",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
package/utils/animationsV2.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Platform, Animated } from 'react-native';
1
+ import {Platform, Animated} from 'react-native';
2
2
 
3
3
  const IS_ANDROID = Platform.OS === 'android';
4
4
 
@@ -13,106 +13,104 @@ const IS_ANDROID = Platform.OS === 'android';
13
13
  // (index + 1) * sizeRef // active - 1
14
14
  // ]
15
15
  export function getInputRangeFromIndexes(range, index, carouselProps) {
16
- const sizeRef = carouselProps.vertical
17
- ? carouselProps.itemHeight
18
- : carouselProps.itemWidth;
19
- const inputRange = [];
16
+ const sizeRef = carouselProps.vertical
17
+ ? carouselProps.itemHeight
18
+ : carouselProps.itemWidth;
19
+ const inputRange = [];
20
20
 
21
- for (let i = 0; i < range.length; i++) {
22
- inputRange.push((index - range[i]) * sizeRef);
23
- }
21
+ for (let i = 0; i < range.length; i++) {
22
+ inputRange.push((index - range[i]) * sizeRef);
23
+ }
24
24
 
25
- return inputRange;
25
+ return inputRange;
26
26
  }
27
27
 
28
28
  // Default behavior
29
29
  // Scale and/or opacity effect
30
30
  // Based on props 'inactiveSlideOpacity' and 'inactiveSlideScale'
31
31
  export function defaultScrollInterpolator(index, carouselProps) {
32
- const range = [1, 0, -1];
33
- const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
34
- const outputRange = [0, 1, 0];
35
-
36
- return {
37
- inputRange,
38
- outputRange,
39
- };
32
+ const range = [1, 0, -1];
33
+ const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
34
+ const outputRange = [0, 1, 0];
35
+
36
+ return {
37
+ inputRange,
38
+ outputRange,
39
+ };
40
40
  }
41
41
 
42
42
  export function defaultAnimatedStyles(_index, animatedValue, carouselProps) {
43
- let animatedOpacity = {};
44
- let animatedScale = {};
45
-
46
- if (carouselProps.inactiveSlideOpacity < 1) {
47
- animatedOpacity = {
48
- opacity: animatedValue.interpolate({
49
- inputRange: [0, 1],
50
- outputRange: [carouselProps.inactiveSlideOpacity, 1],
51
- }),
52
- };
53
- }
54
-
55
- if (carouselProps.inactiveSlideScale < 1) {
56
- animatedScale = {
57
- transform: [
58
- {
59
- scale: animatedValue.interpolate({
60
- inputRange: [0, 1],
61
- outputRange: [carouselProps.inactiveSlideScale, 1],
62
- }),
63
- },
64
- ],
65
- };
66
- }
67
-
68
- return {
69
- ...animatedOpacity,
70
- ...animatedScale,
43
+ let animatedOpacity = {};
44
+ let animatedScale = {};
45
+
46
+ if (carouselProps.inactiveSlideOpacity < 1) {
47
+ animatedOpacity = {
48
+ opacity: animatedValue.interpolate({
49
+ inputRange: [0, 1],
50
+ outputRange: [carouselProps.inactiveSlideOpacity, 1],
51
+ }),
52
+ };
53
+ }
54
+
55
+ if (carouselProps.inactiveSlideScale < 1) {
56
+ animatedScale = {
57
+ transform: [
58
+ {
59
+ scale: animatedValue.interpolate({
60
+ inputRange: [0, 1],
61
+ outputRange: [carouselProps.inactiveSlideScale, 1],
62
+ }),
63
+ },
64
+ ],
71
65
  };
66
+ }
67
+
68
+ return {
69
+ ...animatedOpacity,
70
+ ...animatedScale,
71
+ };
72
72
  }
73
73
 
74
74
  // Shift animation
75
75
  // Same as the default one, but the active slide is also shifted up or down
76
76
  // Based on prop 'inactiveSlideShift'
77
77
  export function shiftAnimatedStyles(_index, animatedValue, carouselProps) {
78
- let animatedOpacity = {};
79
- let animatedScale = {};
80
- let animatedTranslate = {};
81
-
82
- if (carouselProps.inactiveSlideOpacity < 1) {
83
- animatedOpacity = {
84
- opacity: animatedValue.interpolate({
85
- inputRange: [0, 1],
86
- outputRange: [carouselProps.inactiveSlideOpacity, 1],
87
- }),
88
- };
89
- }
90
-
91
- if (carouselProps.inactiveSlideScale < 1) {
92
- animatedScale = {
93
- scale: animatedValue.interpolate({
94
- inputRange: [0, 1],
95
- outputRange: [carouselProps.inactiveSlideScale, 1],
96
- }),
97
- };
98
- }
99
-
100
- if (carouselProps.inactiveSlideShift !== 0) {
101
- const translateProp = carouselProps.vertical
102
- ? 'translateX'
103
- : 'translateY';
104
- animatedTranslate = {
105
- [translateProp]: animatedValue.interpolate({
106
- inputRange: [0, 1],
107
- outputRange: [carouselProps.inactiveSlideShift, 0],
108
- }),
109
- };
110
- }
111
-
112
- return {
113
- ...animatedOpacity,
114
- transform: [{ ...animatedScale }, { ...animatedTranslate }],
78
+ let animatedOpacity = {};
79
+ let animatedScale = {};
80
+ let animatedTranslate = {};
81
+
82
+ if (carouselProps.inactiveSlideOpacity < 1) {
83
+ animatedOpacity = {
84
+ opacity: animatedValue.interpolate({
85
+ inputRange: [0, 1],
86
+ outputRange: [carouselProps.inactiveSlideOpacity, 1],
87
+ }),
115
88
  };
89
+ }
90
+
91
+ if (carouselProps.inactiveSlideScale < 1) {
92
+ animatedScale = {
93
+ scale: animatedValue.interpolate({
94
+ inputRange: [0, 1],
95
+ outputRange: [carouselProps.inactiveSlideScale, 1],
96
+ }),
97
+ };
98
+ }
99
+
100
+ if (carouselProps.inactiveSlideShift !== 0) {
101
+ const translateProp = carouselProps.vertical ? 'translateX' : 'translateY';
102
+ animatedTranslate = {
103
+ [translateProp]: animatedValue.interpolate({
104
+ inputRange: [0, 1],
105
+ outputRange: [carouselProps.inactiveSlideShift, 0],
106
+ }),
107
+ };
108
+ }
109
+
110
+ return {
111
+ ...animatedOpacity,
112
+ transform: [{...animatedScale}, {...animatedTranslate}],
113
+ };
116
114
  }
117
115
 
118
116
  // Stack animation
@@ -121,78 +119,74 @@ export function shiftAnimatedStyles(_index, animatedValue, carouselProps) {
121
119
  // This means that the item with the higher zIndex (and therefore the tap receiver) remains the one AFTER the currently active item
122
120
  // The `elevation` property compensates for that only visually, which is not good enough
123
121
  export function stackScrollInterpolator(index, carouselProps) {
124
- const range = [3, 2, 1, 0, -1];
125
- const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
126
- const outputRange = range;
127
-
128
- return {
129
- inputRange,
130
- outputRange,
131
- };
122
+ const range = [3, 2, 1, 0, -1];
123
+ const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
124
+ const outputRange = range;
125
+
126
+ return {
127
+ inputRange,
128
+ outputRange,
129
+ };
132
130
  }
133
131
 
134
132
  export function stackAnimatedStyles(
135
- index,
136
- animatedValue,
137
- carouselProps,
138
- cardOffset,
133
+ index,
134
+ animatedValue,
135
+ carouselProps,
136
+ cardOffset,
139
137
  ) {
140
- const sizeRef = carouselProps.vertical
141
- ? carouselProps.itemHeight
142
- : carouselProps.itemWidth;
143
- const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
144
-
145
- const card1Scale = 0.9;
146
- const card2Scale = 0.8;
147
-
148
- const newCardOffset = cardOffset ?? 18;
149
-
150
- const getTranslateFromScale = (cardIndex, scale) => {
151
- const centerFactor = (1 / scale) * cardIndex;
152
- const centeredPosition = -Math.round(sizeRef * centerFactor);
153
- const edgeAlignment = Math.round((sizeRef - sizeRef * scale) / 2);
154
- const offset = Math.round(
155
- (newCardOffset * Math.abs(cardIndex)) / scale,
156
- );
157
-
158
- return centeredPosition + edgeAlignment + offset;
159
- };
160
-
161
- const opacityOutputRange =
162
- carouselProps.inactiveSlideOpacity === 1
163
- ? [1, 1, 1, 0]
164
- : [1, 0.75, 0.5, 0];
165
-
166
- return {
167
- zIndex: carouselProps.data.length - index,
168
- opacity: animatedValue.interpolate({
169
- inputRange: [0, 1, 2, 3],
170
- outputRange: opacityOutputRange,
171
- extrapolate: 'clamp',
138
+ const sizeRef = carouselProps.vertical
139
+ ? carouselProps.itemHeight
140
+ : carouselProps.itemWidth;
141
+ const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
142
+
143
+ const card1Scale = 0.9;
144
+ const card2Scale = 0.8;
145
+
146
+ const newCardOffset = cardOffset ?? 18;
147
+
148
+ const getTranslateFromScale = (cardIndex, scale) => {
149
+ const centerFactor = (1 / scale) * cardIndex;
150
+ const centeredPosition = -Math.round(sizeRef * centerFactor);
151
+ const edgeAlignment = Math.round((sizeRef - sizeRef * scale) / 2);
152
+ const offset = Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
153
+
154
+ return centeredPosition + edgeAlignment + offset;
155
+ };
156
+
157
+ const opacityOutputRange =
158
+ carouselProps.inactiveSlideOpacity === 1 ? [1, 1, 1, 0] : [1, 0.75, 0.5, 0];
159
+
160
+ return {
161
+ zIndex: carouselProps.data.length - index,
162
+ opacity: animatedValue.interpolate({
163
+ inputRange: [0, 1, 2, 3],
164
+ outputRange: opacityOutputRange,
165
+ extrapolate: 'clamp',
166
+ }),
167
+ transform: [
168
+ {
169
+ scale: animatedValue.interpolate({
170
+ inputRange: [-1, 0, 1, 2],
171
+ outputRange: [card1Scale, 1, card1Scale, card2Scale],
172
+ extrapolate: 'clamp',
172
173
  }),
173
- transform: [
174
- {
175
- scale: animatedValue.interpolate({
176
- inputRange: [-1, 0, 1, 2],
177
- outputRange: [card1Scale, 1, card1Scale, card2Scale],
178
- extrapolate: 'clamp',
179
- }),
180
- },
181
- {
182
- [translateProp]: animatedValue.interpolate({
183
- inputRange: [-1, 0, 1, 2, 3],
184
- outputRange: [
185
- -sizeRef * 0.5,
186
- 0,
187
- getTranslateFromScale(1, card1Scale),
188
- getTranslateFromScale(2, card2Scale),
189
- getTranslateFromScale(3, card2Scale),
190
- ],
191
- extrapolate: 'clamp',
192
- }),
193
- },
194
- ],
195
- };
174
+ },
175
+ {
176
+ [translateProp]: animatedValue.interpolate({
177
+ inputRange: [-1, 0, 1, 2, 3],
178
+ outputRange: [
179
+ -sizeRef * 0.5,
180
+ 0,
181
+ getTranslateFromScale(1, card1Scale),
182
+ getTranslateFromScale(2, card2Scale),
183
+ getTranslateFromScale(3, card2Scale),
184
+ ],
185
+ extrapolate: 'clamp',
186
+ }),
187
+ },
188
+ ],
189
+ };
196
190
  }
197
191
 
198
192
  // Tinder animation
@@ -201,158 +195,146 @@ export function stackAnimatedStyles(
201
195
  // This means that the item with the higher zIndex (and therefore the tap receiver) remains the one AFTER the currently active item
202
196
  // The `elevation` property compensates for that only visually, which is not good enough
203
197
  export function tinderScrollInterpolator(index, carouselProps) {
204
- const range = IS_ANDROID ? [1, 0, -1, -2, -3] : [3, 2, 1, 0, -1];
205
- const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
206
- const outputRange = range;
207
-
208
- return {
209
- inputRange,
210
- outputRange,
211
- };
198
+ const range = IS_ANDROID ? [1, 0, -1, -2, -3] : [3, 2, 1, 0, -1];
199
+ const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
200
+ const outputRange = range;
201
+
202
+ return {
203
+ inputRange,
204
+ outputRange,
205
+ };
212
206
  }
213
207
 
214
208
  export function tinderAnimatedStyles(
215
- index,
216
- animatedValue,
217
- carouselProps,
218
- cardOffset,
209
+ index,
210
+ animatedValue,
211
+ carouselProps,
212
+ cardOffset,
219
213
  ) {
220
- const sizeRef = carouselProps.vertical
221
- ? carouselProps.itemHeight
222
- : carouselProps.itemWidth;
223
- const mainTranslateProp = carouselProps.vertical
224
- ? 'translateY'
225
- : 'translateX';
226
- const secondaryTranslateProp = carouselProps.vertical
227
- ? 'translateX'
228
- : 'translateY';
229
-
230
- const card1Scale = 0.96;
231
- const card2Scale = 0.92;
232
- const card3Scale = 0.88;
233
-
234
- const peekingCardsOpacity = IS_ANDROID ? 0.92 : 1;
235
-
236
- const newCardOffset = cardOffset ?? 9;
237
-
238
- const getMainTranslateFromScale = (cardIndex, scale) => {
239
- const centerFactor = (1 / scale) * cardIndex;
240
- return -Math.round(sizeRef * centerFactor);
241
- };
242
-
243
- const getSecondaryTranslateFromScale = (cardIndex, scale) => {
244
- return Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
245
- };
246
-
247
- return IS_ANDROID
248
- ? {
249
- // elevation.data.length - index, // fix zIndex bug visually, but not from a logic point of view
250
- opacity: animatedValue.interpolate({
251
- inputRange: [-3, -2, -1, 0, 1],
252
- outputRange: [
253
- 0,
254
- peekingCardsOpacity,
255
- peekingCardsOpacity,
256
- 1,
257
- 0,
258
- ],
259
- extrapolate: 'clamp',
260
- }),
261
- transform: [
262
- {
263
- scale: animatedValue.interpolate({
264
- inputRange: [-3, -2, -1, 0],
265
- outputRange: [card3Scale, card2Scale, card1Scale, 1],
266
- extrapolate: 'clamp',
267
- }),
268
- },
269
- {
270
- rotate: animatedValue.interpolate({
271
- inputRange: [0, 1],
272
- outputRange: ['0deg', '22deg'],
273
- extrapolate: 'clamp',
274
- }),
275
- },
276
- {
277
- [mainTranslateProp]: animatedValue.interpolate({
278
- inputRange: [-3, -2, -1, 0, 1],
279
- outputRange: [
280
- getMainTranslateFromScale(-3, card3Scale),
281
- getMainTranslateFromScale(-2, card2Scale),
282
- getMainTranslateFromScale(-1, card1Scale),
283
- 0,
284
- sizeRef * 1.1,
285
- ],
286
- extrapolate: 'clamp',
287
- }),
288
- },
289
- {
290
- [secondaryTranslateProp]: animatedValue.interpolate({
291
- inputRange: [-3, -2, -1, 0],
292
- outputRange: [
293
- getSecondaryTranslateFromScale(-3, card3Scale),
294
- getSecondaryTranslateFromScale(-2, card2Scale),
295
- getSecondaryTranslateFromScale(-1, card1Scale),
296
- 0,
297
- ],
298
- extrapolate: 'clamp',
299
- }),
300
- },
214
+ const sizeRef = carouselProps.vertical
215
+ ? carouselProps.itemHeight
216
+ : carouselProps.itemWidth;
217
+ const mainTranslateProp = carouselProps.vertical
218
+ ? 'translateY'
219
+ : 'translateX';
220
+ const secondaryTranslateProp = carouselProps.vertical
221
+ ? 'translateX'
222
+ : 'translateY';
223
+
224
+ const card1Scale = 0.96;
225
+ const card2Scale = 0.92;
226
+ const card3Scale = 0.88;
227
+
228
+ const peekingCardsOpacity = IS_ANDROID ? 0.92 : 1;
229
+
230
+ const newCardOffset = cardOffset ?? 9;
231
+
232
+ const getMainTranslateFromScale = (cardIndex, scale) => {
233
+ const centerFactor = (1 / scale) * cardIndex;
234
+ return -Math.round(sizeRef * centerFactor);
235
+ };
236
+
237
+ const getSecondaryTranslateFromScale = (cardIndex, scale) => {
238
+ return Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
239
+ };
240
+
241
+ return IS_ANDROID
242
+ ? {
243
+ // elevation.data.length - index, // fix zIndex bug visually, but not from a logic point of view
244
+ opacity: animatedValue.interpolate({
245
+ inputRange: [-3, -2, -1, 0, 1],
246
+ outputRange: [0, peekingCardsOpacity, peekingCardsOpacity, 1, 0],
247
+ extrapolate: 'clamp',
248
+ }),
249
+ transform: [
250
+ {
251
+ scale: animatedValue.interpolate({
252
+ inputRange: [-3, -2, -1, 0],
253
+ outputRange: [card3Scale, card2Scale, card1Scale, 1],
254
+ extrapolate: 'clamp',
255
+ }),
256
+ },
257
+ {
258
+ rotate: animatedValue.interpolate({
259
+ inputRange: [0, 1],
260
+ outputRange: ['0deg', '22deg'],
261
+ extrapolate: 'clamp',
262
+ }),
263
+ },
264
+ {
265
+ [mainTranslateProp]: animatedValue.interpolate({
266
+ inputRange: [-3, -2, -1, 0, 1],
267
+ outputRange: [
268
+ getMainTranslateFromScale(-3, card3Scale),
269
+ getMainTranslateFromScale(-2, card2Scale),
270
+ getMainTranslateFromScale(-1, card1Scale),
271
+ 0,
272
+ sizeRef * 1.1,
273
+ ],
274
+ extrapolate: 'clamp',
275
+ }),
276
+ },
277
+ {
278
+ [secondaryTranslateProp]: animatedValue.interpolate({
279
+ inputRange: [-3, -2, -1, 0],
280
+ outputRange: [
281
+ getSecondaryTranslateFromScale(-3, card3Scale),
282
+ getSecondaryTranslateFromScale(-2, card2Scale),
283
+ getSecondaryTranslateFromScale(-1, card1Scale),
284
+ 0,
285
+ ],
286
+ extrapolate: 'clamp',
287
+ }),
288
+ },
289
+ ],
290
+ }
291
+ : {
292
+ zIndex: carouselProps.data.length - index,
293
+ opacity: animatedValue.interpolate({
294
+ inputRange: [-1, 0, 1, 2, 3],
295
+ outputRange: [0, 1, peekingCardsOpacity, peekingCardsOpacity, 0],
296
+ extrapolate: 'clamp',
297
+ }),
298
+ transform: [
299
+ {
300
+ scale: animatedValue.interpolate({
301
+ inputRange: [0, 1, 2, 3],
302
+ outputRange: [1, card1Scale, card2Scale, card3Scale],
303
+ extrapolate: 'clamp',
304
+ }),
305
+ },
306
+ {
307
+ rotate: animatedValue.interpolate({
308
+ inputRange: [-1, 0],
309
+ outputRange: ['-22deg', '0deg'],
310
+ extrapolate: 'clamp',
311
+ }),
312
+ },
313
+ {
314
+ [mainTranslateProp]: animatedValue.interpolate({
315
+ inputRange: [-1, 0, 1, 2, 3],
316
+ outputRange: [
317
+ -sizeRef * 1.1,
318
+ 0,
319
+ getMainTranslateFromScale(1, card1Scale),
320
+ getMainTranslateFromScale(2, card2Scale),
321
+ getMainTranslateFromScale(3, card3Scale),
301
322
  ],
302
- }
303
- : {
304
- zIndex: carouselProps.data.length - index,
305
- opacity: animatedValue.interpolate({
306
- inputRange: [-1, 0, 1, 2, 3],
307
- outputRange: [
308
- 0,
309
- 1,
310
- peekingCardsOpacity,
311
- peekingCardsOpacity,
312
- 0,
313
- ],
314
- extrapolate: 'clamp',
315
- }),
316
- transform: [
317
- {
318
- scale: animatedValue.interpolate({
319
- inputRange: [0, 1, 2, 3],
320
- outputRange: [1, card1Scale, card2Scale, card3Scale],
321
- extrapolate: 'clamp',
322
- }),
323
- },
324
- {
325
- rotate: animatedValue.interpolate({
326
- inputRange: [-1, 0],
327
- outputRange: ['-22deg', '0deg'],
328
- extrapolate: 'clamp',
329
- }),
330
- },
331
- {
332
- [mainTranslateProp]: animatedValue.interpolate({
333
- inputRange: [-1, 0, 1, 2, 3],
334
- outputRange: [
335
- -sizeRef * 1.1,
336
- 0,
337
- getMainTranslateFromScale(1, card1Scale),
338
- getMainTranslateFromScale(2, card2Scale),
339
- getMainTranslateFromScale(3, card3Scale),
340
- ],
341
- extrapolate: 'clamp',
342
- }),
343
- },
344
- {
345
- [secondaryTranslateProp]: animatedValue.interpolate({
346
- inputRange: [0, 1, 2, 3],
347
- outputRange: [
348
- 0,
349
- getSecondaryTranslateFromScale(1, card1Scale),
350
- getSecondaryTranslateFromScale(2, card2Scale),
351
- getSecondaryTranslateFromScale(3, card3Scale),
352
- ],
353
- extrapolate: 'clamp',
354
- }),
355
- },
323
+ extrapolate: 'clamp',
324
+ }),
325
+ },
326
+ {
327
+ [secondaryTranslateProp]: animatedValue.interpolate({
328
+ inputRange: [0, 1, 2, 3],
329
+ outputRange: [
330
+ 0,
331
+ getSecondaryTranslateFromScale(1, card1Scale),
332
+ getSecondaryTranslateFromScale(2, card2Scale),
333
+ getSecondaryTranslateFromScale(3, card3Scale),
356
334
  ],
357
- };
335
+ extrapolate: 'clamp',
336
+ }),
337
+ },
338
+ ],
339
+ };
358
340
  }