我希望在FlatList中删除item时实现动画效果。
我有一个自定义的card组件作为FlatList中的item,并以垂直方式显示它。
现在,我想对item的删除进行动画处理。item可以从任何位置/索引中删除。
删除时的动画效果是,item应该隐藏,下面的items应该缓慢向上滑动。这应该是平稳的,我已经完成了正常的操作,但不够平稳。我能够对透明度进行动画处理,但translateY在卡片上工作不如预期。
使用以下动画隐藏删除的card:
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],
// }),
// },
// ],
}
在card render()函数中
<Animated.View style={[animatedStyle]}>
......
// mycode
</Animated.View>
我无法控制/动画化FlatList的重新渲染/滚动/向上滚动行为。
有人可以帮帮我吗?