android ae动画教程,AE动画转Web代码工具指北-Lottie

简介

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。

简单来说，Lottie就是一个可以将AE动画转成可运行在IOS、Android、Web、React Native上的AE插件。

使用

工具

使用前请确保已安装这以下工具。

其他。

使用步骤

安装并解压bodymovin

打开AE，添加bodymovin扩展

导出data.json文件

API

由bodymovin导出的data.json实际就是动画的数据文件，我们引入的bodymovin.js库会对其做相应的解析。接下来我们只需要添加简单的初始化代码就可以在运行代码看到相应的动画效果了。

以下是最常用的api

1. 初始化

let animation = bodymovin.loadAnimation({

animationData, // [必须] data.json文件

path, // data.json文件路径(animationData/path选其一传入即可)

container，// [必须] 父容器

renderer, // [必须] 渲染方式

loop,

autoplay

})

2. 暂停/停止/播放

bodymovin.play()

bodymovin.pause()

bodymovin.stop() // 回到第0帧

3. 跳转之某帧并播放

animation.gotoAndStop(time)

OR animation.gotoAndStop(frame)

----

animation.gotoAndPlay(time)

OR animation.gotoAndPlay(frame)

4. 设置fp

animation.setSubframe()

// true: 使用本地环境的fps [默认]

// false: 使用ae原本的fps

5. 事件监听

animation.onComplete = function () {} // 动画结束

animation.onLoopComplete = function () {} // 当前循环结束

// 使用addEventListener方式

animation.addEventListener('complete', function () {})

animation.addEventListener('loopComplete', function () {})

一般来说以上的api即可满足大部分的动画展示需求了。更详细内容可参考官网～

Bodymovin库

最后再分项目框架提供两个bodymovin的库

android ae动画教程,AE动画转Web代码工具指北-Lottie相关推荐

Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators（1）
Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators(1) RecyclerView是比ListView和GridView更为强大的布局视图, ...
Matchvs系列教程之利用微信web开发者工具开发联网游戏
除了使用Cocos Creator与Egert等主流前端引擎开发外,眼下也有不少开发者选择使用微信web开发者工具,今天我们就教大家如何使用Matchvs SDK开发一款标准的联网游戏. 目录新建游 ...
php集成jpush教程,Laravel 集成 JPush 极光推送指北
我是一个 Laravel 小白,我是一个 Laravel 小白,我是一个 Laravel 小白(默念三遍再往下读,如果非小白就不用看了). Laravel 使用 Composer 来管理代码依赖.所以 ...
Android实战简易教程-第五十枪（工具类的测试）
在开发中,为了提高开发效率,我们一般会自定义自己的工具类.为了保证项目的可靠性,在将工具类引入项目之前,我们一般都会对工具类进行单元测试,下面我们通过一个实例看一下如何搭建测试环境. 1.首先自定义一 ...
WarGame系列之Natas(Web安全)通关指北(初级篇0-10)详细版
*OverTheWire社区是一个提供wargame的网站,可以帮助安全爱好者以趣味的方式进行学习.练习安全知识. 本系列文章旨在记录笔者通关思路,其中解题思路也会参考借鉴网上已有文章,在此感谢相关作 ...
db2导入发生错误显示不是绝对路径_AE入门教程: ae模板的导入与使用方法
AE是一个灵活的基于层的2D和3D后期合成软件,包含了上百种特效及预置动画效果.很多想要自学AE的朋友都苦于没有详细的入门教程,今天本站就为大家带来AE入门教程: ae模板的导入与使用方法. Mac版 ...
android ae动画教程,【博文精选】使用After Effects输出代码原生动画
由于技术限制,大多动效设计师都不具备使用代码的能力,输出的动效demo对于前端开发同学来说,只能作为参考,且部分效果也不具备代码实现性.对于UI开发等前端设计与开发的同事来说,gif动画文档数据量大, ...
ae制h5文字动画_大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
前端使用lottie-web，使用AE到处的JSON动画贴心教程
Lottie简介官方介绍:Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web.ios.android.flutter和react native ...

android ae动画教程,AE动画转Web代码工具指北-Lottie

android ae动画教程,AE动画转Web代码工具指北-Lottie相关推荐

最新文章

热门文章