Android 12上全新的应用启动画面,还不适配一下?(2)

简介: Android 12上全新的应用启动画面,还不适配一下?(2)

3 定制退出效果

当App的第一帧开始描画,SplashScreen将会退出展示。为了丰富退出环节的体验,系统也开放了相应的入口,即画面退出的回调。在这个回调里可以开始退出效果的定制,包括整体的退出动画和图标的退出动画。

3.1 监听启动画面的退出

向SplashScreen注册OnExitAnimationListener接口即可监听启动画面的退出。

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    customizeSplashScreenExit()
}
private fun customizeSplashScreenExit() {
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        Log.d("Splash", "SplashScreen#onSplashScreenExit view:$splashScreenView")
        sleep(1000)
        Log.d("Splash", "SplashScreen#remove after sleeping")
        splashScreenView.remove()
    }
}

可以看到启动画面展示之后,不作定制的默认情况下就是全屏一下再消失。

image.gif

日志如下:

Splash  : Activity:com.example.splash.MainActivity@f70c0d0 Activity:com.example.splash.MainActivity@f70c0d0 onCreate
Splash  : Activity:com.example.splash.MainActivity@f70c0d0 onStart
Splash  : Activity:com.example.splash.MainActivity@f70c0d0 onResume
Splash  : SplashScreen#onSplashScreenExit view:android.window.SplashScreenView{18339d5 V.E...... ........ 0,0-1080,2280}
Splash  : SplashScreen#remove after sleeping

一定记得调用remove及时移除启动画面,否则SplashScreen会长时间盖在主画面上,大概在5s左右。

另外,回调的注册需要放在Activity#onResume前,不然监听不到。

3.2 定制整体的退出动画

可以给启动画面的整体设置TRANSLATESCALEROTATEALPHA等各种动画,使得退出更加自然。

比如给SplashScreen加上一个缩小出屏幕的动画。

private fun customizeSplashScreenExit() {
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        showSplashExitAnimator(splashScreenView)
    }
}
private fun showSplashExitAnimator(splashScreenView: SplashScreenView) {
    val path = Path()
    path.moveTo(1.0f, 1.0f)
    path.lineTo(0f, 0f)
    val scaleOut = ObjectAnimator.ofFloat(
        splashScreenView,
        View.SCALE_X,
        View.SCALE_Y,
        path
    )
    ...
    scaleOut.doOnEnd {
        splashScreenView.remove()
    }
    scaleOut.start()
}

image.gif

又或者从上方平移出屏幕的动画。

private fun showSplashExitAnimator(splashScreenView: SplashScreenView) {
    val slideUp = ObjectAnimator.ofFloat(
        splashScreenView,
        View.TRANSLATION_Y,
        0f,
        -splashScreenView.height.toFloat()
    )
    ...
    slideUp.start()
}

b41705914ab149ed906428aa9032a946.gif

3.3 定制图标的退出动画

当然也可以给图标单独加上动画,比如将Icon上滑。

private fun customizeSplashScreenExit() {
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        showSplashIconExitAnimator(splashScreenView)
    }
}
private fun showSplashIconExitAnimator(splashScreenView: SplashScreenView) {
    val iconView = splashScreenView.iconView ?: return
    val slideUp = ObjectAnimator.ofFloat(
        splashScreenView.iconView,
        View.TRANSLATION_Y,
        0f,
        -iconView.height * 2.toFloat()
    )
    ...
    slideUp.start()
}

image.gif

3.4 退出动画的适当时长

针对退出动画的定制官方还有一段补充说明。

By the start of this callback, the animated vector drawable on the splash screen has begun. Depending on the duration of the app launch, the drawable might be in the middle of its animation. Use SplashScreenView.getIconAnimationStart to know when the animation started. You can calculate the remaining duration of the icon animation.

简言之,退出画面回调的时候Icon动画可能进行到了一半,最好计算Icon动画的剩余时长来执行退出动画。


原因在于设备性能会影响App描画的早晚,而第一帧描画的时候上述的退出回调将被执行。也就是说,性能的优劣会影响启动画面退出的回调时机。


性能好的话,画面退出的回调较早。此时Icon动画尚在进行当中,可以将Icon动画的预设时长的剩余时间交接给退出效果来执行

性能差的话,画面退出的回调稍晚。Icon动画早已经结束,为了让用户尽早看到画面内容,就不该再执行退出效果了而是直接退出

不能为了展示效果而让用户久等,否则会弄巧成拙。


借助SplashScreenView的iconAnimationStartMillis和iconAnimationDurationMillis方法可以推算出Icon动画的剩余时长。


