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