於 Laravel 專案中套用 Lottie 套件，增加簡單但又效果十足的小動畫

前言：
近期慢慢學到了一些新的技術，
雖然大多都是 JavaScript 套件的使用。
但也開闊了蠻大的視野。

也將這次的主題 Lottie 套用在本網站上，
可以在網站側欄中發現可愛的小動畫。


故而想將這次的 Lottie 網站更新寫成一篇文，
用以紀錄，避免日後忘記步驟。

步驟 0 - 利用 After Effect 將動畫匯出成 Json 格式：
之所以歸類在步驟 0 的原因是，
我還沒有涉獵到 After Effect 的部分。
網站上的動畫目前都是由免費提供 Lottie Json 的網站上下載來使用的。
After Effect 部分會再向他人討教後，
日後有機會再補上。

至於免費提供 Lottie Json 的網站，
只要在搜尋引擎下關鍵字就能夠找到幾個可以利用的網站。
將下載下來的 json 檔案放置於 Laravel 專案中的 public 資料夾下每個人習慣放置 json 檔的位置。



步驟 1 - 前往 Lottie Web 版 Github 頁面
Lottie 有提供許多不同的版本，
像是 iOS、Android 及 Web 版
這次我們是要在 Laravel 上套用，所以選擇的是 Web 版
點我前往 Github 頁

接著找到 /build/player 中的 lottie.min.js 檔案，
將其下載下來，
放置於 Laravel 專案中的 public 資料夾下每個人習慣放置 js 檔的位置。

步驟 2 - 於 JS 區塊中引入 lottie.min.js
以我個人的習慣，
我會有一個 js.blade.php 的檔案，
裡面放置共同頁面所使用的 js。

<script src="{{ asset('assets/js/lottie.min.js') }}"></script>

引入完成後，這步驟就結束了！

步驟 3 - 在想呈現動畫的地方撰寫 html
撰寫這篇文章時，
我正打算將本網站的 404 頁面做點小動畫，
所以我在 404.blade.php 頁面上放了以下的程式碼：

<div id="404-lottie" style="width: 80%" class="center"></div>

沒錯，就是一個帶有 id 的 <div>，
另外設定其 style 及 class 等 css 元素。
接著我們就可以進入最後步驟了

步驟 4 - 撰寫 js 使 Lottie 開始運作
開始在 js 區塊正式引入 Lottie

<script>
    // 請使用 JavaScript 抓取 ID 元件，使用 JQuery 會抓不到
    var notFoundLottieElement = document.getElementById('404-lottie');

    var notFoundLottie = bodymovin.loadAnimation({
        container: notFoundLottieElement, // 引入元件
        renderer: 'svg', // 類型
        loop: true, // 是否重播
        autoplay: true, // 是否自動播放
        path: '{{ asset("assets/images/404.json") }}', // 檔案路徑
    });
</script>

沒錯，這樣就完成了。
當然還有許多指令可以使用，
像是：
onComplete 當影片播完後執行的 fn
playSegments 重複播放特定片段
等等的功能。

如有需求，可以參閱 Lottie 的官網。
點擊此處前往



步驟 5 - 成果檢視
以上動作都完成了，
接著就去看看成果如何吧！

點擊此處觀看成果

後記
不得不說 Lottie 的出現，
對於網站的效果呈現帶來很大的革新。
首次接觸這個套件時，
讓我這個偏向於後端的碼農感受到了前端的有趣及成就感。

如此好用的套件，
我已經太晚知道了。
故將本文紀錄於此，希望對讀者們也有幫助！