Анимированная вершина Анимированного представления постепенно скрывает элементы внутри - PullRequest
Новая
       68

Анимированная вершина Анимированного представления постепенно скрывает элементы внутри

0 голосов
/ 27 июня 2018

Эта аномалия анимации влияет только на iOS - Android выполняет анимированное событие, как и предполагалось. Анимация просто скрывает и показывает <Animated.View/> с анимированным значением margin-top или top, но после примерно 4 анимаций элементы в <Animated.View/> полностью исчезают, и у меня остается только высота и ширина <Animated.View/>.

Чтобы представить это в перспективе, вот несколько скриншотов:

enter image description here enter image description here enter image description here enter image description here

А потом я остался играть в прятки с НИ ОДНЫМИ Воздушными шарами. (

Вот код, он довольно простой Animated.timing звонки, ничего особенного ... 

componentWillReceiveProps = (nextProps) => { 
    if (this.props.animated && this.props.animate !== nextProps.animate) {
      if (nextProps.animate) {
        Animated.parallel([
          Animated.timing(
            this.animatedTop, {
              toValue: 0, // Show the header
              duration: 1000,
            }
          ),
          Animated.timing(
            this.opacity, {
              toValue: 1,
              duration: 1300,
            }
          )
        ]).start()
      } else {
        Animated.parallel([
          Animated.timing(
            this.animatedTop, {
              toValue: this.hiddenTop, // Hide the header ... no, no, don't go! X|
              duration: 1000,
            }
          ),
          Animated.timing(
            this.opacity, {
              toValue: 0,
              duration: 800,
            }
          )
        ]).start()
      }
    }
  }

Как вы можете себе представить, все остальное так же нормально, как и пчелы. Анимация работает совершенно нормально на Android, но это происходит на iOS ... почему? Я пробовал transform: [{translateY: this.animatedTop}], но после непрозрачного текста остается пустое место ... Я хочу, чтобы оно ушло с экрана, но оно отказывается возвращаться. Почему?!? 

Environment:
  OS: macOS Sierra 10.12.6
  Node: 6.11.0
  Yarn: 1.7.0
  npm: 5.3.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003
Packages:
  react: 16.3.1
  react-native: ~0.55.2

1 Ответ

0 голосов
/ 28 июня 2018

Итак, проблема заключалась в том, что мои элементы располагались absolute в пределах <Animated.View>; тем не менее, проблема была не столько в том, что мои элементы были позиционированы absolute (хотя удаление позиционирования absolute действительно исправило это, но раздражало стиль без гибкости абсолютных значений), это было потому, что элементы были непосредственно потомками <Animated.View> и не нормально <View>.

Так что это не будет работать с абсолютными значениями: 

<Animated.View>
  <View style={{ position: 'absolute' }}/>
</Animated.View>

но это будет: 

<Animated.View>
  <View>
    <View style={{ position: 'absolute' }}/>
  </View>
</Animated.View>

Надеюсь, это кому-нибудь поможет! Я как раз собирался расстаться с надеждой на анимацию моего заголовка для iOS XD

...