Lottie 是什么?[1]
简单来说,它是一种使用 JSON 表示的动画格式,由 Airbnb[2] 推出。
.lottie
格式中。从 LottieFiles 动画库[7] 中可以找到丰富的 Lottie 格式资源,并可利用 调色板[8] 或 Lottie Editor[9] 进行二次创作。
从专业工具到在线 Web 编辑器,LottieFiles 提供了多种创建动画的方式:
Lottie from Scratch[14] 介绍了使用上面的 Builder[15] 工具从头制作一个 Lottie 动画的过程。
在设计、开发及生产力工具中,都可以很方便的使用 Lottie 动画:
拿到 Lottie 的 JSON 内容后,可以在 JSON Editor[19] 中快速预览:
editor
在 Web 中展现 Lottie 动画可分两步:
引入 lottie-player Web Component[20]
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
加入 <lottie-player>
标签,src
属性设置 Lottie json 文件 URL:
<lottie-player
src="https://lottie.host/31b0c1dc-5ff1-45df-b96c-fa1200c8c554/QTcdtW0332.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
direction="1"
mode="normal"
loop
controls
autoplay>
</lottie-player>
也可以通过代码直接为 player 设置 json 内容:
<lottie-player id="json-content-player" autoplay loop mode="normal" style="width: 320px"></lottie-player>
<script>
const jcp = document.querySelector("#json-content-player")
jcp.load('{"v":"5.3.4","fr":30,"ip":0,"op":38,...}')
</script>
LottieFiles 提供了很多 Lottie 相关的转换工具:
Interactivity Guide[28] 中提供了丰富的 Lottie 动画交互指引,如下面这个动画包含了三段内容:一只不断奔跑的鸽子、一个爆炸效果和羽毛掉落过程。点击鸽子可看到交互效果(阅读原文查看更好的动画及交互效果):
Running pigeon by Christina Bublyk[29], explosion by Viktor Anisimov[30], feathers by Daniel Teasdale[31]
参考资料
[1]
Lottie 是什么?: https://lottiefiles.com/what-is-lottie
[2]
Airbnb: https://airbnb.io/lottie
[3]
LottieDocs: https://lottiefiles.github.io/lottie-docs/
[4]
LottieFiles: https://www.lottiefiles.com/
[5]
dotLottie: https://dotlottie.io/
[6]
LottieDocs: Everything About the Lottie File Format: https://lottiefiles.com/blog/working-with-lottie-animations/lottiedocs-everything-about-lottie-json-file-format
[7]
LottieFiles 动画库: https://lottiefiles.com/featured
[8]
调色板: https://lottiefiles.com/features/color-palette
[9]
Lottie Editor: https://lottiefiles.com/lottie-editor
[10]
Adobe After Effects: https://lottiefiles.com/plugins/after-effects
[11]
Lottie Creator: https://lottiefiles.com/lottie-creator
[12]
Builder: https://lottiefiles.github.io/lottie-docs/playground/builder/
[13]
JSON Editor: https://lottiefiles.github.io/lottie-docs/playground/json_editor/
[14]
Lottie from Scratch: https://lottiefiles.github.io/lottie-docs/breakdown/lottie_from_scratch/
[15]
Builder: https://lottiefiles.github.io/lottie-docs/playground/builder/
[16]
Figma: https://lottiefiles.com/figma
[17]
WordPress: https://lottiefiles.com/plugins/wordpress
[18]
Visual Studio Code: https://lottiefiles.com/plugins/visual-studio-code
[19]
JSON Editor: https://lottiefiles.github.io/lottie-docs/playground/json_editor/
[20]
lottie-player Web Component: https://github.com/LottieFiles/lottie-player
[21]
How to Add Lottie Animations to a Website with HTML: https://lottiefiles.com/blog/working-with-lottie-animations/how-to-add-lottie-animation-in-web-page-html
[22]
How to Add Lottie Animations Anywhere: Web, Mobile Apps, Design Mockups and More: https://lottiefiles.com/blog/tips-and-tutorials/add-lottie-animations-websites-mobile-app-design-mockups
[23]
How to Optimize Lottie Files for Faster Page Load Speeds: https://lottiefiles.com/blog/working-with-lottie-animations/optimize-lottie-files-for-faster-page-load-speeds
[24]
Lottie to dotLottie: https://lottiefiles.com/tools/lottie-to-dotlottie
[25]
SVG to Lottie: https://lottiefiles.com/svg-to-lottie
[26]
Lottie to GIF: https://lottiefiles.com/lottie-to-gif
[27]
Lottie Optimizer: https://lottiefiles.com/tools/lottie-json-to-optimized-lottie-json
[28]
Interactivity Guide: https://lottiefiles.com/interactivity
[29]
Christina Bublyk: https://lottiefiles.com/creatopotato
[30]
Viktor Anisimov: https://lottiefiles.com/comovaivoce
[31]
Daniel Teasdale: https://lottiefiles.com/DanielTeasdale