Question

在React Native 0.61中，发生了脉冲动画。它可以在iOS上正常运行，但不能在Android上运行。

这是代码：

  state = {
fadeAnim: new Animated.Value(1),
springValue: new Animated.Value(0),
  };

  runPulseAnimation() {
Animated.loop(
  Animated.parallel([
    Animated.timing(this.state.springValue, {
      toValue: 1,
      friction: 3,
      tension: 40,
      duration: 1500,
    }),
    Animated.timing(this.state.fadeAnim, {
      toValue: 0,
      duration: 1500,
    }),
  ]),
).start();
  }

循环正确发生，但是在Android上，动画结束后，不透明度会在重置弹簧值之前立即切换回1。同样，在iOS上不会发生这种情况。

有人遇到这样的事情吗？

Answer 1

在您的情况下，默认值似乎未初始化。如果您要执行的是重复性任务，您想尝试一下吗？

      runPulseAnimation() {
        this.state.fadeAnim.setValue(1)
        this.state.springValue.setValue(0)

      Animated.parallel([
        Animated.timing(this.state.springValue, {
          toValue: 1,
          friction: 3,
          tension: 40,
          duration: 1500,
        }),
        Animated.timing(this.state.fadeAnim, {
          toValue: 0,
          duration: 1500,
        }),
      ]).start(() => this.runPulseAnimation());
      }

Answer 2

最后解决了。由于我的视图起点隐藏在另一个具有不透明度1的视图之后，因此不必从1开始并逐渐变为0，因此我能够对动画进行排序，淡入和淡出，并在1处开始fadeAnim。

  state = {
    fadeAnim: new Animated.Value(0),
    springValue: new Animated.Value(0),
  };

    let fadeInAndOut = Animated.sequence([
      Animated.timing(this.state.fadeAnim, {
        toValue: 1,
        duration: 750,
      }),
      Animated.timing(this.state.fadeAnim, {
        toValue: 0,
        duration: 750,
      }),
    ]);

    Animated.loop(
      Animated.parallel([
        fadeInAndOut,
        Animated.timing(this.state.springValue, {
          toValue: 1,
          friction: 3,
          tension: 40,
          duration: 1500,
        }),
      ]),
    ).start();

反应原生Android淡入淡出动画在循环中闪烁

2 个答案: