reactjs - Animated.Text 淡入动画变化

Question

所以我从网络套接字连接接收文本，并将其添加到文本组件。它以灰色开始，然后在 x 时间后变成黑色(应用程序处理文本)。我有下面的代码

    <Text style={styles.confirmedText}>
       {this.state.confirmedText}

       <Animated.Text style={{ fontFamily: "Helvetica Neue", color: "#9b9b9b" }}>
              {this.state.tempText}
       </Animated.Text>
    </Text>

所以这个 tempText 是不断变化的，但我希望当文本从空字符串 -> 一些/任何文本开始时有一个淡入动画。我有什么想法可以做到这一点吗？

注意:我知道我的代码没有尝试实现这一点，但我无法找到任何使用 Animated.Text 的工作示例。

提前致谢

编辑:更好的是，如果 temp 的值为“some text”，并且向其添加了一个词，例如“some text plus”，添加的词“plus”将单独动画化会很棒。虽然看起来很难

Answer 1

首先，您需要像这样设置一个动画值:

this.opacity = new Animated.Value(0)

然后，当您收到您想要开始动画的文本时:

Animated.timing(this.opacity, {
    duration: 350, // some number in milliseconds
    toValue: 1, // or whatever final opacity you'd like
  }).start();

最后，您需要在 Animated.Text 组件上插入该值:

style={{
  opacity: this.opacity.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  }),
  ...
}}

希望这可以帮助您入门!