为了账号安全,请及时绑定邮箱和手机立即绑定

用Lottie把启动界面动起来

标签:
Android

Lottie介绍

Lottie可以把Adobe After Effects制作的动画导出为JSON,然后能在Android 、IOS、WEB上播放。
官网:http://airbnb.io/lottie/

使用示例

我们尝试把它应用在启动图上,告别一成不变的图片。例如下面这个效果:

这个是未处理的效果

这个是用lottie的效果


我们可以看到,画面生动起来了。动画一共5秒,做了3个效果:
一、文字淡化出现(从1秒后开始淡化显示)
二、落叶(从上往下掉落,加入倾斜仿风吹的效果)
三、云朵移动(天空上的白云从左边移动到右边)

下载AE

下载地址:https://bfile.3987.com/bigfile/aftereffectscc2017_lsb_3987.rar
这个是绿色版的,直接解压就能运行啦。

下载插件

先下载bodymovin.zxp插件
下载地址:https://raw.githubusercontent.com/bigxixi/bodymovin/master/zxp_cn/bodymovin462cn.zxp
然后把它解压到电脑的这个目录下:
MAC:
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\bodymovin


bodymovin插件位置

配置注册表

MAC:
打开文件 ~/Library/Preferences/com.adobe.CSXS.6.plist ( com.adobe.CSXS.???.plist 其中问号根据 AE 版本不同会有不同) 新加一行,键(key)为 PlayerDebugMode, 类型为字符串(String), 值为 1 。

WINDOWS:
按win+R 打开运行,然后输入:regedit ,就打开了注册表。
找到注册表键值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一个键值名为 PlayerDebugMode, 类型为字符串(String), 值为 1 。

注册表配置

到这里,所需要的工具就已经搞完了,下面开始制作动画。

动画制作

一、把文件导入AE


把背景图、落叶、云朵、文字四个素材导入AE,并且设置工程的长度为5秒。

二、文字淡化出现


把文字的素材拉到背景图上面,然后点击变换,选择不透明度,移动时间轴到1s的时候,设置不透明度为0,然后拖动时间轴到3s,设置不透明度为100

三、落叶


把落叶的素材拖到文字层上面,点击变换,在0s的时候点击位置设立关键帧,然后把落叶的位置调到顶端,之后把时间轴拖到5s,再设置关键帧并把落叶的位置调到底端。最后,加上水平偏移,模仿风吹的效果。在3s和5s的时候设立关键帧,然后调整位置x的坐标。

四、白云


把白云的素材放在背景层上面,然后复制一层背景放在白云上面,因为白云移动不能在树的前面显示,所以要用钢笔工具,把树的部分进行遮罩。然后选择白云的素材,点击变换,在1s的时候设立关键帧,并设置位置在最左边,最后移动到5s设置关键帧并设置位置在最右边。

五、输出动画文件


制作完成后,点击窗口,扩展,bodymovin,然后点击设置按钮,选择下面的演示模式(输出后会有一个demo.html文件,可以直接打开预览效果),设置后,点击渲染。成功的话,会生成一个image文件夹和data.json文件,把这两个文件放到android或者ios,或者web都可以直接使用了。

Android端使用

在app中添加以下依赖

dependencies {  
  compile 'com.airbnb.android:lottie:2.1.2'}

1、把image文件夹和data.json文件放在assets文件夹里面,然后在布局声明,最后在代码调用

lottieAnimationView = (LottieAnimationView) findViewById(R.id.animation_view);
lottieAnimationView.setImageAssetsFolder("images");
lottieAnimationView.setAnimation("data.json");
lottieAnimationView.playAnimation();

2、如果是想下载的方式,然后放在内存卡的话(一般都是这样用,因为可以随时更改动画),把下载的文件解压到内存卡,然后把路径传进去

        File jsonFile = new File(getIntent().getStringExtra(JSON_PATH));
        File imagesDir = new File(getIntent().getStringExtra(IMAGES_PATH));
        FileInputStream fis = null;        if (jsonFile.exists()) {            try {
                fis = new FileInputStream(jsonFile);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }        if (fis == null || !imagesDir.exists()) {
            Toast.makeText(FangShengAnimActivity.this, "动画资源不存在", Toast.LENGTH_SHORT).show();
            finish();            return;
        }        final String absolutePath = imagesDir.getAbsolutePath();
        lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() {            @Override
            public Bitmap fetchBitmap(LottieImageAsset asset) {
                BitmapFactory.Options opts = new BitmapFactory.Options();
                opts.inScaled = true;
                opts.inDensity = 160;                return BitmapFactory.decodeFile(absolutePath + File.separator + asset.getFileName(), opts);
            }
        });
        LottieComposition.Factory.fromInputStream(this, fis, new OnCompositionLoadedListener() {            @Override
            public void onCompositionLoaded(@Nullable LottieComposition composition) {
                lottieAnimationView.setComposition(composition);
                lottieAnimationView.playAnimation();
            }
        });

IOS端和web端使用

这里不介绍啦,可以去官网看看详细用法:
IOS:https://github.com/airbnb/lottie-ios
web:https://github.com/airbnb/lottie-react-native

总结

有人问,那个启动图的,用gif也能实现类似的效果啊。可以是可以,但gif的体积一般比较大、而且大尺寸的gif可能导致崩溃,而且画质肯定是不如lottie好的。lottie的画质和图片的画质是一样的,而且体积就是图片的体积,加上一个json文件(几十kb)就能实现动画效果了。lottie给我们提供了一个工具,只要我们花点创意,就能做出生动的动画效果了。lottie的使用,不仅仅是应用在启动图那么局限,可以出现在:抽奖画面、加载画面、摇签画面、灵符开光等等都是可以的。发动你的思维,让app更多地方用上lottie,打造一个活泼生动的app吧。



作者:在寻找雪见的景天
链接:https://www.jianshu.com/p/d0f4c823fa06


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消