前言

有时看到别人的博客页面会弹出好看的二次元动画，有的就是swf格式的falsh动画，有的可能就是一个简单的GIF动图，由于Chrome停止对falsh支持，今天介绍一个非flash的js二次元动画——L2Dwidget，我们将在 VUE 项目中导入它。

1.流程

1.1 安装所需要的 js

npm install -S live2d-widget

1.2 仓库地址

https://github.com/wangsrGit119/wangsr-image-bucket/tree/master/L2Dwidget

2. 项目引入

2.1 导入包

import { L2Dwidget } from 'live2d-widget'

2.2 初始化

created() {
    setTimeout(function () {
      L2Dwidget
                    .init({
                        model: {
                            jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json',
                           scale: 1
                        },
                        display: { "position": "left", "width": 150, "height": 300,"hOffset": 0, "vOffset": -20 }, 
　　                mobile: { "show": true, "scale": 0.5 }, 
　　                react: { "opacityDefault": 0.7, "opacityOnHover": 0.2 } });
                        dialog: {
                            // 开启对话框
                            enable: true,
                            script: {
                                // 每空闲 10 秒钟，显示一条一言
                                'every idle 10s': '$hitokoto$',
                                // 当触摸到星星图案
                                'hover .topimg': '欢迎来到简窝博客~ (*/ω＼*)',
                                // 当触摸到角色身体
                                'tap body': '哎呀！别碰我！',
                                // 当触摸到角色头部
                                'tap face': '人家已经不是小孩子了！'
                            }
                        }
                    });
    }, 1000);
  },