時至今日Web動效已經(jīng)不是什么新鮮事了，在很多Web頁面或Web應(yīng)用上都有Web動效的身影。愛掏網(wǎng) - it200.com承載Web動效的方式也很多種，比如早期的Gif動效，也有人用視頻來表示動效，也有使用JavaScript構(gòu)建動效（比如Canvas，WebGL構(gòu)建），還有一些JavaScript庫構(gòu)建動效以及CSS構(gòu)建Web動效等。愛掏網(wǎng) - it200.com不過，近幾年更多的是在探討如何快速生產(chǎn)，并且還原動效。愛掏網(wǎng) - it200.com針對于這方面，在業(yè)內(nèi)Lottie動效算是流行的一種，也是口碑很好的一種。愛掏網(wǎng) - it200.com今天我們就來看看，如何在React中借助Lottie的能力，快速還原Web動效。愛掏網(wǎng) - it200.com
Lottie官網(wǎng)是這樣描述的：
大致意思是“ Lottie是一個適用于Android、iOS、Web和Windows的庫，它可以解析用Bodymovin導(dǎo)出的json格式的Adobe After Effects（AE）動效，并在移動端和Web上原生渲染！ ”
在這篇文章主要會使用Lottie的lottie-web庫解析從AE導(dǎo)出的動效（JSON文件），并將其以SVG或Canvas的方式將動效繪制到Web頁面中。愛掏網(wǎng) - it200.com最后還會和大家演示如何使用React版本的Lottiie Web庫（即 lottie-react-web）在React中構(gòu)建Lottie動效。愛掏網(wǎng) - it200.com
你可能會問Lottie動效是什么？
如果你有使用過Twitter，在點贊的時候會有一個動效：
將這個動效提取出來，會看得更清楚一些：
當(dāng)你點推文下的“心形”按鈕時周圍會有細(xì)小的彩色氣泡擴(kuò)散，同時它看起來會在按鈕周圍變形為一個圓圈，然后再穩(wěn)定到最終的“喜歡”狀態(tài)（心形填滿紅色）。愛掏網(wǎng) - it200.com如果心形只是從描邊過渡到紅色填充，效果就沒有那么吸引人。愛掏網(wǎng) - it200.com
這個效果不用Lottie也有其他的方式實現(xiàn)，只不過實現(xiàn)的效果、成本之間的差異。愛掏網(wǎng) - it200.com
前面提到過，目前實現(xiàn)Web的動效方式有很多種，比如：
- 使用圖片來承載動畫效果，比如老一點的Gif圖，近年剛興起的APNG圖
- 使用視頻來承載動畫效果，比如
.mov、.mp4格式的視頻 - 使用CSS的
@keyframes實現(xiàn)的幀動效，使用motion-path實現(xiàn)路徑動效 - 使用JavaScript庫實現(xiàn)的Web動效，比如GSAP、PixiJS、Anime.js、PlayCanvas和Three.js等
- 使用原生Web Animation API構(gòu)建動效
- 使用SVG構(gòu)建動效
- 在React中，常用 react-spring 和 Framer Motion 構(gòu)建動效
對于Web開發(fā)者而言，不管使用哪種技術(shù)來實現(xiàn)動效，都是基于設(shè)計師提供的動畫效果原型。愛掏網(wǎng) - it200.com簡單地說，就是想盡辦法實現(xiàn)設(shè)計師設(shè)計的動畫效果。愛掏網(wǎng) - it200.com在當(dāng)下，設(shè)計師制作動效的工具主要是AE為主（當(dāng)然也有其他的工具）。愛掏網(wǎng) - it200.com換句話說，在開發(fā)動效時，設(shè)計到開發(fā)這個過程往往是痛苦的，不過有了Lottie就沒那么痛苦了。愛掏網(wǎng) - it200.com
因為設(shè)計師在AE上制作好動效，可以使用Bodymovn插件導(dǎo)出JSON文件。愛掏網(wǎng) - it200.comWeb開發(fā)者可以直接引用Lottie庫，將JSON直接渲染出Web動效。愛掏網(wǎng) - it200.com
Lottie官網(wǎng)也是這么宣傳的：
- 靈活使用AE特性
- 隨心所欲控制你的動效
- 文件體積小
簡而言之，Lottie提供了一套從設(shè)計師使用AE到各端開發(fā)者實現(xiàn)動效的工具流。愛掏網(wǎng) - it200.com Lottie可以將設(shè)計師在AE上設(shè)計的動效原原本本的在Web頁面上渲染出來，完美還原了動效的精細(xì)度，并且對動效擁有足夠的控制能力。愛掏網(wǎng) - it200.com
在這篇文章主要和大家一起探討的是如何使用Lottie-web版本構(gòu)建動效，以及在React框架上如何快速，精確地實現(xiàn)設(shè)計師設(shè)計的動效。愛掏網(wǎng) - it200.com在使用Lottie-web，需要具備幾個前提條件：
- 獲取Lottie-web的庫