react-native - React Native FontSize 动画锯齿状

Question

我正在使用 Gosha's Floating Label Input组件，但动画有点参差不齐，无法为 fontSize 设置动画。我尝试增加 Animated.timing 的 toValue 但没有成功。我需要更改哪一部分才能使其平滑？请指教。

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 使用 native 驱动程序会导致 native 动画模块不支持样式属性“fontSize”。

如果您没有设置 useNativeDriver，或者如果您将它设置为 false，动画将在 JavaScript 中运行，即每次底层动画值发生变化时(在您的在 _animatedIsFocused 从 0 转换为 1 的情况下，它通过桥将消息从 native 发送到 JS，然后 JS 需要处理它并将消息发送回 native 线程。这就是它不平滑的原因。

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

幸运的是，有一个名为 react-native-reanimated 的很棒的库，它通过将所有动画代码移动到原生代码并为您提供一个 JavaScript 接口(interface)来定义该代码来重新实现动画的运行方式。

p>

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

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

您的动画应该会立即开始流畅运行。没有要设置的 useNativeDriver，因为所有动画都在 native 运行。

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

easing: Easing.inOut(Easing.ease)

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

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)