【Android爬坑月记】用一个开屏动画来看动效/开发工作流!(AVD版)

1,756 阅读3分钟

实在不知道标题起什么主题好,这篇文章是一个对前一篇文章的填坑,也是开的新坑。我曾经说过要开一个Android的交互、动效或者设计的坑。由于本人比较菜,但是又比较感兴趣,这个系列也算是对Android交互的学习之旅,边学边做笔记。

看这篇文章之前建议先看看前一篇文章:

【Android爬坑周记】用SplashScreen做一个会动的开屏!

AVD动画开屏效果

(为了方便展示,我延长了几秒钟的开屏动画展示时间)

SplashAnim_TeY1fzwseF.gif

SplashScreen

Android12以上加入了SplashScreen,官方的开屏动画!因此我在【小鹅事务所】加入了开屏动画。SplashScreen仅在冷启动或者温启动的时候会展示,支持AVD动画、帧动画,上篇文章我使用了帧动画来实现,这篇文章我将展示如何使用AVD动画实现开屏动画。

动画制作

使用After Effects(AE)制作动画会比较方便,因此本人使用AE来完成这个开屏动画。加上Bodymovin插件可以直接将AE的合成导出为Json动画文件或者AVD动画文件。Json动画文件可以配合Lottie使用,而AVD即Animated Vector Drawable,Android的矢量动画。

image_CgSvGQpQVZ.png

关于动画是如何制作的,此处就不赘述了,无非是Key关键帧的苦力活。

不过需要注意的是:每一个矢量形状都建议都只有一个内容(用钢笔的时候不要手抖多点一个点),否则可能导出来的AVD动画文件无法正常使用!!(Json不影响)

image_w7iBsS5g1-.png

导出的时候使用Bodymovin来导出,Bodymovin下载地址:aescripts.com/bodymovin/。下载好之后点击窗口 → 扩展 → Bodymovin就可以使用啦!

image_uhqOPesHL9.png

一开始点进这个界面,Render按钮是灰色的,需要做三件事情:

  • 找到并选择需要渲染的合成

  • 点击最右边的三个点,选择导出的路径

  • 点击点击设置按钮,找到AVD选项,选择并保存。

image_Co4IztuQDQ.png

此时回到外面Render按钮就可以点击了,点击就可以渲染了。

在刚刚选择的路径找到渲染完成的AVD,直接拖进Android项目的drawable文件夹中,如下图。

image_0JWbTnio4A.png

代码非常长,也不易读,按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中调用installSplashScreensetKeepOnScreenCondition可以控制动画展示事件,例如需要初始化完数据再进入APP,可以设置一个isAppInit标志,在初始化完设置为true就好。

    override fun onCreate(savedInstanceState: Bundle?) {
        val splashScreen = installSplashScreen()
        splashScreen.setKeepOnScreenCondition { !isAppInit }
        super.onCreate(savedInstanceState)
        initView()
    }

运行一下吧,AVD动画非常丝滑!快喊动效设计为APP制作一个丝滑的开屏动画吧!

SplashAnim_WUL7wRRbHB.gif

总结

这篇文章不是入门文章,只是一次设计/开发工作流的初探,并没有写得太细。targetSdk 32以上的APP也比较少,能用上SplashScreen开屏动画的APP也比较少。

只要程序员掌握一点设计、设计掌握一点程序,沟通起来也会方便很多!例如文章中的用AE制作AVD动画的一个坑也是在探索过程中发现的,如果在实际工作中遇到的话,大家对对方工作都不了解,就可能会讨论换一种方式来实现了(MP4动画啥的),这对性能其实是更不友好的。某个UI设计软件甚至可以直接导出Android Compose界面代码,后续我可能会试一下效果。