*模拟器上运行的缘故,大部分时候我的Demo在启动画面退出的时候Icon动画都结束了,少部分情况下动画还剩余一点时间,可能实机的情况会不一样。

private fun showSplashIconExitAnimator(splashScreenView: SplashScreenView) {
    slideUp.duration = getRemainingDuration(splashScreenView)
    ...
}
fun getRemainingDuration(splashScreenView: SplashScreenView): Long  {
    // 取得Icon动画的时长
    val animationDuration = splashScreenView.iconAnimationDurationMillis
    // 取得Icon动画的开始时刻
    val animationStart = splashScreenView.iconAnimationStartMillis
    // 再结合当前时间计算出Icon动画的剩余时长
    // 1. 时长为负则固定为0ms即直接退出
    // 2. 时长为正则采用该时长执行退出动画
    return if (animationDuration != null && animationStart != null) {
        (animationDuration - SystemClock.uptimeMillis() + animationStart)
        .coerceAtLeast(0L)
    } else {
        0L
    }
}

4 SplashScreen相关API

4.1 类和接口

1672148933607.png

4.2 属性

1672148946640.png

注意:windowSplashscreenContent是8.0版本新增的定制启动画面的属性,自12开始废弃了,使用windowSplashscreenAnimatedIcon替代

4.3 SplashScreen的构成

20200308234636925.jpg

5 注意

需要尝鲜SplashScreen的话,需要在Android 12上开发,并做如下必要配置。


compileSdkVersion和targetSdkVersion声明为S


android:exported="true",明示声明启动画面的可见性,否则会安装失败


另外启动页的Icon无论是静态的还是动画效果的,都应遵循Adaptive Icon的规范,不然Icon会发生变形。

6 结语

Android 12上全新的SplashScreen API非常简单清晰,整个定制过程非常流畅!

相信在全新的API加持下,APP的启动画面可以迸发出更多特色的、好玩的创意。

快快尝试起来,给你的用户留下第一眼的好印象~

本文DEMO

https://github.com/ellisonchan/SplashScreen

参考资料

欢迎体验 | Android 12 开发者预览版 3

SplashScreen的官方文档

SplashScreen API

SplashScreen相关attr

推荐阅读

全面复盘Android开发者容易忽视的Backup功能

Jetpack Hilt有哪些改善又有哪些限制?

Dagger2和它在SystemUI上的应用

相关文章
|
5月前
|
存储 Android开发
如何查看Flutter应用在Android设备上已被撤销的权限?
如何查看Flutter应用在Android设备上已被撤销的权限?
269 64
|
7月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
452 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
7月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
181 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
250 14
|
9月前
|
Java Linux 数据库
探索安卓开发:打造你的第一款应用
在数字时代的浪潮中,每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界,通过浅显易懂的语言和实际代码示例,引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇门,让你的创意和技术一起飞扬。
184 13
|
9月前
|
搜索推荐 前端开发 测试技术
打造个性化安卓应用:从设计到开发的全面指南
在这个数字时代,拥有一个定制的移动应用不仅是一种趋势,更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤,从构思你的应用理念开始,直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你提供必要的工具和知识,帮助你将创意转化为现实。
|
9月前
|
Java Android开发 开发者
探索安卓开发:构建你的第一个“Hello World”应用
在安卓开发的浩瀚海洋中,每个新手都渴望扬帆起航。本文将作为你的指南针,引领你通过创建一个简单的“Hello World”应用,迈出安卓开发的第一步。我们将一起搭建开发环境、了解基本概念,并编写第一行代码。就像印度圣雄甘地所说:“你必须成为你希望在世界上看到的改变。”让我们一起开始这段旅程,成为我们想要见到的开发者吧!
188 0
|
存储 安全 数据管理
拖不得了,Android11真的来了,最全适配实践指南奉上(下)
没错!Android 11(version 30,Andorid R) 正式发布了!看到这个新闻我知道我不能再拖了,再不好好准备好迎接Android11的到来,到时候迎接我的就是客户的指责,甚至老板的一封休书了 😂
774 0
拖不得了,Android11真的来了,最全适配实践指南奉上(下)
|
存储 缓存 5G
拖不得了,Android11真的来了,最全适配实践指南奉上(上)
没错!Android 11(version 30,Andorid R) 正式发布了!看到这个新闻我知道我不能再拖了,再不好好准备好迎接Android11的到来,到时候迎接我的就是客户的指责,甚至老板的一封休书了 😂
1076 0
拖不得了,Android11真的来了,最全适配实践指南奉上(上)
|
8天前
|
开发工具 Android开发
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡
133 11
X Android SDK file not found: adb.安卓开发常见问题-Android SDK 缺少 `adb`(Android Debug Bridge)-优雅草卓伊凡

热门文章

最新文章