react-native - react-native flatlist 在项目删除/向上滑动时制作动画
问题描述
我想对从 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 重新渲染/滚动/向上滚动行为。
有人能帮我吗?
解决方案
我已经使用以下逻辑实现了。
我在平面列表中的卡片组件/renderItem 上应用了以下动画。
- 有两个动画 1-淡入淡出 2-滑动
- 褪色是通过不透明度
- 滑动动画通过 Aninated 实现,卡片高度计时。没有使用 transform-translateY 作为平面列表移动元素比动画更快并且没有获得适当的滑动效果。
//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() 。
推荐阅读
- python-3.x - 如何使用 tkinter 制作 Plotting Graph App GUI?
- php - Laravel,如果我编辑所有字段都不起作用。不保存编辑的内容
- python - 如何在 Pygame 中检查碰撞
- c++ - PyTorch 模型评估在虚幻引擎中崩溃并出现错误 c0000374
- python - 用python改变图像背景颜色
- go - 纵梁工具是否有“反向”功能?
- java - 应用程序完全关闭时如何在android中保存暗模式状态
- javascript - 如何在javascript中更改滑块拇指的背景颜色?
- python - 如何使用 rpy2 抑制 python 打印代码以汇总模型
- c++ - 不同对象但相同父对象的向量