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

Question

我想制作动画header。

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

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

我 saw this issue 使用 scrollEventThrottle 如何帮助平滑。所以我认为使用 FlatList 会很顺利，但事实并非如此。如果您在按下时滚动，则它很平滑。但是如果你滚动并离开手指，它就会跳动（我不知道如何描述它。抱歉）。滚动很流畅，但是动画视图（Header）动画一点也不流畅。

环境

反应：16.0.0-alpha.12，
react-native: ^0.47.0,
节点：v7.7.3
npm: 4.1.2
纱线：0.21.3

目标平台： iOS 和 Android

构建工具： expo

Link to snack demo

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

Here is the expo snack demo: Animated ScrollView Header

我想我需要先提一下我是怎么来到这里的。所以，我尝试通过一个非常好的 tutorial in Medium, and also by watching this awesome youtube react conf viedo by Brent. However, the exact code used on youtube video has the same effect. Also, on the Medium tutorial, the author has given a Link to his expo Animated header link 来实现它，它运行起来非常顺利。但是当我复制粘贴代码时，相同的代码无法顺利运行。所以，我认为问题出在反应或反应本机版本上。如果我有任何新的更新，我会更新。谢谢。

Answer 1

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

您的代码很好，尽管我建议将 scrollEventThrottle 设置为 1，因为这确实有助于解决 iOS.

上的问题

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

Using Animated.Flatlist and Animated.ScrollView to animate an Animated.View is not smooth

react-native

react-animated

expo

react-native-flatlist