React Native FontSize 动画锯齿状

Question

我正在使用Gosha 的浮动标签输入组件，但动画字体大小的动画有点锯齿状。我尝试增加 Animated.timingtoValue但没有成功。我需要更改哪一部分才能使其顺利？请指教。

import React, { Component } from 'react';
import { View, TextInput, Animated, Easing } from 'react-native';

export class FloatingLabelInput extends Component {
  state = {
    isFocused: false,
    value: ''
  };

  componentWillMount() {
    this._animatedIsFocused = new Animated.Value(0);
  }

  handleFocus = () => this.setState({ isFocused: true });
  handleBlur = () => this.setState({ isFocused: false });

  handleTextChange = (newText) => this.setState({ value: newText });

  componentDidUpdate() {
    if (this.state.value == "") {
      Animated.timing(this._animatedIsFocused, {
        toValue: this.state.isFocused ? 1 : 0,
        duration: 200,
      }).start();
    }
  }

  render() {
    const { label, ...props } = this.props;

    const labelBoxStyle = {
      position: 'absolute',
      zIndex: 1,
      paddingHorizontal: 5,
      backgroundColor: '#fff',
      left: 20,
      top: this._animatedIsFocused.interpolate({
        inputRange: [0, 1],
        outputRange: [32, 10],
      })
    };
    const labelStyle = {
      fontSize: this._animatedIsFocused.interpolate({
        inputRange: [0, 1],
        outputRange: [18, 14], // Jaggy animation. Change to [18, 18]
                               // just to see smooth animation.
      }),
      color: this._animatedIsFocused.interpolate({
        inputRange: [0, 1],
        outputRange: ['#aaa', '#3b8c00'],
      }),
    };

    const textInputStyle = {
      height: 50,
      paddingHorizontal: 20,
      fontSize: 18, 
      color: '#000',
      borderWidth: 1, 
      borderColor: '#3b8c00',
      borderRadius: 25
    };

    return (
      <View style={{ paddingTop: 18 }}>
        <Animated.View style={labelBoxStyle}>
          <Animated.Text style={labelStyle}>{label}</Animated.Text>
        </Animated.View>
        <TextInput
          {...props}
          style={textInputStyle}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          value={this.state.value}
          onChangeText={this.handleTextChange}
        />
      </View>
    );
  }
}

Answer 1

不幸的是，React Native 的 Animated 仅支持某些属性的原生动画，例如不透明度和变换。对于这些，您可以通过设置将其打开useNativeDriver: true。但是，尝试使用本机驱动fontSize程序会导致Style property 'fontSize' is not supported by native animated module.

如果您未设置useNativeDriver，或者将其设置为false，则动画在 JavaScript 中运行，即每次底层动画值发生更改（在您的情况下，_animatedIsFocused从 0 转换为 1）时，它都会通过桥从本机发送一条消息到 JS，然后需要处理它并将消息发送回本机线程。这就是为什么它不顺利。

Afaik 没有办法让它使用内置的动画模块本地运行。

幸运的是，有一个很棒的库react-native-reanimated，它通过将所有动画代码移至本机并为您提供一个 JavaScript 接口来定义该代码，从而重新实现了动画的运行方式。

对于大多数简单的情况，它在 v1 中有一个与 Animated 兼容的接口（请注意，现在有 Reanimated v2 beta，它不提供相同的接口，至少现在还没有）。您应该能够只更改这行代码：

// import { Animated } from 'react-native'
import Animated, { Easing } from 'react-native-reanimated'

您的动画应该立即开始顺利运行。无需useNativeDriver设置，因为所有动画都是本机运行的。

请注意，您可能需要easing在timing配置中进行设置，例如

// import { Animated } from 'react-native'
import Animated, { Easing } from 'react-native-reanimated'

您还需要再进行一项更改，因为TextInput不是从 导出的reanimated。解决方案很简单，只需创建自己的动画组件即可：

easing: Easing.inOut(Easing.ease)