@momo-kits/carousel 0.0.34-beta → 0.0.36
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.
- package/Carousel.js +1369 -1
- package/CarouselV2.js +1341 -0
- package/index.js +7 -1
- package/package.json +3 -10
- package/pagination/Pagination.js +158 -1
- package/pagination/PaginationDot.js +145 -1
- package/pagination/styles.js +24 -1
- package/publish.sh +2 -2
- package/styles.js +189 -1
- package/utils/animation.js +329 -1
- package/utils/animationsV2.js +381 -0
- package/babel.config.js +0 -1
package/utils/animation.js
CHANGED
|
@@ -1 +1,329 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable no-param-reassign */
|
|
2
|
+
import { Platform, Dimensions } from 'react-native';
|
|
3
|
+
|
|
4
|
+
const IS_ANDROID = Platform.OS === 'android';
|
|
5
|
+
const { width: viewportWidth = 0, height: viewportHeight = 0 } = Dimensions.get('window') || {};
|
|
6
|
+
|
|
7
|
+
// Get scroll interpolator's input range from an array of slide indexes
|
|
8
|
+
// Indexes are relative to the current active slide (index 0)
|
|
9
|
+
// For example, using [3, 2, 1, 0, -1] will return:
|
|
10
|
+
// [
|
|
11
|
+
// (index - 3) * sizeRef, // active + 3
|
|
12
|
+
// (index - 2) * sizeRef, // active + 2
|
|
13
|
+
// (index - 1) * sizeRef, // active + 1
|
|
14
|
+
// index * sizeRef, // active
|
|
15
|
+
// (index + 1) * sizeRef // active - 1
|
|
16
|
+
// ]
|
|
17
|
+
export function getInputRangeFromIndexes(range, index, carouselProps) {
|
|
18
|
+
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight <= 0 ? (viewportHeight || 680) : carouselProps.itemHeight:
|
|
19
|
+
carouselProps.itemWidth <= 0 ? (viewportWidth || 375) : carouselProps.itemWidth;
|
|
20
|
+
const inputRange = [];
|
|
21
|
+
|
|
22
|
+
for (let i = 0; i < range.length; i += 1) {
|
|
23
|
+
inputRange.push((index - range[i]) * sizeRef);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return inputRange;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// Default behavior
|
|
30
|
+
// Scale and/or opacity effect
|
|
31
|
+
// Based on props 'inactiveSlideOpacity' and 'inactiveSlideScale'
|
|
32
|
+
export function defaultScrollInterpolator(index, carouselProps) {
|
|
33
|
+
const range = [1, 0, -1];
|
|
34
|
+
const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
|
|
35
|
+
const outputRange = [0, 1, 0];
|
|
36
|
+
|
|
37
|
+
return { inputRange, outputRange };
|
|
38
|
+
}
|
|
39
|
+
export function defaultAnimatedStyles(index, animatedValue, carouselProps) {
|
|
40
|
+
let animatedOpacity = {};
|
|
41
|
+
let animatedScale = {};
|
|
42
|
+
|
|
43
|
+
if (carouselProps.inactiveSlideOpacity < 1) {
|
|
44
|
+
animatedOpacity = {
|
|
45
|
+
opacity: animatedValue.interpolate({
|
|
46
|
+
inputRange: [0, 1],
|
|
47
|
+
outputRange: [carouselProps.inactiveSlideOpacity, 1]
|
|
48
|
+
})
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (carouselProps.inactiveSlideScale < 1) {
|
|
53
|
+
animatedScale = {
|
|
54
|
+
transform: [{
|
|
55
|
+
scale: animatedValue.interpolate({
|
|
56
|
+
inputRange: [0, 1],
|
|
57
|
+
outputRange: [carouselProps.inactiveSlideScale, 1]
|
|
58
|
+
})
|
|
59
|
+
}]
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return {
|
|
64
|
+
...animatedOpacity,
|
|
65
|
+
...animatedScale
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Shift animation
|
|
70
|
+
// Same as the default one, but the active slide is also shifted up or down
|
|
71
|
+
// Based on prop 'inactiveSlideShift'
|
|
72
|
+
export function shiftAnimatedStyles(index, animatedValue, carouselProps) {
|
|
73
|
+
let animatedOpacity = {};
|
|
74
|
+
let animatedScale = {};
|
|
75
|
+
let animatedTranslate = {};
|
|
76
|
+
|
|
77
|
+
if (carouselProps.inactiveSlideOpacity < 1) {
|
|
78
|
+
animatedOpacity = {
|
|
79
|
+
opacity: animatedValue.interpolate({
|
|
80
|
+
inputRange: [0, 1],
|
|
81
|
+
outputRange: [carouselProps.inactiveSlideOpacity, 1]
|
|
82
|
+
})
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (carouselProps.inactiveSlideScale < 1) {
|
|
87
|
+
animatedScale = {
|
|
88
|
+
scale: animatedValue.interpolate({
|
|
89
|
+
inputRange: [0, 1],
|
|
90
|
+
outputRange: [carouselProps.inactiveSlideScale, 1]
|
|
91
|
+
})
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
if (carouselProps.inactiveSlideShift !== 0) {
|
|
96
|
+
const translateProp = carouselProps.vertical ? 'translateX' : 'translateY';
|
|
97
|
+
animatedTranslate = {
|
|
98
|
+
[translateProp]: animatedValue.interpolate({
|
|
99
|
+
inputRange: [0, 1],
|
|
100
|
+
outputRange: [carouselProps.inactiveSlideShift, 0]
|
|
101
|
+
})
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
return {
|
|
106
|
+
...animatedOpacity,
|
|
107
|
+
transform: [
|
|
108
|
+
{ ...animatedScale },
|
|
109
|
+
{ ...animatedTranslate }
|
|
110
|
+
]
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Stack animation
|
|
115
|
+
// Imitate a deck/stack of cards (see #195)
|
|
116
|
+
// WARNING: The effect had to be visually inverted on Android because this OS doesn't honor the `zIndex`property
|
|
117
|
+
// This means that the item with the higher zIndex (and therefore the tap receiver)
|
|
118
|
+
// remains the one AFTER the currently active item
|
|
119
|
+
// The `elevation` property compensates for that only visually, which is not good enough
|
|
120
|
+
export function stackScrollInterpolator(index, carouselProps) {
|
|
121
|
+
const range = IS_ANDROID ? [1, 0, -1, -2, -3]
|
|
122
|
+
: [3, 2, 1, 0, -1];
|
|
123
|
+
const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
|
|
124
|
+
const outputRange = range;
|
|
125
|
+
|
|
126
|
+
return { inputRange, outputRange };
|
|
127
|
+
}
|
|
128
|
+
export function stackAnimatedStyles(index, animatedValue, carouselProps, cardOffset) {
|
|
129
|
+
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight : carouselProps.itemWidth;
|
|
130
|
+
const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
|
|
131
|
+
|
|
132
|
+
const card1Scale = 0.9;
|
|
133
|
+
const card2Scale = 0.8;
|
|
134
|
+
|
|
135
|
+
cardOffset = !cardOffset && cardOffset !== 0 ? 18 : cardOffset;
|
|
136
|
+
|
|
137
|
+
const getTranslateFromScale = (cardIndex, scale) => {
|
|
138
|
+
const centerFactor = 1 / (scale * cardIndex);
|
|
139
|
+
const centeredPosition = -Math.round(sizeRef * centerFactor);
|
|
140
|
+
const edgeAlignment = Math.round((sizeRef - (sizeRef * scale)) / 2);
|
|
141
|
+
const offset = Math.round(cardOffset * (Math.abs(cardIndex) / scale));
|
|
142
|
+
|
|
143
|
+
return IS_ANDROID ? centeredPosition - edgeAlignment - offset
|
|
144
|
+
: centeredPosition + edgeAlignment + offset;
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
return IS_ANDROID ? {
|
|
148
|
+
// elevation: carouselProps.data.length - index, // fix zIndex bug visually, but not from a logic point of view
|
|
149
|
+
opacity: animatedValue.interpolate({
|
|
150
|
+
inputRange: [-3, -2, -1, 0],
|
|
151
|
+
outputRange: [0, 0.5, 0.75, 1],
|
|
152
|
+
extrapolate: 'clamp'
|
|
153
|
+
}),
|
|
154
|
+
transform: [{
|
|
155
|
+
scale: animatedValue.interpolate({
|
|
156
|
+
inputRange: [-2, -1, 0, 1],
|
|
157
|
+
outputRange: [card2Scale, card1Scale, 1, card1Scale],
|
|
158
|
+
extrapolate: 'clamp'
|
|
159
|
+
})
|
|
160
|
+
}, {
|
|
161
|
+
[translateProp]: animatedValue.interpolate({
|
|
162
|
+
inputRange: [-3, -2, -1, 0, 1],
|
|
163
|
+
outputRange: [
|
|
164
|
+
getTranslateFromScale(-3, card2Scale),
|
|
165
|
+
getTranslateFromScale(-2, card2Scale),
|
|
166
|
+
getTranslateFromScale(-1, card1Scale),
|
|
167
|
+
0,
|
|
168
|
+
sizeRef * 0.5
|
|
169
|
+
],
|
|
170
|
+
extrapolate: 'clamp'
|
|
171
|
+
})
|
|
172
|
+
}]
|
|
173
|
+
} : {
|
|
174
|
+
zIndex: carouselProps.data.length - index,
|
|
175
|
+
opacity: animatedValue.interpolate({
|
|
176
|
+
inputRange: [0, 1, 2, 3],
|
|
177
|
+
outputRange: [1, 0.75, 0.5, 0],
|
|
178
|
+
extrapolate: 'clamp'
|
|
179
|
+
}),
|
|
180
|
+
transform: [{
|
|
181
|
+
scale: animatedValue.interpolate({
|
|
182
|
+
inputRange: [-1, 0, 1, 2],
|
|
183
|
+
outputRange: [card1Scale, 1, card1Scale, card2Scale],
|
|
184
|
+
extrapolate: 'clamp'
|
|
185
|
+
})
|
|
186
|
+
}, {
|
|
187
|
+
[translateProp]: animatedValue.interpolate({
|
|
188
|
+
inputRange: [-1, 0, 1, 2, 3],
|
|
189
|
+
outputRange: [
|
|
190
|
+
-sizeRef * 0.5,
|
|
191
|
+
0,
|
|
192
|
+
getTranslateFromScale(1, card1Scale),
|
|
193
|
+
getTranslateFromScale(2, card2Scale),
|
|
194
|
+
getTranslateFromScale(3, card2Scale)
|
|
195
|
+
],
|
|
196
|
+
extrapolate: 'clamp'
|
|
197
|
+
})
|
|
198
|
+
}]
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// Tinder animation
|
|
203
|
+
// Imitate the popular Tinder layout
|
|
204
|
+
// WARNING: The effect had to be visually inverted on Android because this OS doesn't honor the `zIndex`property
|
|
205
|
+
// This means that the item with the higher zIndex (and therefore the tap receiver)
|
|
206
|
+
// remains the one AFTER the currently active item
|
|
207
|
+
// The `elevation` property compensates for that only visually, which is not good enough
|
|
208
|
+
export function tinderScrollInterpolator(index, carouselProps) {
|
|
209
|
+
const range = IS_ANDROID
|
|
210
|
+
? [1, 0, -1, -2, -3]
|
|
211
|
+
: [5, 4, 3, 2, 1, 0, -1];
|
|
212
|
+
const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
|
|
213
|
+
const outputRange = range;
|
|
214
|
+
|
|
215
|
+
return { inputRange, outputRange };
|
|
216
|
+
}
|
|
217
|
+
export function tinderAnimatedStyles(index, animatedValue, carouselProps, cardOffset) {
|
|
218
|
+
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight : carouselProps.itemWidth;
|
|
219
|
+
const mainTranslateProp = carouselProps.vertical ? 'translateY' : 'translateX';
|
|
220
|
+
const secondaryTranslateProp = carouselProps.vertical ? 'translateX' : 'translateY';
|
|
221
|
+
const { nonScaleCard } = carouselProps;
|
|
222
|
+
|
|
223
|
+
const card1Scale = nonScaleCard ? 1 : 0.96;
|
|
224
|
+
const card2Scale = nonScaleCard ? 1 : 0.92;
|
|
225
|
+
const card3Scale = nonScaleCard ? 1 : 0.88;
|
|
226
|
+
|
|
227
|
+
const peekingCardsOpacity = IS_ANDROID ? 0.92 : 1;
|
|
228
|
+
|
|
229
|
+
cardOffset = !cardOffset && cardOffset !== 0 ? 9 : cardOffset;
|
|
230
|
+
|
|
231
|
+
const getMainTranslateFromScale = (cardIndex, scale) => {
|
|
232
|
+
const centerFactor = 1 / (scale * cardIndex);
|
|
233
|
+
return -Math.round(sizeRef * centerFactor);
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
const getSecondaryTranslateFromScale = (cardIndex, scale) => Math.round(cardOffset * (Math.abs(cardIndex) / scale));
|
|
237
|
+
|
|
238
|
+
return IS_ANDROID ? {
|
|
239
|
+
// elevation: carouselProps.data.length - index, // fix zIndex bug visually, but not from a logic point of view
|
|
240
|
+
opacity: animatedValue.interpolate({
|
|
241
|
+
inputRange: [-3, -2, -1, 0, 1],
|
|
242
|
+
outputRange: [0, peekingCardsOpacity, peekingCardsOpacity, 1, 0],
|
|
243
|
+
extrapolate: 'clamp'
|
|
244
|
+
}),
|
|
245
|
+
transform: [{
|
|
246
|
+
scale: animatedValue.interpolate({
|
|
247
|
+
inputRange: [-3, -2, -1, 0],
|
|
248
|
+
outputRange: [card3Scale, card2Scale, card1Scale, 1],
|
|
249
|
+
extrapolate: 'clamp'
|
|
250
|
+
})
|
|
251
|
+
}, {
|
|
252
|
+
rotate: animatedValue.interpolate({
|
|
253
|
+
inputRange: [0, 1],
|
|
254
|
+
outputRange: ['0deg', '22deg'],
|
|
255
|
+
extrapolate: 'clamp'
|
|
256
|
+
})
|
|
257
|
+
}, {
|
|
258
|
+
[mainTranslateProp]: animatedValue.interpolate({
|
|
259
|
+
inputRange: [-3, -2, -1, 0, 1],
|
|
260
|
+
outputRange: [
|
|
261
|
+
getMainTranslateFromScale(-3, card3Scale),
|
|
262
|
+
getMainTranslateFromScale(-2, card2Scale),
|
|
263
|
+
getMainTranslateFromScale(-1, card1Scale),
|
|
264
|
+
0,
|
|
265
|
+
sizeRef * 1.1
|
|
266
|
+
],
|
|
267
|
+
extrapolate: 'clamp'
|
|
268
|
+
})
|
|
269
|
+
}, {
|
|
270
|
+
[secondaryTranslateProp]: animatedValue.interpolate({
|
|
271
|
+
inputRange: [-3, -2, -1, 0],
|
|
272
|
+
outputRange: [
|
|
273
|
+
getSecondaryTranslateFromScale(-3, card3Scale),
|
|
274
|
+
getSecondaryTranslateFromScale(-2, card2Scale),
|
|
275
|
+
getSecondaryTranslateFromScale(-1, card1Scale),
|
|
276
|
+
0
|
|
277
|
+
],
|
|
278
|
+
extrapolate: 'clamp'
|
|
279
|
+
})
|
|
280
|
+
}]
|
|
281
|
+
} : {
|
|
282
|
+
zIndex: carouselProps.data.length - index,
|
|
283
|
+
opacity: animatedValue.interpolate({
|
|
284
|
+
inputRange: [-1, 0, 1, 2, 3, 4, 5],
|
|
285
|
+
outputRange: [0, 1, peekingCardsOpacity, peekingCardsOpacity, 1, 1, 0],
|
|
286
|
+
extrapolate: 'clamp'
|
|
287
|
+
}),
|
|
288
|
+
transform: [{
|
|
289
|
+
scale: animatedValue.interpolate({
|
|
290
|
+
inputRange: [0, 1, 2, 3, 4, 5],
|
|
291
|
+
outputRange: [1, card1Scale, card2Scale, card3Scale, 1, 1],
|
|
292
|
+
extrapolate: 'clamp'
|
|
293
|
+
})
|
|
294
|
+
}, {
|
|
295
|
+
rotate: animatedValue.interpolate({
|
|
296
|
+
inputRange: [-1, 0],
|
|
297
|
+
outputRange: ['-22deg', '0deg'],
|
|
298
|
+
extrapolate: 'clamp'
|
|
299
|
+
})
|
|
300
|
+
}, {
|
|
301
|
+
[mainTranslateProp]: animatedValue.interpolate({
|
|
302
|
+
inputRange: [-1, 0, 1, 2, 3, 4, 5],
|
|
303
|
+
outputRange: [
|
|
304
|
+
-sizeRef * 1.1,
|
|
305
|
+
0,
|
|
306
|
+
getMainTranslateFromScale(1, card1Scale),
|
|
307
|
+
getMainTranslateFromScale(2, card2Scale),
|
|
308
|
+
getMainTranslateFromScale(3, card3Scale),
|
|
309
|
+
getMainTranslateFromScale(4, 1),
|
|
310
|
+
getMainTranslateFromScale(5, 1)
|
|
311
|
+
],
|
|
312
|
+
extrapolate: 'clamp'
|
|
313
|
+
})
|
|
314
|
+
}, {
|
|
315
|
+
[secondaryTranslateProp]: animatedValue.interpolate({
|
|
316
|
+
inputRange: [0, 1, 2, 3, 4, 5],
|
|
317
|
+
outputRange: [
|
|
318
|
+
0,
|
|
319
|
+
getSecondaryTranslateFromScale(1, card1Scale),
|
|
320
|
+
getSecondaryTranslateFromScale(2, card2Scale),
|
|
321
|
+
getSecondaryTranslateFromScale(3, card3Scale),
|
|
322
|
+
getSecondaryTranslateFromScale(4, 1),
|
|
323
|
+
getSecondaryTranslateFromScale(5, 1)
|
|
324
|
+
],
|
|
325
|
+
extrapolate: 'clamp'
|
|
326
|
+
})
|
|
327
|
+
}]
|
|
328
|
+
};
|
|
329
|
+
}
|