文章目录
- 概要
- 整体交互
- 使用技术
- 准备工作
- 技术细节
- 小结
概要
主要实现利用lottie动画实现复杂动画交互效果，项目为大屏系统，设计是做一个全局菜单，不用的时候折叠成一个小盒子，使用的时候点击小盒子可以展开菜单页，展开效果是拆分当前盒子元素组成的背景框。
整体交互
效果展示：
使用技术
- vue2
- echarts
- lottie-web
- vue-lottie
- vue-count-to
准备工作
npm install vue-lottie --save
在main.js引入并注册组件。
import lottie from "vue-lottie";
Vue.component("lottie", lottie);
技术细节
1.首先是让UI准备一个做好的视频，即想实现的效果，导出为json文件，AE应该就可以，因为lottie就需要json文件渲染动画
示例：
{"v":"5.7.8","fr":60,"ip":26,"op":57,"w":914,"h":283,"nm":"动画-主菜单展开","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":3,"ty":3,"nm":"NULL CONTROL ","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[456.709,184.252,0],"ix":2,"l":2},"a":{"a":0,"k":[50,50,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"路径 9","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[80]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[50,33.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[50,-96.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,-17],[29,0],[0,17],[-29,0]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-14],"ix":5},"e":{"a":0,"k":[0,17],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"路径 5","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[80]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[50,33.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[50,-96.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,-17],[29,0],[0,17],[-29,0]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-14],"ix":5},"e":{"a":0,"k":[0,17],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"路径 8","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[30]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[35.5,58.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[-49.5,108.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-14.41,-25],[14.5,-8.38],[14.5,24.95],[14.41,25],[-14.5,8.38],[-14.5,-24.95]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-25],"ix":5},"e":{"a":0,"k":[0,25],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"路径 4","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[30]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[35.5,58.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[-49.5,108.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-14.41,-25],[14.5,-8.38],[14.5,24.95],[14.41,25],[-14.5,8.38],[-14.5,-24.95]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-25],"ix":5},"e":{"a":0,"k":[0,25],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"路径 7","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[100]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[64.5,58.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[154.5,108.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[14.41,-25],[14.5,-24.95],[14.5,8.38],[-14.41,25],[-14.5,24.95],[-14.5,-8.38]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-25],"ix":5},"e":{"a":0,"k":[0,25],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"路径 3","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[100]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[64.5,58.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[154.5,108.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[14.41,-25],[14.5,-24.95],[14.5,8.38],[-14.41,25],[-14.5,24.95],[-14.5,-8.38]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-25],"ix":5},"e":{"a":0,"k":[0,25],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"路径 6","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":26,"s":[80]},{"t":39,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[50,66.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[50,246.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,-17],[29,0],[0,17],[-29,0]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-17],"ix":5},"e":{"a":0,"k":[0,17],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"路径 2","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":26,"s":[80]},{"t":39,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[50,66.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[50,246.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,-17],[29,0],[0,17],[-29,0]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[0,-17],"ix":5},"e":{"a":0,"k":[0,17],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"多边形备份 27","parent":3,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.28,50.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":26,"s":[100,100,100]},{"t":52,"s":[150,150,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0,-27],[23,-13.5],[23,13.5],[0,27],[-23,13.5],[-23,-13.5]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"多边形备份 27","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[0]},{"t":56,"s":[100]}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"修剪路径 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"多边形备份 28","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.28,51,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.25,0.25,0.25],"y":[1,1,1]},"o":{"x":[0.33,0.33,0.33],"y":[0,0,0]},"t":26,"s":[100,100,100]},{"t":52,"s":[150,150,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0,-42],[36,-21],[36,21],[0,42],[-36,21],[-36,-21]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,0.301960796118],"ix":3},"o":{"a":0,"k":30.196,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"多边形备份 26","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[100]},{"t":56,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"修剪路径 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"路径备份 46","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":43,"s":[0]},{"t":56,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":43,"s":[883,251,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[903,261,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[-100,-100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-6,10],[-6,-3.29],[6,-10]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[2.472,1.773],"ix":5},"e":{"a":0,"k":[-6,-4.101],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径备份 46","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":632,"st":32,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"路径备份 47","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":43,"s":[0]},{"t":56,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":43,"s":[883,32,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[903,22,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[-100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-6,10],[-6,-3.29],[6,-10]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[2.472,1.773],"ix":5},"e":{"a":0,"k":[-6,-4.101],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径备份 47","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":632,"st":32,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"路径备份 45","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":43,"s":[0]},{"t":56,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":43,"s":[31,251,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[11,261,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,-100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-6,10],[-6,-3.29],[6,-10]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[2.472,1.773],"ix":5},"e":{"a":0,"k":[-6,-4.101],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径备份 45","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":632,"st":32,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"路径备份 44","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":43,"s":[0]},{"t":56,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":43,"s":[31,32,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[11,22,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-6,10],[-6,-3.29],[6,-10]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.376,0.98,1,0.5,0.286,0.965,1,1,0.196,0.949,1,0,0,0.5,0.5,1,1],"ix":9}},"s":{"a":0,"k":[2.472,1.773],"ix":5},"e":{"a":0,"k":[-6,-4.101],"ix":6},"t":1,"nm":"gradient 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"路径备份 44","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":632,"st":32,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"形状 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[50]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[456.988,184.752,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[456.988,-35.248,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-9.959,-40.25],[0.001,-46],[9.961,-40.25]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.129,0.252],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"形状","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"形状","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[50]},{"t":56,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[456.988,184.752,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[456.988,424.752,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[9.961,40.25],[0.001,46],[-9.959,40.25]],"c":false},"ix":2},"nm":"路径 4","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"合并路径 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.129,0.252],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"形状","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"形状图层 7","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[50]},{"t":42,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[430.5,170.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":42,"s":[15,23,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.504,4],[-14.5,-7.57],[-4.248,-13.246]],"c":false}]},{"t":42,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.5,23],[-14.5,-7.57],[14.5,-23]],"c":false}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":1,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,1,1,0.5,1,1,1,1,1,1,1,0,1,0.499,0.5,0.998,0],"ix":8}},"s":{"a":0,"k":[-14.486,-7.694],"ix":4},"e":{"a":0,"k":[0.262,0.702],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"gradient 2","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"形状图层 6","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[50]},{"t":42,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[430.5,199.75,0],"to":[0,0,0],"ti":[0,0,0]},{"t":42,"s":[15,260,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,-100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.504,4],[-14.5,-7.57],[-4.248,-13.246]],"c":false}]},{"t":42,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.5,23],[-14.5,-7.57],[14.5,-23]],"c":false}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":1,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,1,1,0.5,1,1,1,1,1,1,1,0,1,0.499,0.5,0.998,0],"ix":8}},"s":{"a":0,"k":[-14.486,-7.694],"ix":4},"e":{"a":0,"k":[0.262,0.702],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"gradient 2","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"形状图层 5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[50]},{"t":42,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[482.5,200,0],"to":[0,0,0],"ti":[0,0,0]},{"t":42,"s":[899,260,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[-100,-100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.504,4],[-14.5,-7.57],[-4.248,-13.246]],"c":false}]},{"t":42,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.5,23],[-14.5,-7.57],[14.5,-23]],"c":false}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":1,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,1,1,0.5,1,1,1,1,1,1,1,0,1,0.499,0.5,0.998,0],"ix":8}},"s":{"a":0,"k":[-14.486,-7.694],"ix":4},"e":{"a":0,"k":[0.262,0.702],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"gradient 2","mn":"ADBE Vector Graphic - G-Stroke","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"形状图层 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.33],"y":[0]},"t":26,"s":[50]},{"t":42,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[482,169.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":42,"s":[899,22,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[-100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.33,"y":0},"t":26,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.504,4],[-14.5,-7.57],[-4.248,-13.246]],"c":false}]},{"t":42,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-14.5,23],[-14.5,-7.57],[14.5,-23]],"c":false}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":1,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,1,1,0.5,1,1,1,1,1,1,1,0,1,0.499,0.5,0.998,0],"ix":8}},"s":{"a":0,"k":[-14.486,-7.694],"ix":4},"e":{"a":0,"k":[0.262,0.702],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"gradient 2","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":600,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"形状图层 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[457,141.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.056,"y":1},"o":{"x":0.164,"y":0},"t":26,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[35.994,65.451],[0.119,86.225],[0.256,86.225],[-35.994,64.823],[-36.119,23.617],[0.256,2.09],[0.244,2.09],[35.869,23.617]],"c":true}]},{"t":51,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[457,125.5],[429,141.5],[-429,141.5],[-457,125.5],[-457,-125.5],[-429,-141.5],[429,-141.5],[457,-125.5]],"c":true}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.011764705882,0.03137254902,0.070588235294,1],"ix":4},"o":{"a":0,"k":80,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":626,"st":26,"bm":0}],"markers":[{"tm":26,"cm":"1","dr":0},{"tm":56,"cm":"2","dr":0}]}
2.接下来就是做好自己的菜单容器，然后引入刚刚新建的动画.json文件
注：
实现了点击外部菜单与展开菜单双向绑定，点击除总览页面时隐藏
<template>
<div class="All">
<div class="Nav_all">
<div @click="enter" class="icon" ref="ico"></div>
<div class="lottie">
<lottie :options="defaultOptions" v-on:animCreated="handleAnimation" />
</div>
<!-- 菜单展开--二级菜单 ----------------------------------------------------------------------------------------------------->
<div class="nav" ref="Nav" v-if="box" @mouseleave="leave">
<div class="olBox">
<div class="li">
<li
v-for="(item, index) in navBar.daily"
:key="index"
:style="{ color: isActiveli === index ? '#FFFFFF' : '' }"
:class="{ activeli: isActiveli === index }"
@click="liFun(item, index)"
>
{{ item.name }}
</li>
</div>
</div>
<!--菜单展开 底部一级菜单------------------------------------------------------------------------------------------->
<div class="bottombar">
<!-- :style="{ color: currentTwo === index ? '#9DD5D9' : '' }"
:class="{ active1: isActive1 === index }"
@click="bottombarFun(item, index)" pNormal中代码-->
<p
class="pNormal"
v-for="(item, index) in navBar.navData"
:key="index"
>
{{ item.name }}<span></span>
</p>
</div>
</div>
<div class="toogleFalse" v-if="toogleFalse"></div>
<!-- 总览四个导航 ----------------------------------------------------------------------------------------------------->
<div class="toogle" v-show="toogle">
<router-link
v-for="(item, index) in navBar.sites"
:key="index"
:to="{ name: item.path.name }"
>
<div
:style="{ color: isActive === index ? '#fff' : '' }"
class="normal"
:class="{ active: isActive === index }"
@click="fun(item, index)"
>
<span> {{ item.name }}</span>
</div>
</router-link>
</div>
</div>
<!-- 左上角当前按钮信息同步 ---------------------------------------------------------------------------------------->
<div class="title">
<img src="@/assets/A_visualAssets/daily_slices/position.png" alt="" />
<div class="font">
{{ this.titleFa }}{{ this.flagstaff }}{{ this.title }}
</div>
</div>
</div>
</template>
<script>
import * as animationData from "@/assets/loading.json";
export default {
name: "nav_Bottom",
data() {
return {
title: "日常总览",
titleFa: "总览",
trafficFa: "交通",
flagstaff: "-",
path: "daily",
currentTwo: -1,
isActive: 0,
isActive1: -1,
isActiveli: 18,
navBar: {
daily: [
{
nameFather: "总览",
name: "居民生活",
flagstaff: "-",
value: 3,
path: {
name: "residentLife",
},
},
{
nameFather: "交通",
name: "诱导屏详情",
flagstaff: "-",
path: {
name: "trafficGuide",
},
},
{
nameFather: "城管",
name: "违章建筑",
flagstaff: "-",
},
{
nameFather: "消防",
name: null,
},
{
nameFather: "社区",
name: null,
},
{
nameFather: "市政",
name: null,
},
{
nameFather: "总览",
name: "市容市貌",
flagstaff: "-",
value: 2,
path: {
name: "afectedCity",
},
},
{
nameFather: "交通",
name: "路口详情",
flagstaff: "-",
path: {
name: "trafficRoad",
},
},
{
nameFather: "城管",
name: "门前五包",
flagstaff: "-",
},
{
nameFather: "消防",
name: null,
},
{
nameFather: "社区",
name: "小区信息",
flagstaff: "-",
},
{
nameFather: "市政",
name: null,
},
{
nameFather: "总览",
name: "城市安全",
flagstaff: "-",
value: 1,
path: {
name: "citymanager",
},
},
{
nameFather: "交通",
name: "路段详情",
flagstaff: "-",
path: {
name: "trafficRoadInfo",
},
},
{
nameFather: "城管",
name: "渣土车",
flagstaff: "-",
},
{
nameFather: "消防",
name: null,
},
{
nameFather: "社区",
name: "小区设备",
flagstaff: "-",
},
{
nameFather: "市政",
name: null,
},
{
nameFather: "总览",
name: "日常总览",
flagstaff: "-",
value: 0,
path: {
name: "daliy",
},
},
{
nameFather: "交通",
name: "交通总览",
flagstaff: "-",
path: {
name: "trafficPandect",
},
},
{
nameFather: "城管",
name: "油烟监测",
flagstaff: "-",
},
{
nameFather: "消防",
name: "消防总览",
flagstaff: "-",
},
{
nameFather: "社区",
name: "物业管理",
flagstaff: "-",
},
{
nameFather: "市政",
name: "市政总览",
flagstaff: "-",
},
],
navData: [
{ name: "总览" },
{ name: "交通" },
{ name: "城管" },
{ name: "消防" },
{ name: "社区" },
{ name: "市政" },
],
sites: [
{
nameFather: "总览",
name: "日常总览",
value: 0,
path: {
name: "daliy",
},
},
{
nameFather: "总览",
name: "城市安全",
value: 1,
path: {
name: "citymanager",
},
},
{
nameFather: "总览",
name: "市容市貌",
value: 2,
path: {
name: "afectedCity",
},
},
{
nameFather: "总览",
name: "居民生活",
value: 3,
path: {
name: "residentLife",
},
},
],
},
list: [],
isShow: true,
box: true,
canvas: true,
status: true,
toogle: true,
toogleFalse: false,
defaultOptions: {
animationData: animationData.default,
loop: false,
autoplay: false,
animationSpeed: 1,
},
};
},
created() {
//在页面加载时读取sessionStorage里的状态信息
// if (sessionStorage.getItem("store") ) {
// this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
// }
// //在页面刷新时将vuex里的信息保存到sessionStorage里
// window.addEventListener("beforeunload",()=>{
// sessionStorage.setItem("store",JSON.stringify(this.$store.state))
// })
this.leaveBefore();
// this.cloudRender.SuperAPI(
// "RegisterCloudResponse",
// this.myHandleResponseFunction
// );
},
mounted() {
this.anim.addEventListener("complete", () => {
if (this.box == true) {
this.$refs.Nav.style.transform = "scale(1)";
this.$refs.Nav.style.transition = "0.3s";
this.$refs.Nav.style.opacity = "1";
}
if (this.box == false) {
if (this.titleFa == "总览") {
this.toogle = true;
}
}
});
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
},
enter() {
this.box = true;
this.toogle = false;
this.anim.goToAndPlay(1, true);
this.anim.setDirection(1);
},
leave() {
this.box = false;
this.anim.goToAndPlay(20, true);
this.anim.setDirection(-1);
},
leaveBefore() {
this.box = false;
},
//总览四个导航
fun(item, i) {
this.titleFa = item.nameFather;
this.title = item.name;
// this.path=item.path.name;
switch (item.value) {
case 3:
this.isActiveli = 0;
break;
case 2:
this.isActiveli = 6;
break;
case 1:
this.isActiveli = 12;
break;
case 0:
this.isActiveli = 18;
break;
}
this.isActive = item.value;
},
bottombarFun(item, i) {
this.titleFa = item.name;
this.isActive1 = i;
this.currentTwo = i;
},
// 二级菜单
liFun(item, i) {
if (item.name != null) {
this.titleFa = item.nameFather;
this.flagstaff = item.flagstaff;
this.title = item.name;
this.isActiveli = i;
switch (item.value) {
case 0:
this.isActive = 0;
break;
case 1:
this.isActive = 1;
break;
case 2:
this.isActive = 2;
break;
case 3:
this.isActive = 3;
break;
}
if (item.path) {
this.$router.push(item.path.name);
}
}
if (item.name == null) {
this.nameNull = item.name;
}
},
},
};
</script>
<style lang="scss" scoped>
@import url(/styles/font.scss);
.activeli {
background-image: url("~@/assets/A_visualAssets/daily_slices/bg_Selected2.png");
background-size: 120px 40px;
background-repeat: no-repeat;
background-position-x: 50%;
margin-top: 15px;
width: 102px;
height: 40px;
font-size: 18px;
color: #bdc5c7;
// font-weight: 550;
list-style: none;
line-height: 40px;
}
.olBox {
width: 914px;
height: 283px;
// display: flex;
.li {
// flex: 1;
display: flex;
width: 842px;
margin: auto;
// height: 283px;
flex-wrap: wrap;
text-align: center;
font-size: 18px;
font-family: SourceHanSansCN-Medium;
// margin-left: -15px;
justify-content: space-around;
li {
cursor: pointer;
margin-top: 18px;
margin-bottom: 2px;
width: 132px;
height: 30px;
font-size: 18px;
color: #bdc5c7;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
list-style: none;
line-height: 30px;
&:hover {
color: #32effc;
}
}
li:nth-child(4),
li:nth-child(5),
li:nth-child(6),
li:nth-child(10),
li:nth-child(12),
li:nth-child(16),
li:nth-child(18) {
cursor: default;
}
}
}
.bottombar {
position: relative;
display: flex;
width: 842px;
text-align: center;
height: 61px;
line-height: 61px;
font-size: 24px;
position: relative;
font-family: SourceHanSansCN-Bold;
font-weight: bold;
color: #bdc5c7;
bottom: 93px;
margin-left: 36px;
margin-right: 36px;
justify-content: space-around;
p {
// cursor: pointer;
width: 102px;
height: 61px;
font-size: 24px;
font-family: SourceHanSansCN-Bold;
color: #1d828b;
line-height: 62px;
background-image: url("~@/assets/A_visualAssets/daily_slices/lineNav.png");
background-repeat: no-repeat;
background-size: 100%;
span {
display: block;
width: 0px;
margin-top: -6px;
left: 26px;
border-bottom: #32f2ff 4px solid;
}
// &:hover {
// span {
// transition: 0.3s;
// width: 102px;
// }
// color: #44ebf7;
// }
}
}
.container {
margin: 0;
padding: 0;
}
.All {
position: relative;
width: 914px;
}
.Nav_all {
width: 914px;
height: 283px;
margin: auto;
// position: relative;
}
.icon {
width: 50px;
height: 60px;
transform: scale(2.1);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
left: 440px;
top: 139px;
z-index: 2;
opacity: 0;
}
.icon:hover {
transition: 0.35s;
opacity: 1;
background-image: url("~@/assets/A_visualAssets/hover.svg");
cursor: pointer;
}
.nav {
position: absolute;
top: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
height: 100%;
transition: scale 0.5s;
-moz-transition: scale 0.2s; /* Firefox 4 */
-webkit-transition: scale 0.2s;
opacity: 0.05;
z-index: 200;
table {
margin-top: 40px;
color: rgb(255, 255, 255);
td:hover {
color: rgb(255, 0, 119);
}
}
}
button {
width: 80px;
height: 20px;
margin-top: 10px;
}
.activebtn {
background-image: url("~@/assets/A_visualAssets/tab_hover_slices/tabqiehuan.webp");
}
.lottie {
width: 914px;
height: 283px;
margin-left: 8px;
z-index: -100;
}
.toogleFalse {
width: 708px;
height: 50px;
position: absolute;
display: flex;
margin: auto;
margin-top: -55px;
left: 116px;
transition: 4s;
}
.toogle {
width: 708px;
position: absolute;
display: flex;
margin: auto;
margin-top: -55px;
left: 116px;
transition: 4s;
}
.toogle .toogle_box {
flex: 1;
width: 163px;
text-align: center;
font-size: 18px;
font-family: DIN-Light;
font-weight: bold;
color: #bdc5c7;
line-height: 50px;
height: 50px;
background-size: 100%;
z-index: 200;
}
// .normal:hover {
// cursor: pointer;
// color: #fff;
// }
.active1 {
background-image: url("~@/assets/A_visualAssets/daily_slices/bg_Selected1.png");
background-size: 100%;
width: 48px;
height: 24px;
font-size: 24px;
font-family: SourceHanSansCN-Bold;
font-weight: bold;
line-height: 36px;
}
.active {
background-image: url("~@/assets/A_visualAssets/tab_hover_slices/tabshift.png");
background-position: -6194px 0px;
width: 163px;
height: 50px;
animation: myAnimation 0.65s steps(1);
span {
font-family: SourceHanSansCN-Bold;
transition-duration: 0.5s;
-moz-transition-property: 0.5s;
margin-left: 15px;
}
}
.normal {
background-image: url("~@/assets/A_visualAssets/tab_hover_slices/tabshift.png");
width: 163px;
text-align: center;
font-size: 18px;
font-family: SourceHanSansCN-Bold;
font-weight: bold;
color: #dbe5e4;
margin-right: 14px;
line-height: 52px;
height: 50px;
}
@keyframes myAnimation {
0% {
background-position: 0px 0px;
}
2.63% {
background-position: -163px 0px;
}
5.26% {
background-position: -326px 0px;
}
7.89% {
background-position: -489px 0px;
}
10.53% {
background-position: -652px 0px;
}
13.16% {
background-position: -815px 0px;
}
15.79% {
background-position: -978px 0px;
}
18.42% {
background-position: -1141px 0px;
}
21.05% {
background-position: -1304px 0px;
}
23.68% {
background-position: -1467px 0px;
}
26.32% {
background-position: -1630px 0px;
}
28.95% {
background-position: -1793px 0px;
}
31.58% {
background-position: -1956px 0px;
}
34.21% {
background-position: -2119px 0px;
}
36.84% {
background-position: -2282px 0px;
}
39.47% {
background-position: -2445px 0px;
}
42.11% {
background-position: -2608px 0px;
}
44.74% {
background-position: -2771px 0px;
}
47.37% {
background-position: -2934px 0px;
}
50.00% {
background-position: -3097px 0px;
}
52.63% {
background-position: -3260px 0px;
}
55.26% {
background-position: -3423px 0px;
}
57.89% {
background-position: -3586px 0px;
}
60.53% {
background-position: -3749px 0px;
}
63.16% {
background-position: -3912px 0px;
}
65.79% {
background-position: -4075px 0px;
}
68.42% {
background-position: -4238px 0px;
}
71.05% {
background-position: -4401px 0px;
}
73.68% {
background-position: -4564px 0px;
}
76.32% {
background-position: -4727px 0px;
}
78.95% {
background-position: -4890px 0px;
}
81.58% {
background-position: -5053px 0px;
}
84.21% {
background-position: -5216px 0px;
}
86.84% {
background-position: -5379px 0px;
}
89.47% {
background-position: -5542px 0px;
}
92.11% {
background-position: -5705px 0px;
}
94.74% {
background-position: -5868px 0px;
}
97.37% {
background-position: -6031px 0px;
}
100.00% {
background-position: -6194px 0px;
}
}
.title {
// width: 128px;
display: flex;
height: 20px;
font-size: 20px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
color: #ffffff;
line-height: 30px;
position: absolute;
top: -735px;
left: -453px;
z-index: 3;
img {
height: 25px;
}
.font {
text-indent: 8px;
height: 20px;
font-size: 20px;
font-family: SourceHanSansCN-Medium;
font-weight: 500;
color: #ffffff;
line-height: 30px;
}
}
</style>
lottie官网：
链接https://airbnb.io/lottie/#/README
小结
到此一个高级的菜单就完成了，如果需要实现这种复杂动画的交互，可以使用lottie，适用菜单按钮等
觉得有用的留个关注哦！
![[网络基础]——计算机网络(OSI)参考模型 详解](https://img-blog.csdnimg.cn/direct/07b7ef11453b4234a68cd6d19ecab9c7.jpeg)
