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