滚动视图上的动画标题

时间:2019-03-04 15:12:30

标签: react-native animation react-animated

我有一个滚动视图,在其上面显示标题。我的目标是制作动画,以便当用户向下滚动时,标题折叠,而当视图向上滚动时,标题展开。 我发现大量示例,用户必须一直向上滚动标题才能扩展。我想要的是让标题在滚动视图向上滚动时立即展开。

我该如何实现?

这是我到目前为止所拥有的:

type State = { scrollY: Animated.Value };
....

headerHeight = this.state.scrollY.interpolate({           inputRange:[             0、60           ],           outputRange:[60,0],           推断:“钳位”         });

<Animated.View style={{ height: headerHeight, backgroundColor: "#F0f" }}
          >
            <ScreenHeader
              ref={this.screenHeaderRef}
              onTouchAvatar={this.handleOpenProfile}
              onTouchNotifications={this.handleOpenNotification}
              user={currentUser}
              newNotifications={this.props.newNotifications}
            />
          </Animated.View>
          <WrappedComponent
            onScroll={Animated.event([
              {
                nativeEvent: {
                  contentOffset: {
                    y: 
                      this.state.scrollY
                  }
                }
              }
            ])}
            onMomentumScrollEnd={this.handleMomentumScrollEnd}
            {...this.props}
          />

1 个答案:

答案 0 :(得分:0)

因此,对translateY属性进行动画处理是正确的。因此,为解决这个问题,我采取了一些不同的方式(很遗憾,对此感到抱歉,您需要对此稍作练习才能获得正确的动画)。 因此,尝试将动画视图的translateY的样式设置为0;

<Animated.View                 
  style={[{
    transform: [
      {
        translateY: this.transform
      }
    ]
  }, {
    backgroundColor: 'red'
  }]}
>

然后在滚动条上将其设置为-100或任何标题高度。

稍后,当用户返回时,您将其设置为顶部0,将其设置为0。 希望能够做到这一点。 这是一个小例子,很抱歉回来晚了。 :) https://snack.expo.io/@subkundu/header-hideshow