Анимированный заголовок на скроллвью - PullRequest
Новая
       12

Анимированный заголовок на скроллвью

0 голосов
/ 04 марта 2019

У меня есть прокрутка, поверх которой я отображаю заголовок.Моя цель состоит в том, чтобы анимировать, чтобы, когда пользователь прокручивает вниз, заголовок сворачивается, а когда вид прокручивается вверх, заголовок расширяется.Я нашел множество примеров, когда пользователь должен прокрутить весь заголовок, чтобы расширить заголовок.Я хотел бы, чтобы заголовок расширялся, как только прокручивается представление прокрутки.

Как мне этого добиться?

Вот что у меня есть: 

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 голосов
/ 05 марта 2019

Итак, вы правы насчет анимации свойства translateY.Так что ради этого вопроса я сделал это немного по-другому (плохо, извините за это, вам нужно немного поиграться с этим, чтобы получить правильную анимацию).Поэтому попробуйте установить стиль translateY анимированного представления 0; 

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

. Затем при прокрутке установите значение -100 или любую высоту вашего заголовка.

позже, когдапользователь возвращается вверх, к вершине 0, вы устанавливаете его на 0.Надеюсь, это поможет.Вот небольшой пример, извините за опоздание.:) https://snack.expo.io/@subkundu/header-hideshow

...