大叔今天來介紹免費的線上動畫工具Lottie files，有時候為網站增加一些小動畫，能達到畫龍點晴的效果，即使是平凡的頁面和文章也能馬上栩栩如生。
大叔目前的網站就有利用這些效果，網站加上這些效果可以讓網站瞬間活潑起來，如果你是用elementor pro版也就是付費版的話那就有可以導入動畫的功能。
如果是免費版的話那就要另外安裝Premium Addons for Elementor這款外掛，所以我們就先從安裝外掛開始吧!!
大叔有放上影片教學大家也可以去Youtube觀看教學影片!!
下面我們就一步一步的來操作吧!!
在wordpress後台點選外掛，然後安裝外掛。
接著在搜尋欄位輸入Premium Addons for Elementor，出現外掛後點選安裝，然後啟動。
啟動之後我們就可以先到LottieFiles去下載動畫。
來到LottieFiles網站我們先滑到Discover。
接著選擇free animations，然後跳到新的一頁。
出現許多免費的動畫可選，選一個動畫，然後會跳出新頁面右上角有個download，點開來會有下載的格式，我們選json。
然後會出現要你註冊的畫面，看那一種比較適合就選那一個，選好後跳回原來的畫面。
動畫允許我們做一部份的修改，我們看到右下有一個Edit layer colors點選進去會有修改介面。
左邊工具列是可以修改的元素，右邊工具列是修改的參數。
大家可以調整自己喜歡的顏色，如果有修改的話就點選updata，修改好之後我們點選最下方，下載的按鈕就可以下載到自己的電腦了。
我們來到網站然後選擇要編輯的頁面，點選使用elementor編輯，比如大叔要在首頁加入動畫，所面就在首頁點選使用elementor編輯，在工具列的搜尋欄裡輸入Lottie，出現Lottie外掛後把外掛拖到要插入動畫的欄位。
動畫工具列有一些選項可以讓我們調整動畫的一些細節
我們來看一下設定的內容
第一項有兩個選項可以選
一個是媒體庫一個是連結網址，我們剛才是下載到電腦裡，所以就選媒體庫
接著第二項我們把下載好的動畫上傳，然後動畫就插入到頁面了
動畫的部份也可以有細節可以調整，點選工具列的設定會展開來設定項目
第一項起動條件
有五個選項
第一個是螢幕範圍內
只要動畫在螢幕範圍內就會起動
第二個是 點擊動畫起動
第三個是滑鼠滑過後起動
第四個是頁面滑到動畫後起動
第五個是不起動
大家可以自行決定要用哪一種，大叔這裡是選第一個
下一個是布局螢幕範圍，這一項保持預設就好不去更動
下一個循環撥放，把它打開讓動畫重覆撥放
下一個是撥放速度，可以調整動畫的速度保持在1倍就好，大家也可以試著調整看看速度
下一個是撥放的起使跟終點，這裡可以調整動畫要從那開始撥放從0到100是完整的撥放，比如我輸入40開始一直放到100，這樣動畫就會40這裡開始撥放
下一個Reverse倒放，是指要讓動畫從頭放到尾之後在從尾放到頭，這也是大家可以決定要不要這樣放，有些動畫這樣撥放反而有不一樣的效果
下一個渲染有svg跟conves兩種，簡單說canvas適合網站有許多物件要被頻繁重畫的圖形，SVG最適合大型渲染區塊的應用程式，一般用SVG就可以了
Lazy Load這個功能是使用者透過滑鼠或觸控，捲動瀏覽頁面直到頁面下方時，才會依照Javascript等程式碼，發出連線請求自動下載載入更多內容於同一網頁，目的是減少網路頻寬與裝置負擔
接下來我們點選工具列上方的樣式，這裡可以調整動畫的大小
全部設定完成後我們儲存，然後就可以看一下效果了
大家可以動手操作看看，為自己的網站增加活力
以上就是整個 WordPress免費動畫圖庫LottieFiles動畫 的操作流程
大家可以到大叔的youtube和Facebook上訂閱關注大叔，以獲取定期更新的最新內容。
不務正業的廣告行銷人，認為網頁設計跟廣告行銷一樣都需要無限的創意
從事廣告行銷及網頁設計至今二十幾年，2009年接觸Wordpress就一頭鑽進
希望把所學到Wordpress知識跟經驗教授給大家。
