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

it2025-09-30  6

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方法,获取到参数之后想改啥改啥,非常简单!

最新回复(0)