Question

我在rn项目中使用了Flatlist，当我将新数据推送到Flatlist中时，我的商品1会自动从位置A移到位置B。但是我的问题是我不希望它只是改变位置，我想使用动画来移动我的物品（从位置A到位置B）。我该如何实施？谢谢！

请从下面的链接中查看演示图片和视频： https://photos.app.goo.gl/WypswNyA38A2EAPQA https://photos.app.goo.gl/Ev1RYMduDj7mxrHn7

Answer 1

您可以使用Animated组件制作动画。根据您所附加的视频，将播放两步动画，一个动画将列表中的项目向上推，另一个动画则增加了列表项的不透明度。一种简单的方法是添加高度为0的列表项，并使用动画将高度增加到所需的高度，这将完成第一步。第一步完成后，控制opacity从0到1。

接下来，您需要在将列表项添加到列表时开始动画，componentDidMount是这样做的正确位置。请考虑执行上述步骤的以下组件。

import React from 'react';
import { Animated } from 'react-native';

class AnimatedListItem extends React.Component {
  constructor(...props) {
    super(...props);
    this.state = {
      height: new Animated.Value(0),
      opacity: new Animated.Value(0)
    };
  }

  componentDidMount() {
    Animated.sequence([
      Animated.timing(
        this.state.height,
        {
          toValue: this.props.height,
          duration: this.props.duration || 1000
        }
      ),
      Animated.timing(
        this.state.opacity,
        {
          toValue: 1,
          duration: this.props.duration || 1000
        }
      )
    ]).start();
  }

  render() {
    const { height, opacity } = this.state;
    return (
      <Animated.View
        style={{
          ...this.props.style,
          height: height,
          opacity: opacity
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

export default AnimatedListItem;

在上面的代码片段中，两个动画被传递到Animated.sequence([...])方法，以一个接一个地动画。

您现在可以在renderItem方法中使用上述组件，例如

renderItem = () => {
  return (
    <AnimatedListItem height={50} duration={800} style={...}>
      /* render actual component here */
    </AnimatedListItem>
  );
}

希望这会有所帮助！

注意：这是实现所需功能的最低限度示例。

如何在我的单位列表中实现动画？

1 个答案: