React Native Apple App of the Day动画第三部分：关闭动画

本教程是我们今天在React native中实现Apple应用的第三部分。 因此，建议阅读本教程系列的第1部分和第2部分，以便对应用程序有全面的了解，并使我们自己适应所有实现。 在本教程的第二部分中，当我们单击或按下任何图像时，我们成功实现了放大图像动画。 在这里，我们将把文本部分添加到放大的弹出动画中并关闭动画。本教程的灵感来自React本机电子商务模板。

[在这里阅读第一部分]

[在这里阅读第二部分]

这个想法是首先完成放大部分的文本部分，然后实现带有内容的放大图像的紧密动画。

所以，让我们开始吧！

添加内容描述

在本教程的第二部分中，我们创建了两个View组件。 其中一张的flex值为2，另一张的flex值为1。在上方的视图中，我们添加了复制的图像，单击该图像时会放大动画。 现在，我们在第二个View组件上工作，以添加内容部分。

首先，我们需要定义一个动画变量，该变量初始化为Animated值，为0，如下面的代码片段所示：

constructor (props) {
    super(props);
    .....
    this.animation = new Animated.Value(0);
    this.state = {
      activeImage: null,
    } ;
  }

添加内容和样式

在此步骤中，我们将通过使用Text组件向第二个View组件添加一些内容，然后向View和Text组件添加一些样式。 然后，我们需要将普通的View组件更改为Animated View组件。 下面的代码段提供了实现此功能所需的代码和样式：

&lt ;Animated. View style={{ flex: 1,  backgroundColor: 'white' , padding: 20, paddingTop: 50 }} &gt ;
            &lt ;Text style={{ fontSize: 24, paddingBottom: 10 }} &gt ;Very Sure Developer &lt ;/Text &gt ;
            &lt ;Text &gt ;Eiusmod consectetur cupidatat dolor Lorem excepteur excepteur. Nostrud sint officia consectetur eu pariatur laboris est velit. Laborum non cupidatat qui ut sit dolore proident. &lt ;/Text &gt ;
          &lt ;/Animated. View &gt ;

因此，当我们单击任何图像时，我们将在模拟器屏幕上获得以下结果：

添加动画

在此步骤中，我们将向文本部分添加淡入动画。 想法是使文本部分从底部逐渐淡入。为此，我们需要定义两种动画样式，即不透明度和translateY，这将有助于解决此动画效果。 为了配置动画，我们将使用初始化为animationContentY常量的插值方法，该方法采用具有两个属性的对象：inputRange和outputRange，如下面的代码片段所示：

const animatedContentY = this .animation. int erpolate({
      inputRange: [ 0 , 1 ],
      outputRange: [ -150 , 0 ]
    })

为了了解inputRange和outputRange的工作原理，让我们匹配两个属性的值，如下所示：

0和-150，其中0 = 0％表示将位置设置为-150.1时动画不会开始，而0其中1 = 100％则表示动画要完成并且位置将恢复为原始。

接下来，我们还针对不透明效果将interpolate方法初始化为animationContentOpacity常量，如下面的代码片段所示：

const animatedContentOpacity = this .animation. int erpolate({
    inputRange: [ 0 , 0.5 , 1 ],
    outputRange: [ 0 , 1 , 1 ]
  })

在这里，我们希望在动画达到50％时显示100％的不透明度，以便inputRange和outputRange像超级按钮一样工作。

现在，我们需要通过将animatedContentY和animationizedOpacity常量都添加到animationContentStyle常量作为对象来完成本节。 animationContentStyle常量定义为一个对象，该对象采用两个动画值，即不透明度和变换。 不透明度被初始化为animationContentOpacity，变换被初始化为一个对象数组，其translateY值为AnimatedContentY，如下面的代码片段所示：

const animatedContentStyle = {
      opacity : animatedContentOpacity,
      transform : [
        {
          translateY : animatedContentY,
        },
      ],
    };

现在，我们需要将animationContent常量添加到样式prop数组，如下面的代码片段所示：

