animation - 如何在 React Native 中设置 fontWeight 动画

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 的动画)完成并且我得到一个警告:失败的 Prop 类型:提供给文本的值“377.333”的 Prop “fontWeight”无效[...]。

<强>2。动画.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

试试这个

设置文本

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