react-native 平面列表动画项目删除/向上滑动

Question

我想在从 FlatList 中删除项目时以动画方式删除项目。

我有一个自定义卡片组件作为 FlatList 中的项目。我是垂直显示的。

现在，我想要制作删除项目的动画。可以从任何位置/索引中删除项目。

删除时的动画是，项目应隐藏，并且下面的项目应缓慢向上滑动。应该很顺利，我做的是正常的，但不顺利。我可以制作不透明的动画，但 TranslateY 无法按卡上的要求工作。

使用下面的动画隐藏已删除的卡片：

Animated.timing(this.animation, {
    toValue: 1,
    duration: 600,
    // easing: Easing.linear,
    delay: this.props.index * 1000,
}).start();

const animatedStyle = {
    opacity: this.animation,
    // transform: [
    //     {
    //         translateY: this.animation.interpolate({
    //             inputRange: [0, 1],
    //             outputRange: [0, 300],
    //         }),
    //     },
    // ],
}

在卡片渲染()中

<Animated.View style={[animatedStyle]}>
    ......
    // mycode
</Animated.View>

无法控制/动画 FlatList 重新渲染/滚动/向上滚动行为。

有人可以帮助我吗？

Answer 1

我在

FlatList

中的卡片组件/渲染项目上应用了以下动画，有两个动画：1- 淡出 2- 滑动。

• 通过不透明度实现褪色
• 滑动动画是通过Animated、计时卡片高度来实现的。没有使用

  transform-translateY

  作为

  FlatList

  移动元素比动画更快并且没有获得正确的滑动效果。

//initialize two animated variables
this.animation = new Animated.Value(1);
this.slide = new Animated.Value(1);

const cardAnimationHeight = AppSizes.isTablet ? 194 : 360;
//interpolating height to get slide animation 
const animatedStyle = {
  opacity: this.animation,
  height: this.slide.interpolate({
    inputRange: [0, 1],
    outputRange: [0, cardAnimationHeight],
  }),
};

render() {
  return (
    <Animated.View style={this.state.isThisCardSelected ? [animatedStyle] : null}>
       //  rest of card
    </Animated.View>
)}

//start animation
startAnimation = () => {
  this.setState({ isThisCardSelected: true }, () => {
  //setting isThisCardSelected to true to apply the above style which will trigger fade & after fading is done, applying height animation which will give the slide effect. 
  Animated.timing(this.animation, {
    toValue: 0,
    timing: 1000,
  }).start(() => {
    Animated.timing(this.slide, {
      toValue: 0,
      duration: 500,
    }).start(() => {
      //do you logic/actions
      this.setState({ isThisCardSelected: false }, () => {
        this.slide.setValue(1);
      });
    });
  });
 });
};

每当需要淡入淡出+滑动动画时，调用

startAnimation()

。