&lt ;Animated. View
            style={[
              {
                flex: 1,
                backgroundColor: 'white' ,
                padding: 20,
                paddingTop: 50,
              },
              animatedContentStyle,
            ]} &gt ;
            &lt ;Text style={{fontSize: 24, paddingBottom: 10}} &gt ;
              Very Sure Developer
            &lt ;/Text &gt ;
            &lt ;Text &gt ;
              Eiusmod consectetur cupidatat dolor Lorem excepteur excepteur.
              Nostrud sint officia consectetur eu pariatur laboris est velit.
              Laborum non cupidatat qui ut sit dolore proident.
            &lt ;/Text &gt ;
 &lt ;/Animated. View &gt ;

最后，我们需要在上一部分中定义的openImage函数中激活动画。 animation变量作为Animated组件的计时函数的参数提供，其toValue为1，持续时间为300ms，如以下代码片段所示：

Animated.parallel([
           ...........
           Animated.timing(this.animation, {
             toValue:1 ,
             duration: 300 ,
           }),
         ]).start();

因此，我们在模拟器屏幕上得到以下结果：

完成闭幕动画

我们需要添加的最后一件事是对弹出的放大图像元素进行关闭动画处理。 为此，我们需要定义一个名为closeImage的新函数。 closeImage函数配置有关闭图像元素所需的所有Animated属性，如下面的代码片段所示：

closeImage = () => {Animated.parallel([
     Animated.timing(this.position.x, {
       toValue : this .oldPosition .x ,
       duration: 300
     }),
     Animated .timing (this .position .y , {
       toValue: this .oldPosition .y ,
       duration: 250
     }),
     Animated .timing (this .dimensions .x , {
       toValue: this .oldPosition .width ,
       duration: 250
     }),
     Animated .timing (this .dimensions .y , {
       toValue: this .oldPosition .height ,
       duration: 250
     }),
     Animated .timing (this .animation , {
       toValue: 0,
       duration: 250
     })
   ]) .start (() => {
     this.setState({
       activeImage : null
     })
   })
 }

实现closeImage函数的想法是从上一教程中定义的openImage函数中添加相同的动画属性。 然后，使用存储在oldPosition变量中的值将动画位置倒回原始位置。 然后，当动画开始时，我们需要将activeImage状态设置为null。

最后，我们需要添加关闭按钮（X）来触发closeImage函数。 为了实现关闭按钮，我们在由Animated View组件包装的Text组件内放置一个字母“ X”。 然后，我们需要添加包裹Animated View组件的TouchableWithoutFeedback组件，以使文本可单击。 最后，我们将closeImage函数添加到TouchableWithoutFeedback组件的onPress事件。 然后，我们需要使用某些样式绑定这些组件，以使其显示在右上角。 下面的代码段提供了实现关闭按钮所需的代码和样式：

&lt ;TouchableWithoutFeedback onPress={() = &gt ; this.closeImage()} &gt ;
              &lt ;Animated. View style={{ position: 'absolute' , top: 30, right: 30 }} &gt ;
                &lt ;Text style={{ fontSize: 24, fontWeight: 'bold' , color: 'white' }} &gt ; X &lt ;/Text &gt ;
              &lt ;/Animated. View &gt ;
&lt ;/TouchableWithoutFeedback &gt ;

因此，我们在模拟器屏幕上得到以下结果：

现在，我们也用其他图像测试了同一件事，结果显示在下面的仿真器仿真中：

因此，我们已经成功添加了文本部分，并在React Native应用程序中实现了关闭动画。

结论

本教程是我们今天在React Native上实现Apple应用示例的一部分。 在本部分中，我们学习了如何添加文本和配置不同的动画属性。 我们还学习了如何将不同的样式绑定到组件。 然后，我们最终对上一教程中的弹出放大图像元素实施了关闭动画。

我非常感谢UnsureProgrammer的Nathavarun提供的这个有趣的教程。

如果您喜欢本教程，请在评论部分留下反馈，不要忘记分享！

信用

内容是从Unsureprogrammer的当天＃3 Apple App动画中获取的 。

然后从Unsplash获取图像。

翻译自: https://hackernoon.com/react-native-apple-app-of-the-day-animation-3-close-animation-j59w32z7