javascript - 动画在平面列表中从开始到结束时开始

Question

我需要使用延迟加载数据在平面列表上实现动画。

每个项目都应该是动画的。

我创建了动画组件：

export const AnimatedView = ({children, indexToAnimate}) => {

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

    useEffect(() => {
        Animated.spring(
            anim,
            {
                toValue: 1,
                friction: 6,
                tension: 60,
                delay: indexToAnimate * 50,
                useNativeDriver: true
            }
        ).start();
    });

    const scaleAnim = anim.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
    });


    return(
        <Animated.View style={{transform: [{scale: scaleAnim}]}}>
            {children}
        </Animated.View>
    )
};

这是我的 FlatList ：

export const ContactsList = ({contacts, onContactPress, loadMoreContacts}) => {
    return(
        <View>
            <FlatList
                initialNumToRender={20}
                data={contacts}
                keyExtractor={(item, index) => item+index.toString()}
                renderItem={({item, index}) => {
                    return (
                        <ContactItem onContactPress={onContactPress} contact={item} index={index} />
                    )
                }}
                onEndReachedThreshold={0.2}
                onEndReached={() => {loadMoreContacts()}}
            />
        </View>
    )
};

和项目：

return (
        <View indexToAnimate={index}>
                <TouchableOpacity onPress={() => onPressHandler()} style={styles.container}>
                    <Image source={{uri: contact.picture.large}} style={styles.imageStyle}/>
                    <Text style={styles.textStyle}>{contact.name.first} {contact.name.last}</Text>
                </TouchableOpacity>
        </View>
    );

第一个渲染动画看起来不错，我喜欢它，但是当我到达 FlatList 的末尾时，动画开始需要很长时间。根据日志，每次我到达终点时，它都会从索引 0 开始动画。

那么我怎样才能只为新加载的项目设置动画呢？

请看视频： https ://youtu.be/PN8-M9vNjBo

标签： javascriptreact-native