如何在React Native中在两种颜色的动画循环之间平滑过渡

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();
});
});