Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-21 00:32:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

anim changes

Browse source
This commit is contained in:
tapframe 2025-10-17 22:18:17 +05:30
parent 3effdee5c0
commit bb6f1f32a0
1 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/home/HeroCarousel.tsx
View file

@ -55,6 +55,12 @@ const HeroCarousel: React.FC<HeroCarouselProps> = ({ items, loading = false }) =
// Optimized: update background as soon as scroll starts, without waiting for momentum end // Optimized: update background as soon as scroll starts, without waiting for momentum end
const scrollX = useSharedValue(0); const scrollX = useSharedValue(0);
const interval = CARD_WIDTH + 16; const interval = CARD_WIDTH + 16;
// Reset scroll position when component mounts/remounts
useEffect(() => {
scrollX.value = 0;
}, []);
const scrollHandler = useAnimatedScrollHandler({ const scrollHandler = useAnimatedScrollHandler({
onScroll: (event) => { onScroll: (event) => {
scrollX.value = event.contentOffset.x; scrollX.value = event.contentOffset.x;
@ -114,9 +120,9 @@ const HeroCarousel: React.FC<HeroCarouselProps> = ({ items, loading = false }) =
const translateX = scrollX.value; const translateX = scrollX.value;
const progress = Math.abs(translateX) / (data.length * (CARD_WIDTH + 16)); const progress = Math.abs(translateX) / (data.length * (CARD_WIDTH + 16));
// Subtle scale animation for the entire container // Very subtle scale animation for the entire container
const scale = 1 - progress * 0.02; const scale = 1 - progress * 0.01;
const clampedScale = Math.max(0.98, Math.min(1, scale)); const clampedScale = Math.max(0.99, Math.min(1, scale));
return { return {
transform: [{ scale: clampedScale }], transform: [{ scale: clampedScale }],
@ -299,14 +305,17 @@ const HeroCarousel: React.FC<HeroCarouselProps> = ({ items, loading = false }) =
decelerationRate="fast" decelerationRate="fast"
contentContainerStyle={contentPadding} contentContainerStyle={contentPadding}
onScroll={scrollHandler} onScroll={scrollHandler}
scrollEventThrottle={16} scrollEventThrottle={8}
disableIntervalMomentum disableIntervalMomentum
initialNumToRender={3} initialNumToRender={3}
windowSize={5} windowSize={5}
maxToRenderPerBatch={3} maxToRenderPerBatch={2}
updateCellsBatchingPeriod={100} updateCellsBatchingPeriod={50}
removeClippedSubviews={false} removeClippedSubviews={false}
getItemLayout={getItemLayout} getItemLayout={getItemLayout}
pagingEnabled={false}
bounces={false}
overScrollMode="never"
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
<Animated.View <Animated.View
style={{ width: CARD_WIDTH + 16 }} style={{ width: CARD_WIDTH + 16 }}
@ -348,6 +357,12 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
const bannerOpacity = useSharedValue(0); const bannerOpacity = useSharedValue(0);
const logoOpacity = useSharedValue(0); const logoOpacity = useSharedValue(0);
// Reset animations when component mounts/remounts
useEffect(() => {
bannerOpacity.value = 0;
logoOpacity.value = 0;
}, [item.id]);
const inputRange = [ const inputRange = [
(index - 1) * (CARD_WIDTH + 16), (index - 1) * (CARD_WIDTH + 16),
index * (CARD_WIDTH + 16), index * (CARD_WIDTH + 16),
@ -388,8 +403,8 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
const cardOffset = index * (CARD_WIDTH + 16); const cardOffset = index * (CARD_WIDTH + 16);
const distance = translateX - cardOffset; const distance = translateX - cardOffset;
// Subtle parallax effect for banner // Reduced parallax effect to prevent displacement
const parallaxOffset = distance * 0.1; const parallaxOffset = distance * 0.05;
return { return {
transform: [{ translateX: parallaxOffset }], transform: [{ translateX: parallaxOffset }],
@ -401,8 +416,8 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
const cardOffset = index * (CARD_WIDTH + 16); const cardOffset = index * (CARD_WIDTH + 16);
const distance = translateX - cardOffset; const distance = translateX - cardOffset;
// Reverse parallax for info section // Minimal parallax for info section to prevent displacement
const parallaxOffset = -distance * 0.05; const parallaxOffset = -distance * 0.02;
return { return {
transform: [{ translateY: parallaxOffset }], transform: [{ translateY: parallaxOffset }],
@ -411,13 +426,19 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
useEffect(() => { useEffect(() => {
if (bannerLoaded) { if (bannerLoaded) {
bannerOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.cubic) }); bannerOpacity.value = withTiming(1, {
duration: 250,
easing: Easing.out(Easing.ease)
});
} }
}, [bannerLoaded]); }, [bannerLoaded]);
useEffect(() => { useEffect(() => {
if (logoLoaded) { if (logoLoaded) {
logoOpacity.value = withTiming(1, { duration: 400, easing: Easing.out(Easing.cubic) }); logoOpacity.value = withTiming(1, {
duration: 300,
easing: Easing.out(Easing.ease)
});
} }
}, [logoLoaded]); }, [logoLoaded]);