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
共同学习,写下你的评论
评论加载中...
作者其他优质文章