如何在本机反应中使用 Animated ScrollView 为这样的项目设置动画？

Question

我目前正在开发一个带有包含以下类型步进滑块的引导屏幕的反应原生应用程序。

我使用 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%）上为圆圈的 transalteX 设置动画。