Live2D|自制看板娘超简版

这里应该是Live2D的最基础操作，把2D的图片渲染成能小幅度晃动的GIF图片。效果演示看板娘

前言：

玩了一两次VRchat，在中文吧里，对这个”泠鸢yousa“模型很感兴趣，~~尤其是她的声音（咳咳划掉~~,于是想给自己的网站也加个纸片人。

制作GIF

工具：

ps、live2Dcubsim

参考教程oeasy教你玩转live2d动画制作

效果：（封面图片做出动感）

应用到网页上并添加语音

效果点击☞看板娘

源码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style type="text/css">
            #wife {
                position: absolute;
                bottom: 0px;
                left: 20px;

            }
            #wife img {
                width: 200px;
            }
        </style>

    </head>
    <body>
        <div id="wife">
            <div class="message">
                可以轻轻点击和我交流呦！
            </div>
            <img id="wife1" src="mio.gif" >

        </div>

        <audio id="audio01" >
            当前浏览器不支持audio
        </audio>
        <script type="text/javascript">
            var wife = document.getElementById("wife");
            var audio01 = document.getElementById("audio01");
            var meg = document.getElementsByClassName('message')[0]
            console.log(meg)
            var musicArr = [
                './01.mp3',
                './02.mp3',
                './03.mp3',
                './04.mp3'
            ]
            var megArr = [
                '你好你好！恭喜发财~',
                'hey你好，又见面啦~',
                '嘿嘿，我家还蛮大的,要看看嘛~',
                'hey，我是泠鸢yousa~'
            ]
            var index;
            wife.onclick = function(){
                //随机获取声源
                index = Math.round(Math.random() * 10) % musicArr.length
                console.log(index)
                audio01.src= musicArr[index]
                audio01.play();
                meg.innerHTML = megArr[index]
            } 
        </script>
    </body>
</html>

这样一个超级简单的看板娘就做好了(我真是超没下限啊，实际上这就是GIF图片加个点击事件)，我不管╰（‵□′）╯。另图片是mio，音源是泠鸢yousa。