React Native 实现 App Store Today页效果

最新推荐文章于 2024-05-23 09:44:10 发布

大前端码农

最新推荐文章于 2024-05-23 09:44:10 发布

阅读量404

点赞数 1

本文链接：https://blog.csdn.net/stone805/article/details/96493260

版权

本文介绍如何使用React Native实现类似苹果App Store Today页面的动画效果，包括打开和关闭详情页的动画。通过静态UI布局，利用共享UI元素进行动画处理，实现了卡片动态效果。详细讲解了步骤和关键代码，包括图片、文字和关闭按钮的动画实现。

摘要由CSDN通过智能技术生成

React Native 动效系列

欢迎大家Star我们的仓库react-native-showcase，记录了各种React Native的交互、动画效果。

本文介绍如何实现利用共享UI元素的动画，实现类似苹果App Store的Today页面的动画效果，我们先看最终的效果：

在这里插入图片描述

第一步：完成静态UI布局

UI布局很简单，就是一个普通的ScrollView，我们直接看代码：

<ScrollView style={
   {
    flex: 1,  paddingTop: 20, }}>
    {
   
        Images.map((image, index) => {
   
            return (
                <View style={
   {
    width: SCREEN_WIDTH, height: SCREEN_HEIGHT - 150, padding: 15 }}>
                    <Image
                        source={
   image}
                        style={
   {
   
                            height: null,
                            width: null,
                            borderRadius: 20,
                            flex: 1,
                            resizeMode: 'cover',
                        }}
                    />
                </View>
            );
        })
    }
</ScrollView>

也可以直接打开expo project查看第一步效果。

第二步：完成打开详情页动画

在开始写代码之前我们先分先一下动画的几个特点：

首先我们要明确从列表"页"到详情"页"，其实并不是真正意义的页面跳转（至少现有的无论是react-navigation还是react-native-navigation等都无法实现这种复用页面UI元素的跳转动画），因此所谓的列表"页"、详情"页"只是同一个页面的两种不同状态的View

有了上面的结论，我们在自己分析动画效果：其实整个打开详情动画有两部分组成：

  1. 详情"页"图片从当前点击位置和大小移动到最终顶部位置
  2. 在此过程中图片介绍文案位置从屏幕视觉外移动到最终位置

下面我们来看看具体代码如何实现：

首先完成详情"页"布局:

<ScrollView style={
   {
    flex: 1,  paddingTop: 20, }}>
    ...
</ScrollView>
<View style={
   StyleSheet.absoluteFill}>
    <View style={
   {
    flex: 2 }}>
    <Image
        source={