Question

假设我正在绿色和蓝色之间运行一个动画循环（插值中还有更多颜色，但是我开始在前三个之间循环）：

this.state = {
  colorValue: new Animated.Value(0)
};
this.interpolations = {
  background: this.state.colorValue.interpolate({
    inputRange: [0, 25, 50, 75, 100],
    outputRange: ["#64e5a5", "#216a7a", "#64e5a5", "#ffb637", "#ffd338"]
  })
};
this.backgroundAnimation = Animated.loop(
  Animated.timing(this.state.colorValue, {
    toValue: 50,
    duration: 10000
  })
);
this.backgroundAnimation.start();

请注意，我在插值过程中设置了额外的颜色，希望我可以停止动画循环并开始在75和100之间循环一个新的颜色，以在两个颜色周期之间进行平滑过渡。当我修改此代码以获得所需的效果时，动画似乎总是从0开始。我尝试将动画值设置为50，但这并不能解决任何问题。有人可以解释正确的方法吗？

注意：上面的代码没有尝试实际切换到下一个颜色周期，因为我真的不知道如何进行操作。

编辑：我已经接近了，但是还不很远，第二个循环不起作用：

  this.backgroundAnimation.stop();
  this.interpolations.background = this.state.colorValue.interpolate({
    inputRange: [0, 100],
    outputRange: [JSON.stringify(this.interpolations.background), "#ffd338"]
  });

  Animated.timing(this.state.colorValue, {
    toValue: 100,
    duration: 3000
  }).start(() => {
    console.log("Done");
    this.setState({
      ...this.state,
      colorValue : new Animated.Value(0) //just spit-balling, idk
    });
    this.interpolations.background = this.state.colorValue.interpolate({
      inputRange: [0, 50, 100],
      outputRange: ["#ffd338", "#fff39b", "#ffd338"]
    });
    console.log(this.interpolations.background);


    this.backgroundAnimation = Animated.loop(
      Animated.timing(this.state.colorValue, {
        toValue: 100,
        duration: 3000
      })
    );
    this.backgroundAnimation.start();
  });

Answer 1

想通了：）

this.backgroundAnimation.stop();
  this.setState({
    ...this.state,
    interpolations: {
      ...this.state.interpolations,
      background: this.state.colorValue.interpolate({
        inputRange: [0, 100],
        outputRange: [
          JSON.stringify(this.state.interpolations.background),
          "#ffd338"
        ]
      })
    }
  });
  Animated.timing(this.state.colorValue, {
    toValue: 100,
    duration: 2000
  }).start(() => {
    this.setState({
      ...this.state,
      interpolations: {
        ...this.state.interpolations,
        background: this.state.colorValue.interpolate({
          inputRange: [0, 50, 100],
          outputRange: ["#ffd338", "#ffffff", "#ffd338"]
        })
      }
    });
    this.backgroundAnimation = Animated.loop(
      Animated.timing(this.state.colorValue, {
        toValue: 100,
        duration: 2000
      })
    );
    this.backgroundAnimation.start();
  });
});

如何在React Native中在两个彩色动画循环之间平滑过渡？

1 个答案: