实在不知道标题起什么主题好,这篇文章是一个对前一篇文章的填坑,也是开的新坑。我曾经说过要开一个Android的交互、动效或者设计的坑。由于本人比较菜,但是又比较感兴趣,这个系列也算是对Android交互的学习之旅,边学边做笔记。
看这篇文章之前建议先看看前一篇文章:
【Android爬坑周记】用SplashScreen做一个会动的开屏!
AVD动画开屏效果
(为了方便展示,我延长了几秒钟的开屏动画展示时间)
SplashScreen
Android12以上加入了SplashScreen,官方的开屏动画!因此我在【小鹅事务所】加入了开屏动画。SplashScreen仅在冷启动或者温启动的时候会展示,支持AVD动画、帧动画,上篇文章我使用了帧动画来实现,这篇文章我将展示如何使用AVD动画实现开屏动画。
动画制作
使用After Effects(AE)制作动画会比较方便,因此本人使用AE来完成这个开屏动画。加上Bodymovin插件可以直接将AE的合成导出为Json动画文件或者AVD动画文件。Json动画文件可以配合Lottie使用,而AVD即Animated Vector Drawable,Android的矢量动画。
关于动画是如何制作的,此处就不赘述了,无非是Key关键帧的苦力活。
不过需要注意的是:每一个矢量形状都建议都只有一个内容(用钢笔的时候不要手抖多点一个点),否则可能导出来的AVD动画文件无法正常使用!!(Json不影响)
导出的时候使用Bodymovin来导出,Bodymovin下载地址:aescripts.com/bodymovin/。下载好之后点击窗口 → 扩展 → Bodymovin就可以使用啦!
一开始点进这个界面,Render按钮是灰色的,需要做三件事情:
-
找到并选择需要渲染的合成
-
点击最右边的三个点,选择导出的路径
-
点击点击设置按钮,找到AVD选项,选择并保存。
此时回到外面Render按钮就可以点击了,点击就可以渲染了。
在刚刚选择的路径找到渲染完成的AVD,直接拖进Android项目的drawable文件夹中,如下图。
代码非常长,也不易读,按Ctrl + Alt + L(CMD + option + L)格式化之后,会看到非常多的objectAnimator或者path之类的代码,实际上在Android读完这个文件之后会生成相应的动画代码,并在跑起来的时候运行对应的动画代码。
在themes文件中为SplashScreen设置对应的动画文件,该Theme需要继承Theme.SplashScreen。
<style name="Theme.AppSplashScreen" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/primary_color</item>
<item name="windowSplashScreenAnimatedIcon">@drawable/anim_little_goose</item>
<item name="windowSplashScreenAnimationDuration">3000</item>
<item name="postSplashScreenTheme">@style/Theme.Account</item>
</style>
在Manifest中为启动Activity设置为该Theme。
<activity
android:name=".ui.MainActivity"
android:theme="@style/Theme.AppSplashScreen"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
在该Activity中调用installSplashScreen
,setKeepOnScreenCondition
可以控制动画展示事件,例如需要初始化完数据再进入APP,可以设置一个isAppInit标志,在初始化完设置为true就好。
override fun onCreate(savedInstanceState: Bundle?) {
val splashScreen = installSplashScreen()
splashScreen.setKeepOnScreenCondition { !isAppInit }
super.onCreate(savedInstanceState)
initView()
}
运行一下吧,AVD动画非常丝滑!快喊动效设计为APP制作一个丝滑的开屏动画吧!
总结
这篇文章不是入门文章,只是一次设计/开发工作流的初探,并没有写得太细。targetSdk 32以上的APP也比较少,能用上SplashScreen开屏动画的APP也比较少。
只要程序员掌握一点设计、设计掌握一点程序,沟通起来也会方便很多!例如文章中的用AE制作AVD动画的一个坑也是在探索过程中发现的,如果在实际工作中遇到的话,大家对对方工作都不了解,就可能会讨论换一种方式来实现了(MP4动画啥的),这对性能其实是更不友好的。某个UI设计软件甚至可以直接导出Android Compose界面代码,后续我可能会试一下效果。