6

我想做一个动画标题。

  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 的情况更糟。

这是世博小吃演示：Animated ScrollView Header

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

4

1 回答 1

1

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

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

于 2017-09-15T08:10:52.120 回答