lottie的引入和使用（svg动画）

qq_46302247

已于 2022-04-15 16:10:34 修改

阅读量1.7k

点赞数

文章标签： javascript

于 2022-04-13 14:10:08 首次发布

本文链接：https://blog.csdn.net/qq_46302247/article/details/124146817

版权

这篇博客介绍了如何在Vue项目中安装并使用vue-lottie插件，通过全局和局部引入方式展示lottie组件。内容包括安装指令、组件挂载、数据导入及处理，以及JSON动画数据的解析和应用，实现SVG动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装vue-lottie插件
npm install vue-lottie -S
// "vue-lottie": "^0.2.1",

2、引入vue-lottie插件

---全局引入
import lottie from "vue-lottie";
// 全局挂载组件
Vue.component("lottie", lottie);

---局部引入
import lottie from "vue-lottie";
components: {
        lottie
    },

3、使用lottie组件
<div class="box">
     <lottie :options="{ animationData: pieBg }" />
 </div>
 
import pieBg from '@/assets/data.json';

data() {
    return {
        pieBg: pieBg,
    }
},

created() {
    this.pieBg.assets.map(item => {
        item.u = ''
        if(item.w && item.h) {
            item.p = require(`@/assets/images/${item.p}`)
        }
    })
},

在这里插入图片描述

//  @/assets/data.json
{
    "v": "5.8.1",
    "fr": 25,
    "ip": 0,
    "op": 75,
    "w": 196,
    "h": 196,
    "nm": "合成 4",
    "ddd": 0,
    "assets": [
        {
            "id": "image_0",
            "w": 158,
            "h": 158,
            "u": "images/",
            "p": "img_0.png",
            "e": 0
        },
        {
            "id": "image_1",
            "w": 172,
            "h": 196,
            "u": "images/",
            "p": "img_1.png",
            "e": 0
        },
        {
            "id": "image_2",
            "w": 178,
            "h": 178,
            "u": "images/",
            "p": "img_2.png",
            "e": 0
        },
        {
            "id": "image_3",
            "w": 156,
            "h": 156,
            "u": "images/",
            "p": "img_3.png",
            "e": 0
        }
    ],
    "layers": [
        {
            "ddd": 0,
            "ind": 1,
            "ty": 2,
            "nm": "不起眼的六根线.png",
            "cl": "png",
            "refId": "image_0",
            "sr": 1,
            "ks": {
                "o": {
                    "a": 0,
                    "k": 100,
                    "ix": 11
                },
                "r": {
                    "a": 1,
                    "k": [
                        {
                            "i": {
                                "x": [
                                    0.833
                                ],
                                "y": [
                                    0.833
                                ]
                            },
                            "o": {
                                "x": [
                                    0.167
                                ],
                                "y": [
                                    0.167
                                ]
                            },
                            "t": 0,
                            "s": [
                                0
                            ]
                        },
                        {
                            "t": 75,
                            "s": [
                                120
                            ]
                        }
                    ],
                    "ix": 10
                },
                "p": {
                    "a": 0,
                    "k": [
                        98,
                        98,
                        0
                    ],
                    "ix": 2,
                    "l": 2
                },
                "a": {
                    "a": 0,
                    "k": [
                        79,
                        79,
                        0
                    ],
                    "ix": 1,
                    "l": 2
                },
                "s": {
                    "a": 0,
                    "k": [
                        100,
                        100,
                        100
                    ],
                    "ix": 6,
                    "l": 2
                }
            },
            "ao": 0,
            "ip": 0,
            "op": 76,
            "st": 0,
            "bm": 0
        },
        {
            "ddd": 0,
            "ind": 2,
            "ty": 2,
            "nm": "六根棍子.png",
            "cl": "png",
            "refId": "image_1",
            "sr": 1,
            "ks": {
                "o": {
                    "a": 0,
                    "k": 100,
                    "ix": 11
                },
                "r": {
                    "a": 1,
                    "k": [
                        {
                            "i": {
                                "x": [
                                    0.833
                                ],
                                "y": [
                                    0.833
                                ]
                            },
                            "o": {
                                "x": [
                                    0.167
                                ],
                                "y": [
                                    0.167
                                ]
                            },
                            "t": 0,
                            "s": [
                                0
                            ]
                        },
                        {
                            "t": 75,
                            "s": [
                                60
                            ]
                        }
                    ],
                    "ix": 10
                },
                "p": {
                    "a": 0,
                    "k": [
                        98,
                        98,
                        0
                    ],
                    "ix": 2,
                    "l": 2
                },
                "a": {
                    "a": 0,
                    "k": [
                        86,
                        98,
                        0
                    ],
                    "ix": 1,
                    "l": 2
                },
                "s": {
                    "a": 0,
                    "k": [
                        100,
                        100,
                        100
                    ],
                    "ix": 6,
                    "l": 2
                }
            },
            "ao": 0,
            "ip": 0,
            "op": 150,
            "st": 0,
            "bm": 0
        },
        {
            "ddd": 0,
            "ind": 3,
            "ty": 2,
            "nm": "外圈光点.png",
            "cl": "png",
            "refId": "image_2",
            "sr": 1,
            "ks": {
                "o": {
                    "a": 0,
                    "k": 100,
                    "ix": 11
                },
                "r": {
                    "a": 1,
                    "k": [
                        {
                            "i": {
                                "x": [
                                    0.833
                                ],
                                "y": [
                                    0.833
                                ]
                            },
                            "o": {
                                "x": [
                                    0.167
                                ],
                                "y": [
                                    0.167
                                ]
                            },
                            "t": 0,
                            "s": [
                                0
                            ]
                        },
                        {
                            "t": 75,
                            "s": [
                                -120
                            ]
                        }
                    ],
                    "ix": 10
                },
                "p": {
                    "a": 0,
                    "k": [
                        98,
                        98,
                        0
                    ],
                    "ix": 2,
                    "l": 2
                },
                "a": {
                    "a": 0,
                    "k": [
                        89,
                        89,
                        0
                    ],
                    "ix": 1,
                    "l": 2
                },
                "s": {
                    "a": 0,
                    "k": [
                        100,
                        100,
                        100
                    ],
                    "ix": 6,
                    "l": 2
                }
            },
            "ao": 0,
            "ip": 0,
            "op": 150,
            "st": 0,
            "bm": 0
        },
        {
            "ddd": 0,
            "ind": 4,
            "ty": 2,
            "nm": "小细齿.png",
            "cl": "png",
            "refId": "image_3",
            "sr": 1,
            "ks": {
                "o": {
                    "a": 0,
                    "k": 100,
                    "ix": 11
                },
                "r": {
                    "a": 1,
                    "k": [
                        {
                            "i": {
                                "x": [
                                    0.833
                                ],
                                "y": [
                                    0.833
                                ]
                            },
                            "o": {
                                "x": [
                                    0.167
                                ],
                                "y": [
                                    0.167
                                ]
                            },
                            "t": 0,
                            "s": [
                                0
                            ]
                        },
                        {
                            "t": 75,
                            "s": [
                                -180
                            ]
                        }
                    ],
                    "ix": 10
                },
                "p": {
                    "a": 0,
                    "k": [
                        98,
                        98,
                        0
                    ],
                    "ix": 2,
                    "l": 2
                },
                "a": {
                    "a": 0,
                    "k": [
                        78,
                        78,
                        0
                    ],
                    "ix": 1,
                    "l": 2
                },
                "s": {
                    "a": 0,
                    "k": [
                        100,
                        100,
                        100
                    ],
                    "ix": 6,
                    "l": 2
                }
            },
            "ao": 0,
            "ip": 0,
            "op": 76,
            "st": 0,
            "bm": 0
        }
    ],
    "markers": []
}