react-native flatlist 在项目删除/向上滑动时制作动画答案

【问题标题】：react-native flatlist animate on item remove/slide upreact-native flatlist 在项目删除/向上滑动时制作动画
【发布时间】：2020-06-26 08:09:23
【问题描述】：

我想为从 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 重新渲染/滚动/向上滚动行为。

有人可以帮我吗？

【问题讨论】：

标签： react-native react-native-flatlist react-native-animatable

【解决方案1】：

我使用以下逻辑实现了。

我在 flatlist 中的卡片组件/renderItem 上应用了以下动画。

有两种动画1-淡出2-滑动
褪色是通过不透明度实现的
通过 Aninated 实现的滑动动画，在卡片高度上计时。没有使用 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()。

【讨论】：