Lottie--一个可以用Json生成的动画 官网
Lottie的优点
- 手动生成动画。手工制作动画对于Android和iOS的设计和工程来说是一项巨大的时间投入。通常很难甚至不可能证明花这么多时间来制作一部动画是合理的。
- Gifs的大小是bodymovin JSON的两倍多，并且以固定的大小呈现，无法放大以匹配大屏幕和高密度屏幕。
- Png序列。Png序列比gif更糟糕，因为它们的文件大小通常是bodymovin JSON大小的30-50倍，而且无法放大。
- 动画矢量可绘制（仅限Android）。性能更高，因为它运行在RenderThread而不是主线程上。仅支持Lottie功能的一个子集。无法手动设置进度。不支持文本或动态颜色。无法通过程序或互联网加载。
web端
我们主要研究web端，通过lottie来生成动画 web端生成动画
第一步引入js，或者npm下来也可以
<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- OR -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
npm install lottie-web
第二步
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'), // Required
path: 'data.json', // Required
renderer: 'svg/canvas/html', // Required
loop: true, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
})
- animationData: an Object with the exported animation data.
- path: the relative path to the animation object. (animationData and path are mutually exclusive)
- loop: true / false / number
- autoplay: true / false it will start playing as soon as it is ready
- name: animation name for future reference
- renderer: 'svg' / 'canvas' / 'html' to set the renderer
- container: the dom element on which to render the animation
Demo 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bodymovin Demo</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<div id="bm"> </div>
<!-- Scripts -->
<script src="scripts/bodymovin.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
})
html, body {
background-color: #000;
width: 100%;
height:100%;
margin: 0;
overflow: hidden;
}
#bm {
width: 100%;
height: 100%;
}
json文件太大就不贴了，可去demo里面复制json文件
