常喜欢逛博客的你,是不是会碰到一些有意思的东西,有很多博客网站都有一个卡通人物,它一直盯着你鼠标移动的地方,俗称看板娘。
是不是好想拥有她?
今天就来讲讲如何在自己的博客中添加类似的功能。如果你的数学知识和创造力比较好的话,可以自己手写一个简单的动画人物,当然这样的人比较少,毕竟这也是一个很耗时的过程,并且效果比较单一。
手写不行就来用现成的,业界已有一些比较成熟的方案,比较受欢迎的就是 L2Dwidget
。
如何使用
急速添加
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
"display": {
"superSample": 2,
"width": 200, // 宽度
"height": 400, // 高度
"position": "right", // 模型位置
"hOffset": 0, // 纵向偏移
"vOffset": 0 // 横向偏移
},
"mobile": {
"show": false // 是否在移动设备上显示
}
});
</script>
在你的 index.html
中添加上面的代码,你就可以马上看到属于你的妹子啦。
什么?这个不是你喜欢的类型?
那我们就来换个妹子,在 init
方法中添加下面的属性:
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
scale: 1
},
jsonPath
格式:https://unpkg.com/live2d-widget-model-模型名称@版本号/assets/模型名称.model.json
其中 jsonPath
就是这个模型的地址,只需要更换其中的 chitose
为对应模型的名称即可,共有22个不同的小可爱供你选择。
chitose
Epsilon2.1
Gantzert_Felixander
haru_1
haru_2
haruto
hibiki
hijiki
izumi
koharu
miku
nico
nietzsche
ni-j
nipsilon
nito
shizuku
tororo
tsumiki
unitychan
wanko
z16
我自己也去把每个都试了下,有一些小可爱的 jsonPath
不存在了,所以无法使用。
欢迎访问我的个人网站(相信你会喜欢上我的风格):www.dengzhanyong.com
关注我的个人公众号【前端筱园】,不错过我的每一篇推送
不用担心,还可以使用线下版本
步骤一:下载资源文件【关注公众号“前端筱园
”,回复 “看板娘
” 即可下载】
**步骤二:**将下载的文件拷贝到项目中
**步骤三:**在 index.html
中添加下面的内容
<script src="/live2dw/lib/L2Dwidget.min.js"></script>
**步骤四:**执行初始化模型
window.L2Dwidget.init({
tagMode: false,
debug: false,
model: {
jsonPath: '/live2dw/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json',
scale: 1
},
display: {
position: 'right',
width: 150,
height: 300,
hOffset: 100,
vOffset: 50
},
mobile: { show: true },
log: false
})
**注意点:**模型路径是相对于 live2dw
文件夹的路径,并不是你执行初始化的代码所在文件的相对路径。
这是因为你在初始化时,将模型路径以字符串的形式传进去,真正加载模型资源是在 /live2dw/lib/L2Dwidget.min.js
中进行的。
在vue或react中使用
在vue和react中使用也是相当的简单,步骤一二三保持不变,初始化过程可以写在 index.html
中,当然更多的是写在 App.vue
或 app.js
中。
- vue中,在组件的
created
生命周期中初始化 - react中,在组件的
componentDidMount
生命周期中初始化
Hexo中使用
步骤一:安装模块
# npm install --save hexo-helper-live2d
步骤二:下载模型
格式:npm install 模型名字
# npm install live2d-widget-model-hibiki
步骤三:添加配置
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
tagMode: false # 标签模式, 是否仅替换 live2dtag标签而非插入到所有页面中
log: false
model:
use: live2d-widget-model-wanko
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 1