Question

我想制作一个动画标题。

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

动画效果很好，但动画根本不流畅。

saw this issue scrollEventThrottle如何使用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> ) } }帮助平滑。所以我认为使用FlatList会很顺利，但事实并非如此。如果在按下时滚动，则表示平滑。但是如果你滚动并离开手指，它就会跳动（我不知道如何描述它。抱歉）。滚动是平滑的，但动画视图（页眉）动画根本不平滑。

环境

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

目标平台： iOS和Android

构建工具： expo

Link to snack demo

@Module()
class AppModule(val app: App) {

    @Provides
    @Singleton
    fun provideApp() = app

}

更新

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

Here is the expo snack demo: Animated ScrollView Header

我想我需要提一下我是如何到达这里的。所以，我尝试通过一个非常好的tutorial in Medium来实现这一点，并且还通过观察awesome youtube react conf viedo by Brent来实现。但是，youtube视频上使用的确切代码具有相同的效果。此外，在媒体教程中，作者给出了expo Animated header link的链接，该链接非常顺利。但是当我复制粘贴代码时，相同的代码无法顺利运行。所以，我认为问题在于反应或反应原生版本。如果我有任何新的更新，我会更新。谢谢。

Answer 1

React Native 0.46已经出现了回归，幸运的是，已经修复了0.48.2 （见this issue和this PR）。这就是为什么你在最近的世博会版本中遇到问题的原因。我对自定义视差图像有这个问题，这是通过使用RN 0.48.3构建自定义二进制文件来解决的。

您的代码很好，即使我建议将scrollEventThrottle设置为1，因为这有助于平滑iOS上的内容。

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

1 个答案: