AE动画转Web代码工具指北-Lottie

SexySix 发布于2019-08-23 17:14 / 2751人阅读

摘要：简单来说，就是一个可以将动画转成可运行在上的插件。使用工具使用前请确保已安装这以下工具。更详细内容可参考官网库最后再分项目框架提供两个的库

简介

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

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

使用工具

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

插件：bodymovin.zxp

解压：ZXP Installer

其他。

Lottie预览：https://www.lottiefiles.com/p...

web bodymovin cdn: https://cdnjs.com/libraries/b...

使用步骤

安装并解压bodymovin

打开AE，添加bodymovin扩展

导出data.json文件

详细可参考：炫酷神器，AE插件Bodymovin.zxp的安装与使用

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的库

react：react-bodymovin

vue：vue-lottie

混合云私有云 js跳转页面动画效果 html免费动画代码动画html代码大全 Lottie

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104031.html

Lottie-前端实现AE动效

摘要：经调研发现，是个简单高效且性能高的动画方案。换言之，设计师用把动画效果做出来，再用导出相应地文件给到前端，前端使用库就可以实现动画效果。项目背景在海外项目中，为了优化用户体验加入了几处微交互动画，实现方式是设计输出合成的雪碧图，前端通过序列帧实现动画效果：showImg(https://segmentfault.com/img/bVbp6jB);序列帧：showImg(https...

supernavy 2019-08-23 16:06 评论0 收藏0
前端动画调研-V1

摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...

ddongjian0000 2019-08-23 11:00 评论0 收藏0
2017-10-20 前端日报

摘要：前端日报精选作者的构思和演绎翻译新特性大杀器和把动画转换成原生动画菜鸟的学习之路中文旧文与知乎专栏旧文新读解释闭包需要几行代码知乎专栏前端校招总结个人文章函数式编程系列优雅的使用进行函数编程掘金微软谷歌三星将一起构建的统一文档 2017-10-20 前端日报精选 React作者的构思和演绎（翻译）Make React Great Again —— React v16 新特性大杀器Bo...

Genng 2019-08-21 17:08 评论0 收藏0
H5页面内使用JSON动画

摘要：问题背景有一天我们的设计师找到我说，要把页面中我自己用程序写的动画，换成他们给的动画，原因是有的动画很复杂，自己写起来达不到他们的预期效果写到这里我突然想到一个问题，这么复杂的动画为什么不使用。。。。问题背景有一天我们的UI设计师找到我说，要把页面中我自己用程序写的动画，换成他们给的json动画，原因是有的动画很复杂，自己写起来达不到他们的预期效果（写到这里我突然想到一个问题，这么...

anonymoussf 2019-08-30 15:55 评论0 收藏0