做網(wǎng)站軟件要錢(qián)嗎都有什么推廣平臺(tái)
一、Lottie簡(jiǎn)介
Lottie是一個(gè)庫(kù),可以解析使用AE制作的動(dòng)畫(huà)(需要用bodymovin導(dǎo)出為json格式),支持web、ios、android和react native。在web側(cè),lottie-web庫(kù)可以解析導(dǎo)出的動(dòng)畫(huà)json文件,并將其以svg或者canvas的方式將動(dòng)畫(huà)繪制到我們頁(yè)面中
總的來(lái)說(shuō),
- Lottie通過(guò)讀取json文件信息實(shí)現(xiàn)動(dòng)畫(huà)效果。
- json信息包括動(dòng)畫(huà)長(zhǎng)度、寬度、動(dòng)畫(huà)資源、圖層信息等,這些屬性闡述了動(dòng)畫(huà)該做什么、該怎么做。
1.1 lottie的優(yōu)點(diǎn)
Lottie方法方案是由設(shè)計(jì)師出動(dòng)畫(huà),導(dǎo)出為json,給前端播放。所以,使用Lottie方案的好處在于:
- 動(dòng)畫(huà)由設(shè)計(jì)使用專業(yè)的動(dòng)畫(huà)制作工具Adobe After Effects來(lái)實(shí)現(xiàn),使動(dòng)畫(huà)實(shí)現(xiàn)更加方便,動(dòng)畫(huà)效果也更好;
- 前端可以方便的調(diào)用動(dòng)畫(huà),并對(duì)動(dòng)畫(huà)進(jìn)行控制,減少前端動(dòng)畫(huà)工作量;
- 設(shè)計(jì)制作動(dòng)畫(huà),前端展現(xiàn)動(dòng)畫(huà),專業(yè)人做專業(yè)事,分工合理;
- 賣家秀即買家秀,還原程度百分之百;
- 使用lottie方案,json文件大小會(huì)比gif文件小很多,性能也會(huì)更好。
- 支持跨平臺(tái),開(kāi)發(fā)成本較低,一套Lottie動(dòng)畫(huà)可以在Android/IOS/Web多端使用。
- 性能好,端上除了解析json,基本沒(méi)有其他耗性能的操作;并且相比于需要存儲(chǔ)較多圖片的幀動(dòng)畫(huà),Lottie可以節(jié)省比較多的內(nèi)存空間。
二、使用方法(附基本代碼)
2.1 前期準(zhǔn)備
- 下載安裝** After Effects **
- 在AE上制作動(dòng)畫(huà)
- 安裝插件Bodymovin,并使用插件導(dǎo)出,導(dǎo)出的是json格式的文件結(jié)構(gòu)
- 使用【lottie-web】依賴讀取該文件導(dǎo)出的json 格式的內(nèi)容 便引入了該lottie動(dòng)畫(huà)
2.2 基本代碼
<template><div class="lottie_page"><div id="lottie"></div></div>
</template>
<script>
import lottie from 'lottie-web'; // 引入lottie 庫(kù)
import * as animationData from '@/assets/lottie/data.json'; // 引入素材文件
export default {data() {return {};},mounted() {this.lot = lottie.loadAnimation({container: document.getElementById('lottie'),renderer: 'svg',loop: false,autoplay: false,animationData: animationData.default});},
};
</script>
所以,在網(wǎng)頁(yè)上制作動(dòng)畫(huà)就是這么簡(jiǎn)單,只需少量的代碼便可以實(shí)現(xiàn)!!
三、效果
四、參考
- 原生插件 用AE導(dǎo)出json | LottieFiles plugin | 原生插件
- bodymovie插件 https://pan.baidu.com/s/1vcM86DyoZjefwCN5_-GqIA?pwd=2301&at=1711347005762
- 使用 如何在vue中使用Lottie - 掘金
附加:進(jìn)階玩法
第一階段
整體元素的簡(jiǎn)單的播放,暫停,設(shè)置播放進(jìn)度等
第二階段
多個(gè)元素各自有自己的播放的規(guī)律
- AE中有一個(gè)總合成,不同元素之間有一個(gè)單獨(dú)的合成
- 導(dǎo)出多個(gè)不同元素的json文件
- 在vue中為每個(gè)json文件定義一個(gè)標(biāo)簽,并掛載事件
- 單獨(dú)控制元素的播放規(guī)律
第三階段
多個(gè)元素有個(gè)自己動(dòng)態(tài)的播放規(guī)律
由于 lottie是用過(guò) json 來(lái)控制動(dòng)畫(huà)的,而前端與后端交互最常見(jiàn)的格式是什么?
JSON!!
因此,可以從后端獲取數(shù)據(jù)之后,在前端重新拼接到j(luò)son中,就可以實(shí)現(xiàn)動(dòng)態(tài)的動(dòng)畫(huà)。
舉個(gè)栗子🌰:
- 拼多多翻牌抽獎(jiǎng)(動(dòng)態(tài)設(shè)置金額,指定選中翻牌)