使用 Animated.Flatlist 和 Animated.ScrollView 为 Animated.View 设置动画不流畅

Question

我想做一个动画标题。

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

动画效果很好，但动画一点也不流畅。

我看到了使用如何scrollEventThrottle帮助平滑度的问题。所以我认为使用 FlatList 会很顺利，但事实并非如此。如果您在按下时滚动，则很流畅。但是如果你滚动并离开手指，它会很紧张（我不知道如何描述它。抱歉）。滚动很流畅，但动画视图（标题）动画一点也不流畅。

环境

• 反应：16.0.0-alpha.12，
• 反应原生：^0.47.0，
• 节点：v7.7.3
• npm：4.1.2
• 纱线：0.21.3

目标平台： iOS 和 Android

构建工具： expo

链接到小吃演示

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 实现相同的功能。但是，我认为，与 FlatList 相比，使用 ScrollView 的情况更糟。

这是世博小吃演示：动画 ScrollView Header

我想我需要先提一下我是如何来到这里的。因此，我尝试通过Medium 中的一个非常好的教程来实现这一点，并且还通过观看Brent 的这个很棒的 youtube react conf 视频来实现。但是，在 youtube 视频上使用的确切代码具有相同的效果。另外，在Medium教程上，作者给了他的expo Animated header link的链接，运行起来非常流畅。但是当我复制粘贴代码时，相同的代码不能顺利工作。所以，我认为问题在于 react 或 react native 版本。如果我有任何新的更新，我会更新。谢谢你。

Answer 1

React Native 0.46 中存在一个回归，幸运的是，它已在 0.48.2 中修复（请参阅此问题和此 PR）。这就是为什么您在使用最新的 Expo 版本时遇到问题。我在自定义视差图像时遇到了这个问题，通过使用 RN 0.48.3 构建自定义二进制文件解决了这个问题。

你的代码很好，尽管我建议设置scrollEventThrottle为1，因为这确实有助于在 iOS 上顺利进行。