Geekly articles weekly

React Native中动画的实现

本文的翻译是专门为ReactJS / React Native-Developer课程的学生准备的。



很难想象没有动画的移动应用程序。 如果根本不存在，则网络上的动画通常很简单（最多-一个页面替换另一个页面）。 移动应用程序中的动画需要完全不同的关注。

CSS3有一个相对简单的API，可让您制作简单的动画。 但是在React Native中您没有此工具。 是的，即使是这样，这还不够。

那么，您是否需要知道是否正在使用React Native并实现完整的动画呢？

React Native有一个类似Animated的工具，但至少一开始看起来很吓人。

因此，如果需要，可以使用三个“事物组”或“块”，以便与动画配合使用。

块0：需要改变


动画是从一种状态到另一种状态的变化：

  • 从“隐藏”到“可见”的过渡；
  • 从圆形过渡到正方形。

想想动画前后要显示什么。
考虑一下过渡以及为此需要更改的样式：

  • 该对象应该出现透明度变化的情况，还是应该只是从上方“掉落”？
  • 圆应该变成正方形还是在过程中间变成三角形？


块1：一种称为Animated.Value视觉状态


从逻辑的角度来看，任何组件都可以显示或隐藏-这些是“ true”和“ false”的含义；这里没有中间立场。 作为状态，显示对象是否显示为是或否。

在良好的用户界面中，对象不会突然隐藏，也不会突然出现。 它们会逐渐出现，以帮助用户了解界面。
因此，清楚的是，视觉状态可以在真实状态与错误状态之间。

怎么会这样
我们可以引入另一个变量来表示一系列视觉状态。 我们需要它是一个数字，因为无论我们处于什么逻辑状态，数字都可以帮助我们表示中间值。

 this._shown = new Animated.Value(0);


逻辑状态可以是二进制的（即true或false ，1或0），而可视状态是浮点数。

块2：过渡称为Animated.timing


假设某个组件​​是隐藏的：这意味着其可见性参数的逻辑状态将为false，而可视状态也将为0.0。 但是，当我们想要显示一个组件时会发生什么？ 逻辑状态应立即变为真，而视觉状态应首先逐渐通过0.1、0.2，...，最后完全通过1.0。

为此，我们需要一种方法来告诉可视状态到1.0的过渡。
并且有这样的方式。 实际上，甚至有一些。
最简单的方法基本上是：

 Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();


在这里，我们说Animated ，可以在300毫秒的间隔内将_shown更改为1.0 。
还有其他过渡和组织多个过渡的方式，但是现在我们可以使用Animated.timing 。

区块3：称为Animated.View和interpolate像素


如果看不到它们，我们在_shown到0.0和1.0之间的过渡没有任何意义。 那么我们该怎么做呢？

我们需要以某种方式使用_shown来设置子组件的透明度。

假设在开始使用动画之前我们有以下代码：

 <View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>


隐藏组件时将透明度设置为0 ，显示组件时将透明度设置为1 。

我们可以使用现有的Animated.Value和_shown设置从0到1过渡的动画吗？

风格动画


使用样式时，可以使用任何Animated.Value 。
我们只需要将View更改为Animated.View ，现在我们有了以下内容：

 const opacity = this._shown; // This is an Animated.Value <Animated.View style={{ opacity: opacity }}> <SomeComponent /> </Animated.View>


这不是关于动画的文章吗？ 为什么仍然没有图片？



还有一件事：插值


这个词听起来很吓人，但是这个想法本身很简单。 插值使我们可以将视觉状态保持在0和1之间，但可以“匹配”其他内容。

说，我们不仅希望创建继承的组件，还希望我们的组件“从上方退出”。 然后，我们可以通过将隐藏组件的位置放高40px并在状态变为可见时将其移动动画到所需位置来实现此目的。

我们可以使用通常的interpolate调用将0到1的值与-40到0的值“匹配”：

 const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });


这将创建一个新的Animated.Value ，其值将从-40到0。
换句话说，当_shown为0时将为-40 ，当_shown = 0.5时_shown -20 0.5而当_shown 1.0时_shown 1.0 。



秘密：通过interpolate您还可以更改颜色和色度的值。

结论：


  • 视觉状态是一个数值，它应该反映从一种样式到另一种样式的过渡。
  • Animated.Value允许您反映视觉状态的数值。
  • Animated.timing可用于将Animated.Value移动到另一个数字。
  • 当用Animated.View替换View时，可以将Animated.Value用于样式。

插值允许您将一个Animated.Value范围映射到另一个范围，例如，从0到1到5到25的范围，甚至到黑色和绿色之间的范围。

资料来源：


在本文中，我们遇到了React Native中的动画原语，并了解了基本概念。 在这里，您可以找到资源来帮助您更深入地探讨该主题：

Source: https://habr.com/ru/post/zh-CN468851/

More articles:


All Articles