0

此动画异常仅影响 iOS - Android 按预期执行动画事件。动画只是<Animated.View/>用动画margin-top或top值隐藏和显示 ，但在大约 4 次动画之后，里面的元素<Animated.View/>完全消失了，我只剩下<Animated.View/>.

为了说明这一点，这里有一些截图：

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

然后我就只能和 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
4

1 回答 1

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 动画的希望

于 2018-06-28T18:05:59.210 回答