如何在 React Native 中使用 Animated ScrollView 为这样的项目设置动画？

Question

我目前正在开发一个 React 本机应用程序，其引导屏幕包含以下类型的步进滑块。

我使用 Animated (react-native) Scrollview 在 react native 中重新创建了滑块，但它仍然不太像设计。

我在 React Native 中的实现。（删除了不必要的代码）

const steps = [
  {
    id: 1,
    key: null,
    icon: null,
  },
  {
    id: 2,
    key: 'auth-form',
    icon: require('src/assets/icons/email.png'),
  },
  {
    id: 3,
    key: 'email-sent',
    icon: require('src/assets/icons/send.png'),
  },
  {
    id: 4,
    key: null,
    icon: null,
  },
];

const STEP_SIZE = 100;
const { width } = Dimensions.get('window');

const EMPTY_ITEM_SIZE = (width - STEP_SIZE) / 2;

return (<Animated.ScrollView
            ref={scroll}
            onScroll={Animated.event(
              [{ nativeEvent: { contentOffset: { x: scrollX } } }],
              { useNativeDriver: false },
            )}
            showsHorizontalScrollIndicator={false}
            snapToInterval={STEP_SIZE}
            horizontal
            // scrollEnabled={false}
            contentContainerStyle={styles.scrollViewContainer}
            bounces={false}>
            {steps.map((step, index) => {
              if (!step.key) {
                return <View key={index} style={{ width: EMPTY_ITEM_SIZE }} />;
              }

              const inputRange = [
                (index - 2) * STEP_SIZE,
                (index - 1) * STEP_SIZE,
                index * STEP_SIZE,
              ];

              const scale = scrollX.interpolate({
                inputRange,
                outputRange: [1, 2, 1],
              });

              return (
                <Animated.View
                  key={index}
                  style={{
                    alignItems: 'center',
                    width: STEP_SIZE,
                    transform: [{ scale }],
                  }}>
                  <Image source={step.icon} style={{width: 60, height: 60}} />
                </Animated.View>
              );
            })}
          </Animated.ScrollView>);

最终结果如下所示：

我无法实现那些减小项目大小的目标。任何帮助将不胜感激。谢谢。

Answer 1

想通了。我们必须绝对定位圆圈（图像）并在幻灯片滚动时（宽度为 100%）为圆圈的 translateX 设置动画。

如何在 React Native 中使用 Animated ScrollView 为这样的项目设置动画？

How to animate items like this with Animated ScrollView in react native?

javascript

animation

react-native