React Native每日Apple App动画第三部分：关闭动画-CSDN博客

本教程是React Native中实现Apple应用的第三部分，介绍了如何在放大的弹出窗口中添加文本内容并实现关闭动画。通过使用Animated组件和插值方法，作者详细解释了如何配置淡入动画和translateY效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本教程是我们今天在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和animatedContentOpacity常量都添加到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 = () =&gt; {
   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 (() =&gt; {
     this.setState({
       activeImage : null
     })
   })
 }

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

最后，我们需要添加关闭按钮（X）来触发closeImage函数。为了实现关闭按钮，我们在由Animated View组件包装的Text组件内放置一个字母“ X”。然后，我们需要添加包裹动画视图组件的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 ;

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