Как я могу реализовать анимацию в моем плоском списке?

Question

Я использую Flatlist в своем проекте rn, и когда я помещаю новые данные в мой плоский список, мой элемент 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>
  );
}

Надеюсь, это поможет!

Примечание : Это минимальный пример для достижения того, что вы ищете.