React Native每日Apple App动画第二部分：打开图像

在这篇文章中，我们将继续从当天React Native苹果应用程序的最后一部分继续。 在本教程的第一部分中，我们成功实现了React Native Shared元素过渡并设置了UI部分。 在这里，我们将更加努力地进行动画制作。 我们希望使图像过渡和选择动画更酷。本教程的灵感来自React本机电子商务模板

[在这里阅读第一部分]

[在这里阅读第三部分]

默认情况下，React Native不支持共享元素转换。 对于本教程，其想法是通过使用一些很酷的动画来复制图像并将其显示在目标元素的顶部。 本教程的这一部分将为我们提供有关在React Native中使用动画的非常酷而有趣的见解。

所以，让我们开始吧！

初始化变量

首先，我们需要初始化一些变量，以便存储图像的旧位置以及提供新位置。 为此，我们需要利用react-native包提供的Animated组件。 在这里，初始化三个变量oldPosition，位置和尺寸，如下面的代码片段所示：

this .oldPosition = {}; // for keep old element coordinate 
this .position = new Animated.ValueXY(); // use for setup animation in position 
this .dimensions = new Animated.ValueXY(); // use for setup animation in size

如上面的代码片段所示：

• oldPosition存储旧元素的坐标。
• position初始化为该position的Animated组件的ValueXY方法。
• dimensionsis初始化为Animated组件的ValueXY方法以获取尺寸。

创建一个打开图像的功能

在这一步中，我们将定义一个名为openImage的函数，该函数接收一个图像索引作为参数，并配置旧位置和大小以及新位置。 下面的代码段提供了带有用于配置索引图像的位置和大小的代码的功能：

openImage = index => { 
this .allImages[index].measure( ( x, y, width, height, pageX, pageY ) => { 
    this .oldPosition.x = pageX; 
    this .oldPosition.Y = pageY; 
    this .oldPosition.width = width; 
    this .oldPosition.height = height; 

    this .position.setValue({ x : pageX, y : pageY, }); 
    this .dimensions.setValue({ x : width, y : height, }); 
});

在上面的代码段中，我们使用索引值来标识图像对象。 然后，通过使用Measure方法，我们获得图像坐标并将其设置为当前坐标。 当我们想将图像带回到旧位置时，我们使用oldPosition变量。

然后，我们需要将函数openImage绑定到TouchableWithoutFeedback组件的onPress事件，如下面的代码片段所示：

<TouchableWithoutFeedback key={image.id} onPress={() => this .openImage(index)}>

实施叠加

现在，我们将在所选图像上创建复制图像的覆盖图。 为此，我们需要在App.js文件中的ScrollView组件之后放置一个View组件，并带有原始图像的副本。

首先，让我们创建一个带有absoluteFillObject样式绑定的View，如下面的代码片段所示：

< /ScrollView> 
  <View style={StyleSheet.absoluteFillObject}</ View>

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

正如我们在上面的代码片段中看到的那样，新的视图将阻止所有视图，并且我们无法执行任何操作。

为了解决该问题，我们将使用activeImage状态将pointerEventsprop切换为自动或不切换，如下面的代码片段所示：

<View style={StyleSheet.absoluteFillObject} pointerEvents={ this .state.activeImage ? 'auto' : 'none' }>

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

但是，正如我们在上面的仿真器仿真中所看到的那样，当我们单击或触摸图像时，我们无法滚动屏幕。

配置覆盖

接下来，我们将添加两个具有flex样式的View组件，以包含图像和文本，如下面的代码片段所示：

<View style={{ flex : 2 }}> </ View >
<View style={{ flex : 1 }}> </ View >

然后，我们将Animated.Image组件添加到第一个View组件，如下面的代码片段所示：

<View style={{ flex : 2 }} ref={view => ( this .viewImage = view)}>
   < Animated.Image 
      source = { this.state.activeImage ? this.state.activeImage.src : null } 
      style = {[ { resizeMode: ' cover ', top: 0 , left: 0 , height: null , width: null , }, ]}
    > </ Animated.Image > 
</ View >
 
<View style={{ flex : 1 }}> </ View >

在上面的代码段中，我们基于activeImage状态将源分配给Image组件。 如果为true，则将图像源分配给Image组件。 然后，我们绑定样式以将复制的图像粘贴在屏幕顶部。

现在，我们需要将动画样式添加到“动画图像”组件中。 为此，我们定义了一个名为activeImageStyle的常量，其大小配置如下面的代码片段所示：

render() { 
 const activeImageStyle = { 
   width : this .dimensions.x, 
   height : this .dimensions.y, 
   left : this .position.x, 
   top : this .position.y, 
  };

然后，我们需要将activeImageStyle附加到Animated Image组件的style prop数组，如下面的代码片段所示：

<Animated.Image 
  source={ this .state.activeImage ? this .state.activeImage.src : null } 
  style={[ { resizeMode : 'cover' , top : 0 , left : 0 , height : null , width : null , },
  activeImageStyle, 
  ]}>
</ Animated.Image >

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

正如我们在上面的仿真器仿真中所看到的那样，单击图像时，屏幕的角落将发生变化，边框将出现。

但是，复制的图像不会在屏幕上放大显示。

为了解决此问题，首先，我们需要使用ref prop获取对父View组件的引用，如下面的代码片段所示：

我们通过添加引用来控制父视图对象

<View style={{ flex : 2 }} 
 ref={view => ( this .viewImage = view)}> 
    < Animated.Image >

现在，我们可以获取父View的大小。 结果，我们现在可以放大图像以适合屏幕。 我们将通过在图像放大时激活动画来做到这一点。

激活动画

为了激活动画，我们需要返回到openImage函数。 然后，我们需要将当前图像索引设置为state。 之后，我们可以使用回调来触发动画。 下面的代码段提供了实现此目的的代码：

this .setState({ activeImage : images[index]}, () => { 
       this .viewImage.measure( ( dx, dy, dWidth, dHeight, dPageX, dPageY ) => { 
          Animated.parallel([ 
             Animated.timing(
               this .position.x, 
               { toValue : dPageX, duration : 300 , }
             ),
             Animated.timing(
               this .position.y, 
               { toValue : dPageY, duration : 300 , }
             ), 
             Animated.timing(
               this .dimensions.x, 
               { toValue : dWidth, duration : 300 , }
             ), 
             Animated.timing(
               this .dimensions.y, 
               { toValue : dHeight, duration : 300 , }
             ), 
          ]).start(); 
        }); 
}

在这里，我们测量包含父View数据的viewImage变量。 然后，我们使用Animated组件提供的具有定时功能的动画创建该动画，使放大的图像大小等于父视图的大小。

因此，下面的仿真器仿真中提供了最终结果：

因此，当我们单击屏幕上的任何图像时，我们已经成功实现了放大动画。

结论

在本教程的第二部分中，我们从第一部分的结尾处继续。 因此，建议仔细阅读第一部分以获得完整的见解。 在这里，我们学习了如何在React Native应用程序中引导动画。 我们还获得了有关如何使用Measure方法收集元素坐标数据的详细指南。 这部分还帮助我们了解了如何同时使用多个动画。 在下一部分中，我们将学习如何隐藏元素并显示文本部分。

信用

内容是从Unsureprogrammer的当日动画中排名第二的Apple App中获取的 。

然后从Unsplash获取图像。

揭露

这篇文章包括会员链接； 如果您购买，我可能会获得赔偿
本文提供的不同链接中的产品或服务。

From: https://hackernoon.com/react-native-apple-app-of-the-day-animation-2-open-image-cu146324o