Vue 3中使用 Lottie 动画

一、Lottie动画简介

Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库,开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。

在早期的前端开发中,Flash是网页动画之王,不过它的规范约束随意,造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失,HTML网页开发的主流技术,成为前端开发的技术标准,不过在HTML网页上进行动画开发其成本也是相当高的。事实上,除了开发成本和技术难点外,开发的动画还可能会出现与设计稿相差甚远,而Lottie动画的出现就很好的解决了这一问题。

早在2015年,Hernan Torrisi就提出了在AE中导出动画的想法,并且使用他创建的Bodymovin插件,能够很容易地导出JSON描述的动画,同时还发布了史上第一个支持JSON格式动画的渲染器。

2017年,Airbnb的工程师看到了基于JSON格式动画的潜力,于是编写了可以渲染JSON文件的iOS和Android库,并且扩展到Web和Windows,他们将这个库称为Lottie。同时,为了方便其他开发者,Airbnb还打造一个技术社区,开发者可以在Airbnb平台上传、下载和交易动画。

在使用流程上,开发Lottie动画需要先使用Adobe After Effects做出原动画,然后再使用Bodymovin插件把动画导出成JSON文件,而这个JSON文件就是Lottie需要解析的动画源文件。所以,制作Lottie动画需要先下载Adobe After Effects软件,如下图所示。

相关推荐

  1. Vue 3使用 Lottie 动画

    2024-07-14 14:46:04       27 阅读
  2. vue3使用过渡动画transition

    2024-07-14 14:46:04       46 阅读
  3. Vue3使用动态组件

    2024-07-14 14:46:04       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-14 14:46:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-14 14:46:04       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-14 14:46:04       58 阅读
  4. Python语言-面向对象

    2024-07-14 14:46:04       69 阅读

热门阅读

  1. 玩转springboot之SpringApplicationRunListener

    2024-07-14 14:46:04       23 阅读
  2. ESP32部署TensorFlow Lite(TODO)

    2024-07-14 14:46:04       20 阅读
  3. 滑动窗口区间最大最小值模板

    2024-07-14 14:46:04       24 阅读
  4. php探针

    2024-07-14 14:46:04       25 阅读
  5. 基于深度学习的问答系统

    2024-07-14 14:46:04       21 阅读
  6. 【C语言】多进程服务器

    2024-07-14 14:46:04       29 阅读
  7. 日常学习--20240713

    2024-07-14 14:46:04       21 阅读
  8. qt 布局有多少种

    2024-07-14 14:46:04       19 阅读
  9. 并发漏洞介绍

    2024-07-14 14:46:04       18 阅读
  10. 展开说说:Android之View基础知识解析

    2024-07-14 14:46:04       16 阅读
  11. 代码随想录算法训练营第35天

    2024-07-14 14:46:04       20 阅读