前端动画框架 Lottie

作者: 刘一二 发布时间: 2023年2月21日 浏览: 1176

Lottie是一个适用于Web、Android、iOS、React Native和Window的库,它可以解析AE(Adobe After Effects)动画导出的JSON,并渲染成 SVG、Canvas 或 HTML 格式的动画。

 

动画效果:

sample.gif

 

演示网址:

https://demo.1024i.com/lottie

 

核心代码:

<script src='https://path/to/lottie.min.js'></script>

<div id="stage"></div>
<script>
lottie.loadAnimation({
	wrapper: document.getElementById("stage"),
	animType: "svg",
	loop: true,
	path: "https://path/to/data.json"
});
</script>

其中,data.json 为动画数据,可以在下文提供的动画素材网站中找到大量的素材

 

相关资源:

官网网址:https://airbnb.io/lottie

js 代码库下载地址(两个库名不同,内容完全一样一样):
https://cdnjs.com/libraries/lottie-web
https://cdnjs.com/libraries/bodymovin

如果只使用了  svg 格式的动画,可以下载 lottie_light 版本的库,体积小很多


动画素材:

https://lottiefiles.com
该网站收集的大量的动画素材,支持在线对动画进行简单调整(如速度,颜色等),有免费的也有收费的。

最新文章
热门文章
热门搜索
猜你喜欢
导航