js使用lottie读取json文件并修改文件参数后渲染

js使用lottie读取json文件并修改文件参数后渲染

1.效果图

说明：车辆模型是通过json文件渲染的
2.代码
2.1 引入lottie.js（如果没有，网上资源很多，请自行下载）

<script src="../../js/lottie.js"></script>

2.2 读取json文件

$.ajax({
				type:'get',
				url:'http://bucket1.bba.vip/200825173053KykwGnSP39.json',//这里我们的json是接口请求的，当然也可以是本地文件
				success: function(res) {
						console.log(res)//这里可以看到json参数，对其进行修改
			   				res.assets[0].u="";//空白
			          	   res.assets[0].p="../../img/carThumbnails/img_0.png";
			          	   res.assets[1].u="";//烟
			          	   res.assets[1].p="../../img/carThumbnails/img_1.png";
			          	   res.assets[2].u="";//轮胎
			          	   res.assets[2].p="http://"+jsonImg.tyreResourceUrl;
			          	   res.assets[3].u="";//刹车盘
			          	   res.assets[3].p="http://"+jsonImg.brakeResourceUrl;
			          	   res.assets[4].u="";//灯光
			          	   res.assets[4].p="http://"+jsonImg.lightResourceUrl;
			          	   res.assets[5].u="";//车身
			          	   res.assets[5].p="http://"+jsonImg.picUrl;
			          	   res.assets[6].u="";//影子
			          	   res.assets[6].p="../../img/carThumbnails/img_6.png";
			          	   $('#'+id).html('');
			          	   //渲染json
				           lottie.loadAnimation({
					            wrapper: document.getElementById(id),//svg容器
								animType: 'svg',
								loop: true,
								animationData: res //如果json有动画用这个
								//path:url  //如果json没有动画可以用这个
					        });
		          	   }
				}
			})

3.总结：我这里是改的图片路径，当然也可以通过改参数修改json动画，比如说进度条位置，动画颜色等等，总之就是个get方法，获取到参数之后想改啥改啥，非常简单！