Question

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

我该如何实现？

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

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}
          />

Answer 1

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

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

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

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

滚动视图上的动画标题

1 个答案: