Question

我试图为Animated.Text的fontWeight制作动画，但无法让它工作。

1。插

const titleFontWeight = this.positionTitle1.x.interpolate({
  inputRange: [-0.3 * SCREEN_WIDTH, 0],
  outputRange: ['400', '600']
});

render() {
 return (
 <Animated.Text style={{ fontWeight: titleFontWeight }}>
 Title
 </Animated.Text>
 );
}

使用这个解决方案，改变的效果不会发生，直到整个动画（即this.positionTitle1的动画）完成，我得到一个警告：失败道具类型：无效道具＆＃39; fontWeight＆＃39;价值＆＃39; 377.333＆＃39;提供给文本[...]。

2。 Animated.timing

constructor() {
 super();
 this.fontWeight = new Animated.Value(400);
}

animateFontWeight() {
 Animated.timing(this.fontWeight, {
 toValue: 600,
 duration: 500
 }).start();
}

render() {
 return (
  <Animated.Text style={{ fontWeight: `${this.fontWeight._value}` }}>
  Title
  </Animated.Text>
 );
}

对于此解决方案，效果在动画完成之前也不会显示。

有没有解决方案？

Answer 1

如上所述，fontWeight仅接受固定的字符串值，例如：'400'，'800'或'normal'，'bold'。为了实现您的目标，您可以在动画开始的同时简单地使用setState。

render() {
    return (
      <View style={styles.container}>
        <WebView
         onLoad={() => this.hideSpinner()}
        source={{uri: 'url'}}
        style={{marginTop: 0}}
      />
      {this.state.visible && (
          <ActivityIndicator
            style={{ position: "absolute", top: height / 2, left: width / 2 }}
            size="large"
            color="#212B51"
          />
        )}
      </View>
    )
  }
}

Answer 2

尝试一下

设置文字

<Animated.Text
        style={{fontWeight: this.fontWeightAnimation.interpolate({
           inputRange: [300, 900],
           outputRange: ['300', '900'],
           easing: value => {
               const thousandRounded = value * 1000;
               if (thousandRounded < 300) {
                   return 0;
               }

               if (thousandRounded < 600) {
                   return 0.5;
               }

               return 1;
           }
       })}}> Sample Text </Animated.Text>

初始化动画：this.fontWeightAnimation = new Animated.Value(300);

开始动画：

Animated.timing(this.fontWeightAnimation, {
                toValue: 900,
                duration: 3000
            }).start();

如何在React Native中为fontWeight制作动画

2 个答案: