Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 3x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x | import { interpolate, SharedValue, useAnimatedStyle } from 'react-native-reanimated';
import { STACK_LAYER_2, STACK_LAYER_3 } from '../constants';
interface UseStackAnimationProps {
index: number;
currentIndex: number;
animatedValue: SharedValue<number>;
translateX: SharedValue<number>;
translateY: SharedValue<number>;
direction: SharedValue<number>;
width: number;
}
export const useStackAnimation = ({
index,
currentIndex,
animatedValue,
translateX,
translateY,
direction,
width,
}: UseStackAnimationProps) => {
const animatedStyle = useAnimatedStyle(() => {
const currentItem = currentIndex === index;
const relativeIndex = index - currentIndex;
const progress = animatedValue.value - currentIndex;
const clampedProgress = Math.max(0, Math.min(1, progress));
const rotateZ = interpolate(-Math.abs(translateX.value), [0, width], [0, 20]);
let stackTranslateY = 0;
let stackScale = 1;
let opacity = 1;
switch (relativeIndex) {
case 0:
// Top layer
stackTranslateY = 0;
stackScale = 1;
opacity = 1;
break;
case 1:
// Layer 2: moves from default position to top when dragging
stackTranslateY = interpolate(
clampedProgress,
[0, 1],
[STACK_LAYER_2.defaultTranslateY, 0],
);
stackScale = interpolate(clampedProgress, [0, 1], [STACK_LAYER_2.defaultScale, 1]);
opacity = interpolate(progress, STACK_LAYER_2.opacityRange, [0, 1], 'clamp');
break;
case 2:
// Layer 3: moves from default position to layer 2 position when dragging
stackTranslateY = interpolate(
clampedProgress,
[0, 1],
[STACK_LAYER_3.defaultTranslateY, STACK_LAYER_3.targetTranslateY],
);
stackScale = interpolate(
clampedProgress,
[0, 1],
[STACK_LAYER_3.defaultScale, STACK_LAYER_3.targetScale],
);
opacity = interpolate(progress, STACK_LAYER_3.opacityRange, [0, 1], 'clamp');
break;
default:
// Items beyond 3 layers: hide off-screen
stackTranslateY = 1000;
stackScale = 0;
opacity = 0;
break;
}
return {
opacity,
transform: [
{ translateX: translateX.value },
{ translateY: translateY.value + stackTranslateY },
{ scale: stackScale },
{ rotateZ: currentItem ? `${direction.value * rotateZ}deg` : '0deg' },
],
};
});
return animatedStyle;
};
|