在开发MG项目的时候，考虑到自动化战斗吸引特点之一就是特效动画，那么还是得学着做一下的，直接就了解到了lottie动画
lottie介绍及其原理相关：
动画实现原理，高性能JSON动画，lottie优缺点及其JSON文件数据解析
记录一些学习到的东西：
html或vue-cli使用lottie，参考：here
基本html使用lottie动画的json文件写法，参考：here
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
lottie动画基本方法，参考：here，(其他方法：here，监听事件：here)
一份我自己写的code：
<!DOCTYPE html><html><head>
<title>box</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.8/lottie_svg.min.js"></script> 无效引用 -->
<!-- <script src="https://labs.nearpod.com/bodymovin/demo/markus/halloween/lottie.min.js"></script> 无效引用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
<style>
.box {
position: absolute;
top: 0px;
}
</style></head><body>
<!--
但是这种方式不便于动态使用，应当在canvas组件内部使用 -->
<div id="svgContainer" style="width: 400px;height: 400px;"></div>
<button type="button" onclick="start()">播放</button>
<button type="button" onclick="pause()">暂停</button>
<button type="button" onclick="stop()">停止</button><br>
<button type="button" onclick="setSpeed(1)">播放速度:1</button>
<button type="button" onclick="setSpeed(0.5)">播放速度:0.5</button>
<button type="button" onclick="setSpeed(2)">播放速度:2</button>
<button type="button" onclick="destroy()">销毁动画</button></body><script>
var svgContainer=document.getElementById('svgContainer'); var animItem=lottie.loadAnimation({
container: svgContainer, // 包含动画的dom元素
loop: true,// 循环播放
autoplay: false, // 自动播放
// renderer: "svg",
renderer: "canvas",
path: 'https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json', // 不兼容canvas/html绘制
// renderer: "svg",
// path: '../mine.json',
})
function start(){
console.log("调用start");
lottie.play();
}
function pause(){
console.log("调用pause");
lottie.pause();
}
function stop(){
console.log("调用stop");
lottie.stop();
}
function setSpeed(x){
console.log("调用setSpeed",x);
lottie.setSpeed(x);
}
function destroy(x){
console.log("调用destroy");
lottie.destroy();
} // TIPS: 当设置path属性的时候，并不是简单的一个相对路径或者是绝对路径引入，
// 而是lottie会发送一个http请求，访问这个json文件。
// 如果是在vue/react项目中要注意最终的打包访问路径。
// 考虑页面性能更优，建议使用svg渲染方式，
// 通过path加载远程JSON文件，使用animationData会让json文件打包到JS中，
</script>
</html>
