使用react-native-reanimated-carousel在React Native Carousel中实现部分滚动效果

Question

我正在React Native项目中使用react-native-reanimated-carousel，我想在页面首次加载时创建一个微妙的动画。具体来说，我希望轮播稍微滚动以仅显示下一个项目的一部分，然后平滑地弹回到初始位置，其中只有第一个项目完全可见。

我尝试过使用scrollTo方法，但我无法让动画看起来平滑。当前的实现要么揭示了太多下一个项目，要么反弹太快且突然，或者根本不发生。

const carouselRef = useRef(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (carouselRef.current) {
        carouselRef.current.scrollTo({
          x: 0.2,
          animated: true,
          animationDuration: 1200,
          easing: Easing.out(Easing.quad),
        });

        setTimeout(() => {
          if (carouselRef.current) {
            carouselRef.current.scrollTo({
              x: 0,
              animated: true,
              animationDuration: 1200,
              easing: Easing.in(Easing.quad),
            });
          }
        }, 1300); 
      }
    }, 500);
  }, []);

  return (
    <Animated.View style={styles.wrapper}>
         <Carousel
          ref={carouselRef}
          panGestureHandlerProps={{
            activeOffsetX: [-10, 10],
          }}
          pagingEnabled
          width={ITEM_WIDTH}
          height=HEADER_HEIGHT}
          data={data}
          scrollAnimationDuration={1000}
          onProgressChange={onProgressChange}
          renderItem={({ item, index }) => (
            <Item
              active={index === activeIndex}
              item={item}
            />
          )}
        />
    </Animated.View>
  );

如何实现部分向右滚动？

Answer 1

对于任何想要达到相同效果的人： 我刚刚创建了一个

const translateX = useRef(new Animated.Value(0)).current;

并放入 useEffect:

 useEffect(() => {
    if (!isLoading) {
      Animated.sequence([
        Animated.timing(translateX, {
          toValue: -50,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.spring(translateX, {
          toValue: 0,
          duration: 2000,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [isLoading]);

并将轮播中的项目渲染包裹在

中

<Animated.View style={{ transform: [{ translateX }] }}>
   <Item active={index === activeIndex} item={item}/>
</Animated.View>

这使得动画非常流畅且有弹性。