当你不知道内容的大小时,你如何设置反应原生的高度动画？

Question

在本地反应中,当你不知道它的内容大小时,你如何动画视图的大小？

假设View的内容高度可以是0-400pts,内容可以动态增长和缩小,并且您想要对高度的任何更改进行动画处理.

基本上,我想在不使用LayoutAnimation但使用Animated的情况下重现LayoutAnimation的行为.

我认为我不知道的是我不知道如何为目标高度制作动画,因为我不知道内容的高度.

Answer 1

大家好，希望现在还不算太晚......

对于在视图高度上处理 React Native 动画的任何人。
我知道这很烦人，因为：

?? React Native动画似乎不支持布局样式（例如宽度和高度）
？？LayoutAnimation看起来调查起来很复杂
？？希望使用官方方式制作动画而不是安装第三方软件包
？？有时内容可能会很大以破坏您的视图样式

所以这是我的解决方案（类组件方式）：

首先，在 state 中设置动画值：

state = { height: new Animated.Value(0) };

接下来，max height使用动画插值设置动画视图：

const maxHeight = this.state.height.interpolate({ 
  inputRange: [0, 1], 
  outputRange: [0, 2000]  // <-- any value larger than your content's height
};
return (<Animated.View style={[styles.box, { maxHeight: maxHeight }]} />); 
// any other fixed styles in styles.box

之后，在function您调用的内部设置动画，
或者componentDidMount如果您希望它在渲染后立即显示：

// or in any function that users interact
componentDidMount() {
  Animated.timing(this.state.formHeight, {
    toValue: 1,
    duration: 500,           // <-- animation duration
    easing: Easing.linear,   // <-- or any easing function
    useNativeDriver: false   // <-- need to set false to prevent yellow box warning
  }).start();
}

请注意，不要设置useNativeDriver为，true因为布局样式不支持它。

样本

所以下面是一个供您交互的示例，您可以
随意复制并粘贴到您的React Native项目中进行尝试：

import React, { PureComponent } from 'react';
import { Animated, Button, Easing, View, Text, StyleSheet } from 'react-native';

class AnimateBox extends PureComponent {
  state = { opacity: new Animated.Value(0), height: new Animated.Value(0) };

  showContent = () => {
    const { opacity, height } = this.state;

    Animated.timing(height, {
      toValue: 1,
      duration: 500,
      easing: Easing.linear,
      useNativeDriver: false  // <-- neccessary
    }).start(() => {
      Animated.timing(opacity, {
        toValue: 1,
        duration: 500,
        easing: Easing.linear,
        useNativeDriver: false  // <-- neccessary
      }).start();
    });
  };

  render() {
    const { opacity, height } = this.state;
    const maxHeight = height.interpolate({ 
      inputRange: [0, 1], 
      outputRange: [0, 1000]  // <-- value that larger than your content's height
    });

    return (
      <View style={styles.box}>
        <Animated.View style={{ opacity: opacity, maxHeight: maxHeight }}>
          <Text style={styles.content}>
            Lorem Ipsum is simply a dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </Text>
        </Animated.View>
        <View style={styles.spacing}>
          <Button title="Show content" onPress={this.showContent} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    backgroundColor: '#fff',
    marginHorizontal: 15,
    paddingHorizontal: 15
  },
  spacing: {
    paddingVertical: 10
  },
  content: {
    fontSize: 16,
    lineHeight: 30,
    color: '#555'
  }
});


export default AnimateBox;

快乐编码:)

更多解释（2021 年 2 月 3 日编辑）

如 React Native 文档中所述：https :
//reactnative.dev/docs/animations#caveats

并非您可以使用 Animated 执行的所有操作都受本机驱动程序的支持。主要的限制是你只能为非布局属性设置动画：transform 和 opacity 之类的东西会起作用，但 Flexbox 和 position 属性不会。

禁用useNativeDriver可以动画除opacityand之外的样式transform，但实际上增加了 JS 线程的工作量，因为 JS 线程需要在每一帧上计算 UI。

在 React Native 0.62 的博客中：https :
//reactnative.dev/blog/2020/03/26/version-0.62#deprecations

现在需要设置 useNativeDriver 以支持将来切换默认值。

您必须需要将useNativeDriverin 动画选项设置为onReact native v0.62或 above 以防止出现任何警告。

Answer 2

我使用LayoutAnimation它,就在导致组件高度发生变化的状态更改之前,添加:

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

您可以使用不同的预设:

• 弹簧
• easeInEaseOut

• 线性

  你可以在这里阅读更多相关信息https://facebook.github.io/react-native/docs/layoutanimation.html

Answer 3

您将不得不添加某种尺寸缩放,可能具有百分比以获得最佳效果.

首先,你需要使用Animated.View而不是View.

接下来,您需要将变换应​​用于视图的样式,让它看起来如下所示.这是更新和更改并创建动作的部分.

        <Animated.View style={[ styles.someStyleYouMade,
          {
            transform: [
              // scaleX, scaleY, scale, theres plenty more options you can find online for this.
              {  scaleX: ViewScaleValue } // this would be the result of the animation code below and is just a number.
            ]
          } 
        ]}
        >

下一部分基本上是一个动画API示例,您可以编写类似这样的内容(根据需要自定义),并且在调用此脚本时,它将以您指定的任何方式进行动画处理.

  Animated.timing(                    // Animate over time
    this.state.ViewScale,             // The animated value to drive, this would be a new Animated.Value(0) object.
    {
      toValue: 100,                   // Animate the value
      duration: 5000,                 // Make it take a while
    }
  ).start();

最后,您可能希望对值应用插值,使其看起来尽可能自定义.

(这将进入你的render()功能,但在进入变换之前return().)ViewScaleValueAnimated.View

const ViewScaleValue = this.state.ViewScale.interpolate({
  inputRange: [0, 25, 50, 75, 100],
  outputRange: [0, .5, 0.75, 0.9, 1]
});

所有这些代码都会产生ViewScaleValue一个简单的数字,动画从0到100,快速然后慢(因为插值)并将动画的每次迭代应用到Animated.View变换.

与此同时阅读Animated API以便更好地掌握它.