Lottie in Action

AlphaHinex

发布于 2024-04-09 20:18:22

1060

发布于 2024-04-09 20:18:22

文章被收录于专栏：周拱壹卒周拱壹卒

Lottie 是什么？

Lottie 是什么？[1]

简单来说，它是一种使用 JSON 表示的动画格式，由 Airbnb[2] 推出。

具有更小的文件尺寸

无限缩放

跨平台、易使用

动画元素可响应交互事件

如何开始？

社区资源

从 LottieFiles 动画库[7] 中可以找到丰富的 Lottie 格式资源，并可利用 调色板[8] 或 Lottie Editor[9] 进行二次创作。

制作工具

从专业工具到在线 Web 编辑器，LottieFiles 提供了多种创建动画的方式：

Adobe After Effects[10]
Lottie Creator[11]
Builder[12]
JSON Editor[13]

Lottie from Scratch[14] 介绍了使用上面的 Builder[15] 工具从头制作一个 Lottie 动画的过程。

如何使用？

在设计、开发及生产力工具中，都可以很方便的使用 Lottie 动画：

Figma[16]
WordPress[17]
Visual Studio Code[18]

快速预览

拿到 Lottie 的 JSON 内容后，可以在 JSON Editor[19] 中快速预览：

editor

Web 中使用

在 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 相关的转换工具：

Lottie to dotLottie[24]
SVG to Lottie[25]
Lottie to GIF[26]
Lottie Optimizer[27]

交互示例

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