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