lottie动画的使用

安装lottie

npm install lottie-web

引用

import lottie from 'lottie-web';

初始化lottie

import data from '../component/js/data.json';  //引入json数据
this.lottie = lottie.loadAnimation({
    container: document.getElementById('bm'),
    renderer: 'svg',  //渲染方式 svg、canvas
    loop: false,
    autoplay: false,
    animationData: data
}); 

*当前工具不支持import引入json需添加配置

resolve:{
    extensions: ['.json']
},
module:{
    loaders: [{
        test: /\.json$/,
        loader: 'json-loader'
    }]
}

图片资源
p：图片路径-修改成网络图片地址，删掉了'u'的参数

 "assets":[  
        {  
            "id":"image_0",  
            "w":207,  
            "h":90,  
            "p":"http://chuangshicdn.mpres.51vv.com/v_block/c38e245a2c26cc006384bb87e5696f34.png,  
            "e":0  
        },  
        {  
            "id":"image_1",  
            "w":207,  
            "h":90,  
            "u":"images/",  
            "p":"img_1.png",  
            "e":0  
        }  
    ]