Question

我正在寻找一种可以逐项制作动画平面清单的方法。当一个项目完成动画时，下一个项目（来自平面列表）将显示在屏幕上

class AnimatedFlatList extends React.PureComponent {
    state = {selected: (new Map(): Map<string, boolean>)};
    let data = {[
        {"first_name":"ltorrejon0@si.edu"},
        {"first_name":"ichadbourne1@icq.com"},
        {"first_name":"ascorthorne2@mediafire.com"},
        {"first_name":"jlathwood3@xing.com"},
        {"first_name":"molkowicz4@ftc.gov"},
        {"first_name":"motridge5@tiny.cc"},
        {"first_name":"rcess6@hostgator.com"},
        {"first_name":"mmaundrell7@php.net"},
        {"first_name":"ufairburne8@instagram.com"},
        {"first_name":"pangel9@biglobe.ne.jp"}]
    };

    _keyExtractor = (item, index) => item.id;

    _onPressItem = (id: string) => {
        // updater functions are preferred for transactional updates
        this.setState((state) => {
            // copy the map rather than modifying state.
            const selected = new Map(state.selected);
            selected.set(id, !selected.get(id)); // toggle
            return {selected};
        });
    };

    _renderItem = (item) => (
        <View style={Styles.viewItem}}>
            <Text style={Styles.textItem>{item.text}</Text>
        </View>
    );

    render() {  
        return (
            <FlatList
                data={data}
                extraData={this.state}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        );
    }
}

当我将animatedView放入renderItem时，它会一起运行，而不是我想要的。

种类this way（但无需按按钮，它将自动加载）

Answer 1

也许有更好的解决方案，但是我正在使用delay的{{1}}属性，它对我来说很好。

我的项目组件如下：

Animated.timing()

这是单位列表：

export default class CustomItem extends Component {

    constructor(props) {
        super(props);

        this.state = {
            scaleValue: new Animated.Value(0)
        }
    }

    componentDidMount() {
        Animated.timing(this.state.scaleValue, {
            toValue: 1,
            duration : 600,
            delay: this.props.index * 350
        }).start();
    }

    render() {
        return (
            <Animated.View style={{ opacity: this.state.scaleValue }}>
                { this.props.children }
            </Animated.View>
        );
    }
}

因此，每一项都比之前的项目多延迟 350 毫秒。

当然，您可以更改动画的... renderItem(item) { return ( <CustomItem index={ item.index } > <Text>{ item.first_name }</Text> </CustomItem> ); } render() { return ( <FlatList keyExtractor={this._keyExtractor} data={data } renderItem={ this.renderItem.bind(this) } /> ); }和duration属性，然后为您找到最合适的动画：）

您需要注意项目的数量，因为您可能要等待太多时间才能看到最后一个项目：）

Answer 2

结帐Animated.Stagger。并行运行动画，但具有连续指定的延迟。

一个接一个地反应本地动画平面列表项

2 个答案: