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 使用本机驱动程序会导致 Style property 'fontSize' is not supported by native animated module.

如果不设置useNativeDriver，或者设置为false，动画运行秒在JavaScript，即每次底层动画值更改（在您的情况下，_animatedIsFocused 从 0 转换为 1），它通过桥将消息从本机发送到 JS，然后 JS 需要处理它并将消息发送回本机线程。这就是不流畅的原因。

Afaik 无法使用 Animated 模块中的 built-in 本机制作它运行。

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

对于大多数简单的情况，它在 v1 中有一个 Animated-compatible 界面（请注意，现在有 Reanimated v2 beta 不提供相同的界面，至少现在还没有）。您应该可以只更改这行代码：

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

您的动画应该会立即运行顺利开始。没有 useNativeDriver 可以设置，因为所有动画运行本机。

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

easing: Easing.inOut(Easing.ease)

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

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)

Answer 2

您可以在文本或父视图上设置动画 scale 属性（看起来更流畅）。

const labelStyle = {
  transform: [
    {
      scale: this._animatedIsFocused.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0.777],
        extrapolate: 'clamp',
      }),
    },
  ],
}

React Native FontSize 动画锯齿状

React Native FontSize Animation Jaggy

animation

interpolation

font-size

react-native

expo