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
React Native每日Apple App动画第二部分:打开图像相关推荐
- React Native 每日一学(Learn a little every day)
本文出自<React Native学习笔记>系列文章. 每天一个知识点(技巧,经验,填坑日记等),每天学一点,离大神近一点. 汇聚知识,分享精华. 如果你是一名React Native爱好 ...
- 在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...
- react native学习笔记29——动画篇 Animated高级动画
1.前言 上一节我们学习了全局的布局动画api--LayoutAnimation,体验到其流畅柔和的动画效果,但有时我们需要实现一些更精细化的动画,或者完成一些组合动画,这时我们可以使用React N ...
- react native Xcode打包app发布ipa到蒲公英
1.找到react native 项目,用Xcode打开项目,如下图 2.确保运行的选项如下图这个: 3.确保苹果开发者的证书,有则可以直接打包,没有的话需要到苹果开发者官网添加证书并且下载放入本地, ...
- React Native 仿开眼 App
本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言 前 ...
- 在 iOS 与 Android 上实现 React Native 应用深度链接,通过 URL 打开到指定页面
在 iOS 与 Android 上实现 React Native 应用深度链接,使得应用可以通过 我们生活在一个万物兼可分享的年代,而分享的过程,几乎最终都会分享某一个链接,那么,作为开发者,最常遇到 ...
- [React Native]豆瓣电影APP Demo
该APP是以React-Native官方文档中的案例Movies app为蓝本编写的 Fetch数据采用豆瓣API(感谢豆瓣提供的数据) 修改内容 加入了ScrollView 加入了Navigator ...
- react native友盟app统计
官方文档写得很简陋,根本无法成功使用. https://developer.umeng.com/docs/66632/detail/67587 需要以下这些补充才可以成功启用统计功能 android/ ...
- 手机app开发可选技术——React Native
百度百科 React Native是Facebook于2015年开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物,支持IOS和安卓两大平台.RN ...
最新文章
- 破纪录了!用 Python 实现自动扫雷!
- eas库存状态调整单不能反审核_石材家装企业采购库存管理流程案例
- 一个简单IOC与DI示例
- Recyclerview 出现 java.lang.IndexOutOfBoundsException: Inconsistency detected 异常
- 3.1.2 操作系统内存管理管些什么?
- iOS Hacker 重签名实现无需越狱注入动态库 dylib
- java设计模式适配器模式_Java中的适配器设计模式
- windows_study_2
- p2psearcher2013其中
- linux 按日期复制文件夹,Linux 按文件日期分类文件
- .NET 重生之旅——序言
- 吉利控股集团申请注册“富吉康”商标
- 1环境-企业级 Hyper-v 群集部署实验方案
- 5.2.6 std::atomic<>主要类的模板
- 会安装oracle数据库吗,搭建安装oracle数据库
- 史上最全破解安卓APK和反编译
- 记录一下把域名从阿里云服务商转入到华为云
- Vue.js:从安装到快速创建脚手架项目,解决刚创建完出现的parsing error:No Bable config file detected报错
- 【八股文】4 Spring
- Hadoop学习5-3:HDFS回收站
热门文章
- android 可下载字体,Android Oreo 可下载字体
- linux 创建新用户
- 最长公共子序列(动态规划)
- 卫星云图 | 记录汤加海底火山爆发,如同蘑菇云升起
- 常用简单算法-质因数分解
- sunpinyin uint.h
- html中%3cp%3e中加空格,html中空白空格怎么打?
- C++:共享指针shared_ptr的理解与应用
- java计算机毕业设计精准扶贫项目管理系统源码+mysql数据库+系统+lw文档+部署
- 小程序源码:2022虎年背景全新UI头像框制作