使用Animated.Flatlist和Animated.ScrollView动画Animated.View是不顺利的

Question

我想制作一个动画标题。

1. 我创建了FlatList的动画组件，
2. 使用onScroll函数更新动画值。
3. 使用绝对位置将视图(Animated.View)作为标题放置在动画FlatList的上方。
4. 最后，使用transform属性插值动画值以更改视图(Animated.View)。

动画工作得很好，但动画一点也不流畅。

我看到了这个问题如何使用scrollEventThrottle帮助平滑。所以我认为使用FlatList会很顺利，但事实并非如此。如果你的卷轴同时按压，它是光滑的。但是，如果你滚动离开手指，它是紧张的(我不知道如何描述它。对不起)。滚动是平滑的，但动画视图(标题)动画一点也不平滑。

环境

• 反应:16.0.0-字母表12，
• 反应-原生：^0.47.0，
• 节点: v7.7.3
• 国家预防机制: 4.1.2
• 纱线: 0.21.3

目标平台： iOS和Android

构建工具：博览会

链接到小吃演示

​

export default class AnimatedHeader extends React.Component {
	state = {
		animatedValue: new Animated.Value(0),
	};
	
	_renderItem = ({item}) => {
		return (
			<View style={styles.nonsenseItem}>
				<Text style={styles.itemText}>{item}</Text>
			</View>
		)
	};
	
	render() {
		let scaleY = this.state.animatedValue.interpolate({
			inputRange: [0, 180],
			outputRange: [1, 0.5],
			extrapolate: 'clamp',
		});
		
		let translateY = this.state.animatedValue.interpolate({
			inputRange: [0, 180],
			outputRange: [0, -100],
			extrapolate: 'clamp',
		});
		
		return (
			<View style={styles.container}>
				<AnimatedFlatList
					contentContainerStyle={{marginTop: 200}}
					scrollEventThrottle={16} // <-- Use 1 here to make sure no events are ever missed
					onScroll={Animated.event(
						[{nativeEvent: {contentOffset: {y: this.state.animatedValue}}}],
						{useNativeDriver: true} // <-- Add this
					)}
					data={data}
					renderItem={this._renderItem}
					keyExtractor={(item, i) => i}/>
				<Animated.View style={[styles.headerWrapper, {transform: [{scaleY}, {translateY}]}]}/>
			</View>
		)
	}
}

​

更新

因此，我尝试使用ScrollView实现相同的功能。但是，我认为，与使用ScrollView相比，使用FlatList更糟糕。

这里是世博会小吃演示:动画ScrollView头

我想我得先提一下我是怎么到这里来的。所以，我尝试通过一个非常好的媒体教程来实现它，并通过观看这个令人敬畏的youtube对布伦特的回应来实现它。然而，youtube视频中使用的确切代码也有同样的效果。此外，在媒体教程中，作者给出了一个链接到他的世博会动画标题链接，这是非常顺利的工作。但是，当我复制粘贴代码时，相同的代码不能顺利工作。因此，我认为问题在于反应或反应的本土化版本。我会更新，如果我有任何新的更新。谢谢。

Answer 1

在ResiveNative0.46中有一个回归，幸运的是，它已经在0.48.2中得到了修正(参见本期和这个公关)。这就是为什么你对最近的世博会版本有异议的原因。我在定制视差图像中遇到了这个问题，这是通过使用RN0.48.3构建一个自定义二进制文件来解决的。

您的代码很好，尽管我建议将scrollEventThrottle设置为1，因为这确实有助于在iOS上平滑处理。