Android之Compose页面切换动画介绍

目录
  • 前因后果
  • 开始尝试
  • 开始撸码
  • 仓促的结尾

前因后果

Compose 正式版已经发布了一个多月了,从 Compose beta 版本发布之后各大网站中热度就一直不减,官方也一直在为开发者们推出学习 Compose 的文章,更加说明了 Android 开发的未来趋势。

在之前我写了 Compose 版本的玩安卓,当然也有 MVVM 版本的,只是不同分支而已,这是 Github地址:https://github.com/zhujiang521/PlayAndroid

但之前一直存在着一个问题,就是页面切换的时候没有动画,也不能说没有动画,可以通过 Crossfade 来实现两个页面之间的淡入淡出,但这就够了吗?完全不够啊!咱们的产品和UI第一个不答应,只是淡入淡出是绝对不行的!

开始尝试

其实 Compose 中的 Navigation 就是之前 Jetpack 中的 Navigation 改的,所以之前的 api 还是存在的,

然后用上试试呗!

navController.navigate(route) {
    anim {
        enter = R.anim.in_from_right
        exit = R.anim.out_to_left
        popEnter = R.anim.in_from_right
        popExit = R.anim.out_to_left
    }
}

然后就有了上面的代码进行尝试,其实写的时候也想过不行,因为在 Compose 中动画有自己的一套实现方式,并不是像之前那样放在 anim 文件夹下的 xml 文件,但还是抱着试一试的态度,最后发现。。。果然不行。。。

于是开始一顿乱找,后来发现在官方文档中已经写明了:

注意anim 块不能与 Navigation Compose 一起使用。系统会在此功能请求中跟踪 Navigation Compose 中的转换动画。

然后就没有然后了,就开始等。。。。这一等就是好久。(其实这篇文章是之前写的,但一直没发)

终于在前段时间,这个问题有了眉目,Google 并没有将这个功能放到 Navigation 库中,而是重新创建了一个库:navigation-animation,使用的时候同时引入即可进行使用。

开始撸码

首先需要做的肯定是添加依赖:

现在应用级的 build.gradle 中添加:

repositories {
    mavenCentral()
}

然后在 Module 级的 build.gradle 中添加:

// Navigation 动画
implementation "com.google.accompanist:accompanist-navigation-animation:$accompanist_version"

接下来需要做的是迁移之前写的 Navigation 的代码,先来看看之前的写法吧:

@ExperimentalPagingApi
@Composable
fun NavGraph(
    startDestination: String = MainDestinations.HOME_PAGE_ROUTE
) {
    val navController = rememberNavController()
    val actions = remember(navController) { MainActions(navController) }
    NavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        composable(MainDestinations.HOME_PAGE_ROUTE) {
            Home(actions)
        }
    }
}

需要做的迁移有:

替换rememberNavController()rememberAnimatedNavController()

替换NavHostAnimatedNavHost

替换import androidx.navigation.compose.navigationimport com.google.accompanist.navigation.animation.navigation

替换import androidx.navigation.compose.composableimport com.google.accompanist.navigation.animation.composable

那就来吧:

@OptIn(ExperimentalAnimationApi::class, ExperimentalPagerApi::class)
@Composable
fun NavGraph(
    startDestination: String = PlayDestinations.HOME_PAGE_ROUTE,
) {
    val navController = rememberAnimatedNavController()
    val actions = remember(navController) { PlayActions(navController) }
    AnimatedNavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        setComposable(PlayDestinations.HOME_PAGE_ROUTE) {
            WeatherViewPager(
                toCityList = actions.toCityList,
                toWeatherList = actions.toWeatherList
            )
        }
    }
}

下面就来看看如何使用这个库为页面之间切换添加动画吧:

@ExperimentalAnimationApi
public fun NavGraphBuilder.navigation(
    startDestination: String,
    route: String,
    enterTransition: (AnimatedContentScope<NavBackStackEntry>.() -> EnterTransition?)? = null,
    exitTransition: (AnimatedContentScope<NavBackStackEntry>.() -> ExitTransition?)? = null,
    popEnterTransition: (
        AnimatedContentScope<NavBackStackEntry>.() -> EnterTransition?
    )? = enterTransition,
    popExitTransition: (
        AnimatedContentScope<NavBackStackEntry>.() -> ExitTransition?
    )? = exitTransition,
    builder: NavGraphBuilder.() -> Unit
)

上面这段代码是 navigation-animation 库中的源码,可以看到除了之前 Navigation 库中的一些参数外还多了几个参数用来设置动画,来具体看看吧:

**enterTransition:**在此 NavGraph 中定义目的地的输入转换动画

**exitTransition:**在此 NavGraph 中为目的地定义退出转换动画

**popEnterTransition:**在此 NavGraph 中定义目的地的弹出输入转换动画

**popExitTransition:**在此 NavGraph 中为目的地定义弹出退出转换动画

再来看看具体使用吧:

composable(
    route = route,
    arguments = arguments,
    deepLinks = deepLinks,
    enterTransition = {
        expandVertically(animationSpec = tween(300))
    },
    exitTransition = {
        shrinkOut(animationSpec = tween(300))
    },
    popEnterTransition = {
        expandVertically(animationSpec = tween(300))
    },
    popExitTransition = {
        shrinkOut(animationSpec = tween(300))
    },
    content = content,
)

OK,这就可以了。大家可以多种组合动画尝试下,可以实现各种你想要的动画。

仓促的结尾

