Question

此动画异常仅影响iOS-Android按预期执行动画事件。动画只是隐藏并显示具有动画<Animated.View/>或margin-top值的top，但是经过大约4次动画后，<Animated.View/>中的元素完全消失了，只剩下<Animated.View/>的高度和宽度。

为正确起见，下面是一些屏幕截图：

enter image description here

然后，我离开与nO Balloons一起玩捉迷藏。：（

这是代码，非常简单的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

Answer 1

所以问题出在因为我将元素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 Header设置动画的希望

动画视图的动画顶部逐渐隐藏了其中的元素

1 个答案: