網站設計lottie動畫教程
來源：領眾品牌 查看次數： 發表時間：2022-08-30 22:38:24這幾年lottie動畫非常的流行，最近在給客戶做網站設計的時候就考慮到運用這個lottie技術，摸索半天看了一些教程最終搞定這個動畫在網站頁中的顯示。
在說lottie動畫教程之前，看看下面的這個lottie效果吧
鼠標移到下圖試試
你可以鼠標放在圖上，動畫效果就出來了，這個就是采用了lottie技術。
話不多說來看看我給大家提供的教程吧！
lottie是什么？
lottie是一個動畫庫插件，它的原理是："js(lottie-player.js) + json" 的一個可以控制播放的前端庫，可以運用到網站、APP、小程序；
這里的 json文件就是通過AE軟件把做好的動畫導出json格式，AE動畫導出json需要用到Bodymovin這個插件，這里就不介紹AE動畫這塊了，大家有興趣可以研究下。
lottie的動畫json文件生成插件在lottiefiles.com上面下載。
網站設計如何運用lottie動畫？
在網站中插入lottie動畫你需要運用到這個兩個文件：
1、這個文件lottie-player.js，點擊下載 https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js；
2、*.json文件，這個為AE軟件通過插件導出的json文件，這里大家可以通過lottiefiles.com下載一些免費的；
如下代碼：
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_PBgNop.json" mode="bounce" background="#FFFFFF" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
|
只要把上面的代碼黏貼進入你的網頁中就可以看到效果了。
lottie-player 參數介紹
- hover：鼠標懸停播放
- loop：設置重復動畫
- controls ：顯示動畫控制，播放，暫停和滑塊
- autoplay：播放載入動畫
網站設計中加入lottie動畫是非常簡單的，難的是動畫本身的設計，如果你想設計一些個性化的動畫元素，就需要學習下AE+Bodymovin(AE支持導出json的插件)，這樣可以讓你的網站設計出高端檔次。
作者：一名
12年資深網站設計師 前端交互開發工程師相關文章：
-
讓Jquery代替Flash動畫網站建設效果吧
讓Jquery代替Flash動畫網站建設效果吧!相信很我客戶看過很多很酷的網站也許是flash技術也許是jquery技術，這兩種是時下最常見的，兩者都能做出很好的動畫效果，下就讓我們廈門領
2014-01-14