到此这篇关于Android之Compose页面切换动画介绍的文章就介绍到这了,更多相关Android Compose页面切换动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android Compose实现伸缩ToolBar的思路详解

    目录 ScrollableAppBar 效果图 主要思路 布局预览 实现过程 ScrollableAppBar 效果图 当列表向上移动时,会先带动ToolBar向上位移,等ToolBar向上移动到最大位移量时列表向上滑动 当列表向下移动时,会先带动ToolBar向下位移,等ToolBar向下移动到最大位移量时列表向下滑动 主要思路 布局预览 伸缩前布局: 伸缩后布局: 实现过程 布局实现 首先我们要定义两个尺寸变量 // 应用栏高度 private val toolBarHeight = 56.

  • Android Mms之:深入理解Compose

    Mms中的ComposeMessageActivity(以下简称Composer)是整个Mms中最重要的一个组件,它负责编辑信息,发送信息,管理信息,接收信息,与外部应用接口.在Mms内部与Composer关联的类和组件特别多,几乎所有的类和组件都与Composer有关联,关于信息的所有操作流程都起始于Composer:在外部Composer也是公开的接口,能够处理Intent.ACTION_SEND和Intent.ACTION_SENDTO以及文件类型为audio/*,image/*,vide

  • Android Compose实现底部按钮以及首页内容详细过程第1/2页

    目录 前言 Column.Row.ConstraintLayout布局先知 Column纵向排列布局 Row横向排列布局 ConstraintLayout 约束布局 Modifier的简单使用 底部导航栏的实现 首页内容的实现 Banner的实现 首页ViewModel 前言 compose作为Android现在主推的UI框架,各种文章铺天盖地的席卷而来,作为一名Android开发人员也是很有必要的学习一下了,这里就使用wanandroid的开放api来编写一个compose版本的玩安卓客户端,

  • Android之Compose页面切换动画介绍

    目录 前因后果 开始尝试 开始撸码 仓促的结尾 前因后果 Compose 正式版已经发布了一个多月了,从 Compose beta 版本发布之后各大网站中热度就一直不减,官方也一直在为开发者们推出学习 Compose 的文章,更加说明了 Android 开发的未来趋势. 在之前我写了 Compose 版本的玩安卓,当然也有 MVVM 版本的,只是不同分支而已,这是 Github地址:https://github.com/zhujiang521/PlayAndroid 但之前一直存在着一个问题,就

  • Android实现移动小球和CircularReveal页面切换动画实例代码

    前言 本文主要给大家介绍了关于Android如何实现移动小球和CircularReveal页面切换动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图如下 是在fragment中跳转activity实现的效果,fragment跳fragment,activity跳activity类似~~ 实现过程 重写FloatingActionButton的onTouchListener()方法,使小球可以移动,并判断边界 点击fab时记录坐标传到下一个页面,在下一个页面展

  • Android Flutter实现页面切换转场动画效果

    目录 前言 Hero 动画过程 Hero 基础示例 总结 前言 写了一篇基础的性能优化的内容,继续我们的动画相关的介绍.今天的主角是英雄 —— Hero 组件.Hero 组件非常适合从列表.概览页切换到详情页转场动画场合.因为可以将两个页面的组件串起来动画,体验上会觉得整个操作的连贯性非常好.下面是我们这篇要做的一个效果. 屏幕录制2021-11-09 下午9.39.49.gif Hero 动画过程 Hero 本质是是在不同的路由页面做了一个中转层,然后通过动画完成过渡,下面用4张图是官方演示的

  • Android编程之页面切换测试实例

    本文实例讲述了Android编程之页面切换测试.分享给大家供大家参考.具体分析如下: 一.软件平台: win7 + eclipse + sdk 二.设计思路: 两个页面:mian和ok,每个页面上有一个按键,点击则可以互相切换 三.源代码: main.xml源代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr

  • VUE单页面切换动画代码(全网最好的切换效果)

    我就废话不多说了,直接上代码吧! // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let dir

  • vue实现app页面切换动画效果实例

    因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用 在router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({

  • Android实现带页面切换的锁屏功能

    一个简单的Android 锁屏小Demo,可以设置左滑有滑,我简单的了解一下自定义锁屏,顺便总结了一下思路顺便画个图帮助理解. 我的效果图 代码思路 锁屏分为两块,一块是UI(自定义布局)另一块这就是服务了 自定义锁屏布局 ACTION_DOWN按下:中间的ImageView会变成另一种形态 ACTION_MOVE移动: 移动到左/右边,左/右ImageView形态也要发生变化, ACTION_UP抬起:判断滑动到左/右那边,或者回到最初位置 *服务 @Override public void

  • Android使用Fragment打造万能页面切换框架

    首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要activity返回结果,则调用startActivityForResult方法,在onActivityResult方法中获得返回结果.此外,每一个要展示的activity需要在AndroidManifest.xml文件中注册.而且,如果在某些特定的情况下(比如65536方法数爆炸)要动态加载dex

  • jQuery实现切换页面过渡动画效果

    直接为大家介绍制作过程,希望大家可以喜欢. HTML结构 该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条. <main> <div class="cd-index cd-main-content"> <div> <h1>Page Transition</

  • Vue 页面切换效果之 BubbleTransition(推荐)

    CodePen 地址 前端使用 SPA 之后,能获得更多的控制权,比如页面切换动画,使用后端页面我们可能做不了上面的效果,或者做出来会出现明显的闪屏.因为所有资源都需要重新加载. 今天使用 vue,vue-router,animejs 来讲解如何上面的效果是如何实现的. 步骤 点击菜单,生成 Bubble,开始执行入场动画 页面跳转 执行退场动画 函数式调用组件 我希望效果是通过一个对象去调用,而不是 v-show, v-if 之类的指令,并且为了保持统一,仍然使用 Vue 来写组件.我通常会用

随机推荐