幾行代碼養只貓，心情瞬間好多了

或枯燥或有趣的技術學習，都不妨礙一隻憨態可掬的萌貓臥在你的網頁上

瀏覽博客的時候常常會看到一個二次元的小姐姐或輕輕搖頭或眨巴眼睛似在與你互動甚是可愛，就像下邊這樣

曾想了解是如何實現的，奈何自己不懂前端，且對二次元並不感冒，就放下了，直到遇到了這隻貓，再也沒法抵擋誘惑，決心將她抱進本身的博客，天天能看到她，就會有個好心情，我想也許會有讀者跟我同樣吧，能有這麼一隻萌寵呆在這裏足以平添不少的樂趣了

以上這種效果都是使用Live2D技術實現的，Live2D是一種應用於電子遊戲的繪圖渲染技術，由日本Cybernoids公司開發，經過一系列的連續圖像和人物建模來生成一種相似二維圖像的三維模型，換句話說就是2D的素材實現必定程度的3D效果

Live2D能夠展現在不少平臺上，例如瀏覽器，Android，IOS，Unity等，GitHub上有不少已經實現的Live2D項目，我所養的這隻貓也來自於live2DModel這個倉庫，這個倉庫下還收集了其餘一些Live2D模型

在本身的網站上養貓很是的簡單，只須要如下兩步便可，其實live2DModel倉庫裏邊有demo的，可是對於徹底不懂前端的人來講看起來仍是有點費勁，我這裏僅僅是給整理成更容易理解和使用的版本，向原做者致敬：

1. 下載代碼倉庫到本身的項目下，倉庫地址以下：

https://github.com/ops-coffee/demo/tree/master/live2d
複製代碼

其中index.hmtl爲示例代碼，將整個項目放在nginx下能夠直接查看效果

live2d文件夾存放了貓的模型以及須要用到的兩個js文件

你只須要把index.html同層的live2d文件夾拷貝到你的項目下，而後按照下邊步驟添加js就能夠將貓養在你的站點了

2. 添加以下JS代碼到須要顯示貓的頁面上

<script src="/live2d/L2Dwidget.min.js"></script>
<script type="text/javascript">
  L2Dwidget.init({
    model: {
      jsonPath: '/live2d/tororo/assets/tororo.model.json',
    },
    display: {
      superSample: 2,
      width: 150,
      height: 150,
      position: 'right',
      hOffset: 0,
      vOffset: 0,
    },
    mobile: {
      show: true,
      scale: 1,
      motion: true,
    },
    react: {
      opacityDefault: 0.8,
      opacityOnHover: 0.2,
    }
  })
</script>
複製代碼

model： 指定model.json位置，若是你不喜歡貓也能夠在live2DModel這個倉庫下查找本身喜歡的模型，而後將模型目錄拷貝到live2d文件夾下，而後修改model路徑參數以及display顯示參數便可

display： 控制live2d模型在頁面上顯示的位置

mobile： 控制手機上是否顯示

react： 控制顯示的透明度

至此完成，再訪問網頁就會發現一隻貓靜靜的臥在那裏，看風雲變幻，自雲淡風輕~

---

最後附上逗貓地址，在線體驗：ops-coffee.cn

相關文章推薦閱讀：

• 沒有基礎也能寫個小程序
• 利用Django徒手寫個靜態頁面生成工具