lottie-web加载含有图片路径的json文件

最近使用lottie-web做动画效果，感觉非常棒。 对于将图片打包成base64直接包含进json文件自然非常简单，引入一个json文件就行

    import Ribbon from './jsonfile/ribbon-and-confetti.json';

    LottieWeb.loadAnimation({
                name: 'xxx',
                container: domElement, 
                renderer: 'svg',
                loop: false,
                autoplay: true,
                animationData: Ribbon // 使用import会直接被解析问数据对象，所以用animationData, 
                path: '绝对路径' // path是直接引用的文件  animationData和path选其一
    })

但是某些动画所需的图片可能较大，图片是单独的一个文件夹，并没有打包进json文件，这时候就需要使用另一个字段 ： assetsPath 。 它可以配置图片的路径。

构建项目建议将图片拿出来放到项目的public目录下

然后配置加上

    /* 省略*/
    assetsPath: `/effectfile/ribbon/images/`,
    /*省略*/

为什么要这么配置呢？首先来看一下json文件的 assets字段，

"assets":[{"id":"image_0","w":131,"h":64,"u":"images/","p":"img_0.png","e":0}]

还有获取资源的源码

AnimationItem.prototype.getAssetsPath = function (assetData) {
    var path = '';
    if(assetData.e) {
        path = assetData.p;
    } else if(this.assetsPath){
        var imagePath = assetData.p;
        if(imagePath.indexOf('images/') !== -1){ // 这里就把 images/忽略掉，只拿了图片名字，所以assetsPath直接找图片放的位置的路径就行
            imagePath = imagePath.split('/')[1];
        }
        path = this.assetsPath + imagePath;
    } else {
        path = this.path;
        path += assetData.u ? assetData.u : '';
        path += assetData.p;
    }
    return path;
};

重点 ：我的文件 e 为 0，所以走了else if；这个分支里面其实会忽略 u ，所以你要在自己的assetsPath路径里加上你的真实文件所在的目录，可以叫任意名字

本地开发时public文件夹下的文件相当于在 / 下，所以就可以引用到了。

如果部署到生产环境的话，那就要加上生产环境的主机地址

如果使用CDN则和部署生产环境类似，改为cdn的域名地址