亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

大家好，我是灰大設(shè)計(jì)團(tuán)隊(duì)的灰色執(zhí)照。

自從我上次教大家模仿制作 袋鼠云 公司的這個(gè)百分比環(huán)形動(dòng)效后，很多同學(xué)希望我順便寫一下立體餅圖的教程。

▲ 這就是上次教大家制作的百分比環(huán)形動(dòng)效，想學(xué)習(xí)我們過往教程可以用瀏覽器打開下面這個(gè)地址：

https://pslkzs.com/course/course.php

▲ 現(xiàn)在大家想學(xué)習(xí)這個(gè)效果，該效果出處為（如果不小心侵犯了你的權(quán)益，可以找我刪除）：https://www.zcool.com.cn/work/ZNDk5Nzk4NjA=.html

需要特別強(qiáng)調(diào)的是：

我當(dāng)然不可能知道原作者到底是如何完成他的設(shè)計(jì)，如何落地他的動(dòng)效的。所以，在開始這項(xiàng)工作之前，我會(huì)認(rèn)真的去分析一下原作，結(jié)合我自己的思路，完成看起來(lái)“相近”的效果。

實(shí)際上，條條大路通羅馬。我實(shí)現(xiàn)的最終效果也可能和原作大相徑庭。灰哥主要是教你學(xué)習(xí)、思考、分析的過程。咱們力求學(xué)會(huì)方法，舉一反三，而不是麻木的照著每個(gè)參數(shù)機(jī)械的學(xué)習(xí)傻瓜教程。

今天我們的教程主要分成4個(gè)部分：

 1、利用 PS 快速的制作靜態(tài)的立體餅圖。
 2、利用 AE 制作餅圖上升切換的動(dòng)態(tài)效果。
 3、利用 AE 制作餅圖底部粒子向中間聚攏的效果。
 4、用代碼實(shí)現(xiàn)立體餅圖。

開發(fā)制作這個(gè)教程我主要是考慮到以下幾點(diǎn)：

 1、我不想使用三維軟件（部分ui設(shè)計(jì)師他們根本就不安裝C4d、Blender）
 2、制作起來(lái)要足夠快（學(xué)習(xí)難度一定要小，最少要比學(xué)建模方便很多很多）
 3、不能是飛機(jī)稿，設(shè)計(jì)稿要可以實(shí)現(xiàn)。
 4、代碼不能太多，程序員不能太累（一定要盡可能保住他們?yōu)閿?shù)不多的頭發(fā)）

怕大家學(xué)不會(huì)，除了圖文教程外，教程的1、2、3部分也都錄制了視頻教程。想要看高清版本的視頻，請(qǐng)?jiān)L問我的B站：
https://space.bilibili.com/299970767
我強(qiáng)烈建議大家觀看視頻教程，因?yàn)椴襟E很多，看視頻教程學(xué)習(xí)起來(lái)會(huì)更快、更清晰！如果你在上班，不方便看視頻。我們也準(zhǔn)備了圖文教程。

圖文教程和視頻教程可能完全不一樣，因?yàn)槲覍懡坛潭际牵弘S手、隨心、隨性。手中有劍，便握劍前行；手中無(wú)劍，便忘劍前進(jìn)。劍客本就是一柄出鞘利劍。根本就不需要按步驟去記住那一招一式。只要你和我一樣平時(shí)練習(xí)得足夠多，自然能做到劍出無(wú)形，無(wú)跡可尋，人劍合一。江湖人稱：劍人。（好像有什么地方怪怪的）

視頻教程：

▲ 視頻1 用PS制作靜態(tài)的立體餅圖。

▲ 視頻2 用AE制作餅圖上升的動(dòng)效。

▲ 視頻3 制作餅圖底座：粒子效果。

圖文教程：

1、使用PS快速制作靜態(tài)的立體餅圖。

步驟1   在PS中新建一個(gè)800*800的文檔 

步驟2  打開《PS拉框助手》這個(gè)插件，在界面上用選框工具拉一個(gè)方框，并且設(shè)置相關(guān)的參數(shù)。

▲ 《PS拉框助手》這款插件是免費(fèi)的，你可以在這里下載到：https://www.pslkzs.com

參數(shù)設(shè)置如下：

▲ 將餅圖設(shè)置成鏤空，并且設(shè)置4組數(shù)據(jù)。顏色值盡量和我們參考的餅圖一致。

 步驟3  點(diǎn)擊自動(dòng)繪制按鈕，插件就自動(dòng)幫你繪制好了一個(gè)鏤空的餅圖。

▲ 一共4個(gè)圖層，圖層的名稱上還有對(duì)應(yīng)的數(shù)值和百分比數(shù)據(jù)。

 步驟4  用路徑選擇工具，選擇單個(gè)扇形，將他們的路徑合并。

▲ 由于PS拉框助手這款插件生成的扇形沒有合并路徑，所以我們自己手動(dòng)合并一下。

▲ 這就是形狀合并以后的效果了。雖然比起用ai做的，有一些多余的點(diǎn)，但是不要在意它，不會(huì)有什么實(shí)質(zhì)性的影響。

步驟5 選擇整個(gè)文件夾，Ctrl + T 然后 右鍵 > 透視 將左上角的點(diǎn)朝右側(cè)拉動(dòng)。

▲ 其實(shí)就是用PS做出近大遠(yuǎn)小的透視效果。一定要記得選擇整個(gè)圖層文件夾。

 步驟6  按一下回車，確定后。再次Ctrl+T 按住Shift將底部中間的那個(gè)點(diǎn)朝上拉動(dòng)。

▲ 部分ps版本可能有區(qū)別，不是按住Shift而是Alt，你自己都嘗試下。

 步驟7  選擇移動(dòng)工具，選擇其中一個(gè)圓環(huán)（我這里選黃色）然后按住alt鍵，并且同時(shí)按方向鍵↑，按一次就會(huì)多出一個(gè)圖層，并且朝上面移動(dòng)了1個(gè)像素。一共按15次。

▲ 這樣，你就復(fù)制了15個(gè)圖層。黃色的部分就高出了一截。次數(shù)越多，立體的餅圖高度就越高。

 步驟8  把底下14個(gè)圖層都選中，Ctrl+E合并圖層，然后用路徑選擇工具選中合并的所有路徑，把路徑也合并成一個(gè)。最后，把這個(gè)路徑改成深黃色。

▲ 除了合并圖層，你也需要把路徑也一起合并了。合并路徑剛才我們上面做過。

合并后的路徑（深黃色）是這個(gè)樣子，有很多多余的點(diǎn)，但是沒有任何影響，不用管他。

 步驟9  用同樣的辦法，把其他的部分都弄出來(lái)。

學(xué)會(huì)這個(gè)技能以后，你當(dāng)然很容易做出選中的效果。向上移動(dòng)15次改成25次，自然就變高了！

▲ 又快又簡(jiǎn)單，只需要幾分鐘就可以做好立體餅圖的效果。不過上圖這些效果你都不需要做，因?yàn)檫@塊內(nèi)容我們最終是在AE里面實(shí)現(xiàn)動(dòng)效。

————————————————————————————————————————

2、使用AE制作餅圖上升的動(dòng)態(tài)效果。

 步驟1  在AE中新建一個(gè)寬高都為1200px的合成組。

步驟2  新建一個(gè)形狀圖層，在圖層上用鋼筆隨便繪制一個(gè)圖案。

▲ 我用鋼筆工具，隨便畫了一個(gè)小三角形。

 步驟3  復(fù)制這個(gè)形狀圖層，一共復(fù)制成8個(gè)。

▲ 三角形位置重合了，實(shí)際上有8個(gè)小三角形。

 步驟4  將這8個(gè)圖層根據(jù)顏色命好名字，并且把三角形都改成對(duì)應(yīng)的顏色。

▲ 為了方便查看，我們將三角形移動(dòng)一下位置，不要讓它們重疊了。并且把每個(gè)三角形都改成餅圖對(duì)應(yīng)的顏色。

 步驟5  打開剛才用PS做好的立體餅圖，用路徑工具選擇深黃色那個(gè)路徑，Ctrl+C 復(fù)制一下。

 步驟6  展開 黃-深色 這個(gè)圖層，選中目錄 > 形狀 > 路徑1 > 路徑，粘貼到這個(gè)路徑上。

這就是粘貼后的效果，整個(gè)路徑都復(fù)制過來(lái)了，而且顏色也是對(duì)的。

 步驟7  用同樣的方法，把其他的路徑都粘貼過來(lái)。

▲ 這就是全部弄好的樣子。

 步驟8  通過移動(dòng)工具，手動(dòng)的把這些圖層都擺放好，弄成立體餅圖的樣子。

▲ 這就是擺放好的樣子，接下來(lái)就要開始弄?jiǎng)赢嬃恕?/p>

 步驟9  選中淺黃色，在第一幀的地方對(duì)位置屬性K幀。

 步驟10  在第20幀的時(shí)候，按住Shift并且按2次↑方向鍵。這樣淺黃色圖層就移動(dòng)了大概20像素。

▲ 最重要的一點(diǎn)：視圖的縮放比例必須是100%。因?yàn)橹挥形覀兯械囊晥D縮放比例都是100%，這樣我們移動(dòng)操作才能保證一致。

 步驟11  在第1幀對(duì)深黃色的路徑K幀

 步驟12  在第20幀的時(shí)候，只選中深黃色上面部分的2個(gè)點(diǎn)。

 步驟13  把選中的點(diǎn)在100%的視圖下，還是按住Shift + ↑ 移動(dòng)2次。

步驟12和步驟13比較難，我再用動(dòng)圖演示一下給大家看：

▲ 展開深黃色圖層的目錄 > 形狀1 > 路徑1  選中路徑1，你就可以選擇頂部的那2個(gè)點(diǎn)了。記住一定要在畫面縮放100%的情況下操作，這樣Shift + ↑移動(dòng)就和淺黃色圖層移動(dòng)保持一致了。

預(yù)覽一下做好的效果：

▲ 黃色餅圖上升的效果很不錯(cuò)，簡(jiǎn)單的移動(dòng)動(dòng)畫做出來(lái)立體的感覺。

 步驟14  復(fù)制左側(cè)關(guān)鍵幀到右側(cè)，這樣就形成了  升起 > 停頓 > 下降 的效果。

▲ 一次只能復(fù)制一個(gè)關(guān)鍵幀，不能多選。選中那個(gè)小點(diǎn)后，復(fù)制，然后拖拽到新的幀位置，粘貼即可。粘貼后相應(yīng)位置會(huì)多一個(gè)小點(diǎn)。

預(yù)覽一下效果：

▲ 就是這么簡(jiǎn)簡(jiǎn)單單，餅圖的上升效果就做好了。

 步驟15  用同樣的辦法把其余的部分做好。

▲ 這就是最終的效果了，制作動(dòng)畫的過程中，你需要注意一下節(jié)奏。也就是說：黃色下降的時(shí)候，要讓藍(lán)色上升。時(shí)間上，他們要有重合。

這就是整個(gè)動(dòng)畫在時(shí)間方面的控制了：

▲ 停頓 > a上升 > a停頓 > a下降的同時(shí)b上升 > b停頓 > b下降的同時(shí)c上升 > c停頓 > c下降的同事d上升 > d停頓 > d下降

接下來(lái)我們就要制作中間的數(shù)字部分了。你可以制作百分比，也可以制作數(shù)值。我們這里用百分比來(lái)做。

 步驟16  新建一個(gè)文字圖層，在特效控制臺(tái)里面對(duì)文字圖層添加 文字 > 編號(hào)。

▲ 選擇一種沒有版權(quán)的字體，最好是比較粗的字體，設(shè)置為右對(duì)齊。

這是添加以后的效果：

 步驟17  設(shè)置 小數(shù)點(diǎn)位數(shù)、位置、填充色這3個(gè)屬性，把文字設(shè)置成白色0.00。

▲ 通過觀察餅圖的圖層名稱，百分比數(shù)值分別是：9.92%、19.83%、24.79%、45.45% 這些數(shù)值，就是我們要K幀的數(shù)字。

 步驟18  對(duì)文字圖層的值K幀，不停的改變文字的數(shù)值。

▲ 百分比文字變化的效果就做好了。還差一個(gè)百分號(hào)。

 步驟19  再添加一個(gè)文字圖層，輸入一個(gè)%符號(hào)，并且調(diào)整到對(duì)應(yīng)的位置。

▲ 整個(gè)餅圖的動(dòng)效就做好了。

接下來(lái)我們就要開始制作餅圖底部的粒子效果了，粒子效果的插件往往參數(shù)多如牛毛，我們很難調(diào)整出和原作者一模一樣的東西來(lái)。為了達(dá)到好的效果，你要反復(fù)的嘗試各種參數(shù)。實(shí)際上，這樣的效果利用 Form 插件和利用 Particular 都可以實(shí)現(xiàn)。

————————————————————————————————————————

3、使用AE制作餅圖底部粒子向中間聚攏的效果。

 步驟20  新建一個(gè)合成組，默認(rèn)名稱是合成2（可以不用改它，一共就2個(gè)東西，合成1是餅圖，合成2是底座）

▲ 因?yàn)檫@個(gè)效果是在上一個(gè)文件里面繼續(xù)制作，所以，這里就不是步驟1了。制作立體餅圖動(dòng)效我們用了19步，現(xiàn)在我們從第20步開始。

 步驟21  在合成2里面新建一個(gè)固態(tài)層（有的翻譯也叫純色層）

 步驟22  在特效控制臺(tái)里面對(duì)這個(gè)純色層應(yīng)用Form效果。

▲ Form是一款粒子插件，你需要自己手動(dòng)安裝，通過百度很容易就下載得到。但是它的版本有很多，安裝前一定要確認(rèn)你AE的版本，找到配套的。應(yīng)用Form插件后，你就得到了一個(gè)三層的方塊。它們疊加在了一起。每一層小方塊橫向和縱向都有很多白色的粒子小圓點(diǎn)。

 步驟23  把 Base Form 中的 Particles in Z 調(diào)整成1。這樣三層方塊就變成了一層。

 步驟24  把 Base Form 中的 Size X 和 Size Y 數(shù)值都拉大，讓它們鋪滿整個(gè)屏幕。

 步驟25  把 Fractal Field 下面的 Displace 屬性調(diào)整大一點(diǎn)兒。這個(gè)屬性的意思就是讓這些粒子在它原有的位置上偏移一點(diǎn)兒?？雌饋?lái)就“亂亂的”，無(wú)規(guī)則的樣子了。

▲ 添加這個(gè)屬性后，粒子好像被扭了一下。

 步驟26  把 Fractal Field 下面的 FlowY 設(shè)置成負(fù)數(shù)。

▲ 你可以把Flow理解成流動(dòng)。Flow Y 就是按照Y的方向流動(dòng)，設(shè)置負(fù)數(shù)后，你播放會(huì)發(fā)現(xiàn)粒子從底部向頂部開始流動(dòng)了起來(lái)。它有了一個(gè)上升的效果。

 步驟27  設(shè)置Disperse and Twist下面的Disperse 屬性為3。

▲ Disperse屬性是讓粒子在他周圍晃動(dòng)。Twist屬性是讓粒子扭曲（扭成一個(gè)像DNA那樣的結(jié)構(gòu)）

 步驟28  設(shè)置Spherical Field 下面的 Sphere1 和 Sphere2 下面的 Strength 屬性為100。再設(shè)置Radius屬性（這個(gè)屬性是調(diào)整圓圈的大?。?/strong>

▲ 設(shè)置好這些屬性后，就能看到一個(gè)圓圈了。

 步驟29  把 Base Form 的 Size X 和 Size Y 都改小，邊調(diào)整邊觀察，不要讓粒子跑到圓圈的外面去了。現(xiàn)在粒子的數(shù)量非常少，橫坐標(biāo)和縱坐標(biāo)都是默認(rèn)的70個(gè)粒子，我們把Particles in X 和 Particle in Y 這2個(gè)數(shù)值都調(diào)大，這樣粒子就變得非常多了。

▲ 看到調(diào)整這些參數(shù)后，就能看到粒子變成一個(gè)圓圈了。

通過以上這幾個(gè)步驟，這個(gè)動(dòng)畫就基本上做完了，你預(yù)覽效果后，根據(jù)實(shí)際情況改一改里面的參數(shù)，比如Flow Y是不是調(diào)整大一下更好看？比如扭曲是否需要調(diào)大一點(diǎn)兒?？傊?，你幾乎不需要調(diào)整新的屬性，但是看你要微調(diào)上面我提到的那些屬性的值。

▲ 一頓操作猛如虎后，得到了這樣一個(gè)效果。

 步驟30  修改 Particle 下面的 Color 屬性為藍(lán)色，這樣粒子就變成了藍(lán)色。

 步驟31  勾選 Fractal Field 下的 Flow loop 屬性，把粒子設(shè)置成循環(huán)播放的。

▲ 這里的循環(huán)我設(shè)置了8.3秒。做設(shè)計(jì)可以設(shè)置這么長(zhǎng)時(shí)間，但是寫代碼的時(shí)候，我們循環(huán)的時(shí)間越短加載的圖片越少，應(yīng)該盡可能的設(shè)置成1秒。

 步驟32  新建一個(gè)50毫米的攝像機(jī)，目的是讓底座倒下去。

 步驟33  把3D功能打開，設(shè)置X軸旋轉(zhuǎn)為負(fù)數(shù)角度，讓整個(gè)底座動(dòng)畫倒下去。

 步驟34  新建一個(gè) 合成3，時(shí)間為8秒10幀（因?yàn)橹拔覀兒铣?和合成2的動(dòng)畫都是做成了8秒10幀為一個(gè)循環(huán)）

 步驟35  把 合成1 和 合成2 都放到 合成3 里面去。

▲ 放進(jìn)去后，你會(huì)發(fā)現(xiàn)很可能底座（也就是合成2）做的傾斜角度或者大小不合適，你要再次回到合成2里面去調(diào)整縮放或者X軸旋轉(zhuǎn)。

經(jīng)過對(duì)合成2細(xì)微的調(diào)整，最終效果就是這樣了：

 步驟36  制作一個(gè)發(fā)光的亮點(diǎn)和底座邊上的弧線。

▲ 利用AE做一個(gè)發(fā)光亮點(diǎn)圖片，再用ps畫一個(gè)橢圓。最終完成了這個(gè)透明背景的裝飾png圖片。把圖片疊加進(jìn)去。發(fā)光亮點(diǎn)我們公眾號(hào)之前寫過教程教大家，你可以訪問這里，去看看那篇教程：

https://pslkzs.com/course/course.php

那篇教程的名字是：《保姆級(jí)教程：手把手教你制作光效素材》

把這個(gè)PNG圖片也放進(jìn)去，當(dāng)成一個(gè)裝飾。這樣整個(gè)立體餅圖就完全做好了。這就是最終效果了：

▲ 這就是最終效果了，實(shí)際上原作者還有更多的細(xì)節(jié)，比如餅圖一開始透明度從0到1，還有上升的效果等等。那些細(xì)節(jié)我就不在教程里面介紹了。教程只教大家重要的關(guān)鍵點(diǎn)，你可以根據(jù)需要自己添加相應(yīng)細(xì)節(jié)，把這個(gè)效果做到更完美。

當(dāng)然，我希望大家學(xué)習(xí)的時(shí)候可以舉一反三，比如我們之前公眾號(hào)教的Saber效果，你其實(shí)也可以應(yīng)用到這里：

▲ 我拿以前的教大家的Saber效果隨便嘗試了一下。

————————————————————————————————————————

4、用代碼實(shí)現(xiàn)立體餅圖。

實(shí)現(xiàn)立體餅圖的效果有很多種，highCharts里面有現(xiàn)成的。訪問這里，就可以看到highCharts現(xiàn)成的示例：

https://www.highcharts.com/demo/3d-pie-donut

▲ highCharts里面開發(fā)了很多種立體的圖表，使用起來(lái)都非常的方便。

除了highCharts之外，Echarts我也找到了現(xiàn)成的實(shí)現(xiàn)方案。

https://www.makeapie.com/editor.html?c=xX9xcKXRjq

▲ ECharts里面也有人寫過現(xiàn)成的方案，它的餅圖甚至還根據(jù)數(shù)值不同，Z軸的高度不同。有點(diǎn)立體餅圖+玫瑰圖組合的感覺。

不過我們今天并不是要用highCharts或者Echarts來(lái)實(shí)現(xiàn)這個(gè)效果。而是用到 d3.js 來(lái)實(shí)現(xiàn)。d3是一個(gè)javascript庫(kù)，它主要用于對(duì)數(shù)據(jù)的動(dòng)態(tài)圖表展示。通過HTML、SVG以及CSS，D3可以讓數(shù)據(jù)展現(xiàn)更加鮮活。

之所以選用D3其實(shí)還有一個(gè)原因，那就是：快、不費(fèi)工夫。加載2個(gè)js，再寫上一兩句話就直接完成了所有的效果。前端小哥再也不會(huì)說你的設(shè)計(jì)太復(fù)雜，不好實(shí)現(xiàn)，讓你修改設(shè)計(jì)了。

我們還是少說廢話，直接進(jìn)入正題。

 步驟1  加載兩個(gè)js。

▲ 其中d3.js是這個(gè)js框架的代碼。Donut3D.js是大神在github上自己寫的把圖表變立體的代碼。你通過搜索就能下載。

 步驟2  設(shè)置好數(shù)據(jù)，并且新建一個(gè)Donut3D的立體餅圖。

▲ 這段代碼意思是：在body中新建一個(gè)寬度和高度都是400像素的svg對(duì)象，并且在它里面畫一個(gè)餅圖。

除了數(shù)據(jù)的值，我一共就寫了3行代碼，一個(gè)立體餅圖就完成了。我們來(lái)看下效果：

▲ 又快又方便，好用到哭啊。

這個(gè)代碼的強(qiáng)大之處在于：它可以很容易的調(diào)整傾斜角度，設(shè)置Donut3D.draw()函數(shù)里面的第6個(gè)參數(shù)即可。

▲ 只要簡(jiǎn)單的修改參數(shù)，餅圖的傾斜角度就發(fā)生了變化，實(shí)在是太方便啦~你設(shè)計(jì)成啥樣程序員都不擔(dān)心了。

接下來(lái)，我們就要開始寫餅圖的底座代碼了，也就是那個(gè)倒下去的圓圈粒子效果。我們?cè)贏E中制作的那個(gè)粒子循環(huán)一共是8秒10幀，每秒是30張圖片，一共有250張圖片。在一個(gè)網(wǎng)頁(yè)里面一口氣加載上百?gòu)垐D片是肯定不合理的。所以我們先要在AE里面修改粒子循環(huán)的時(shí)間，越短越好。1秒鐘左右30張圖片不停的循環(huán)是非常不錯(cuò)的選擇。

 步驟3  打開AE把 合成2 里面的粒子循環(huán)改成1秒。

▲ Loop Time直接手動(dòng)設(shè)置成1秒，AE彈出了一個(gè)對(duì)話框，顯示循環(huán)一次Form最少需要1.17秒。點(diǎn)擊確定，手動(dòng)改成1.17秒。需要注意的是，循環(huán)的最短時(shí)間其實(shí)是根據(jù)你調(diào)整的各種參數(shù)計(jì)算而來(lái)的，我們?cè)O(shè)置的參數(shù)很可能不同，你不一定會(huì)彈出提示框，就算彈出了，也不一定是1.17秒。

1秒鐘是30幀，0.17秒 * 30 = 5.1，也就是說 合成2 的時(shí)間設(shè)置成00:01:05則是一個(gè)完整的循環(huán)。這個(gè)循環(huán)需要35張圖片即可完成，比起修改前250張圖片合理多了。

 步驟4  將合成2的時(shí)間修改成00:01:05。

▲ 右鍵合成2 > 圖像合成設(shè)置 這樣就可以修改它的時(shí)長(zhǎng)了。

接下來(lái)是騷操作，直接摳掉粒子效果的所有黑色背景。得到透明背景的png圖片！

 步驟5  對(duì)合成2添加 UnMult 效果。

▲ 這是一款自動(dòng)扣除純黑色背景的插件，你隨便百度就可以下載到。什么參數(shù)都不需要調(diào)整，添加后它就是透明背景的了。好用到哭~

 步驟6  將合成2添加到渲染隊(duì)列，設(shè)置輸出格式為png，通道一定要選擇RGB+Alpha。

▲ 只有選了 RGB+Alpha PNG圖片才是透明背景的。

 步驟7  點(diǎn)擊渲染按鈕，這樣你就得到了這個(gè)循環(huán)的所有圖片。

▲ 一共35張。你一定要學(xué)會(huì)如何計(jì)算最短循環(huán)，剛才的1.17秒我是如何轉(zhuǎn)化成01:05的。

 步驟8  打開PS，新建一個(gè)1200*1200的空白文檔，并且打開《PS動(dòng)效代碼助手》這款PS插件，它是一款自動(dòng)生成代碼的工具。

 步驟9  這個(gè)插件是傻瓜式的，只有4個(gè)步驟：導(dǎo)入文件夾，排序，自動(dòng)最小化切圖，生成代碼。你只要傻瓜式的安裝步驟點(diǎn)這4個(gè)按鈕即可。代碼就已經(jīng)生成到桌面上了。

▲ 桌面上生成了一個(gè)文件夾，里面就是現(xiàn)成的代碼了。

打開這個(gè)html文件，可以看到代碼已經(jīng)讓粒子動(dòng)了起來(lái)，現(xiàn)成的代碼在右下角可以復(fù)制了。

 步驟10  把代碼復(fù)制到我們之前的那個(gè)餅圖的文件里面去，并且把《PS動(dòng)效代碼助手》生成的那個(gè)圖片也一起復(fù)制過去。弄一個(gè)div 把他放到餅圖的底下即可。

▲ 疊加到一起的代碼很簡(jiǎn)單，把餅圖渲染到一個(gè)div里面，把例子渲染到另一個(gè)div里面，有重疊就可以了。

最后，我們用ae制作的那個(gè)光效素材PNG圖片也別忘記了。

▲ 用AE制作了一個(gè)光點(diǎn)，用PS畫了一個(gè)橢圓，最終做成了這個(gè)PNG圖片。把這個(gè)PNG圖片也疊加到一起。

這就是我們最終的效果了：

訪問這個(gè)地址，你就可以看到我完成的效果了

https://pslkzs.com/demo/pie/demo2.php

你對(duì)著網(wǎng)站右鍵查看源代碼，就可以看到我寫的所有代碼了。

再加點(diǎn)動(dòng)畫，比如星期一到星期天的數(shù)據(jù)每天都在變化：

訪問這個(gè)地址，你就可以看到我完成的效果了

https://pslkzs.com/demo/pie/demo3.php

你對(duì)著網(wǎng)站右鍵查看源代碼，就可以看到我寫的所有代碼了。

今天的教程就到這里結(jié)束了，我的主頁(yè)里還有更多原創(chuàng)教程，如果你覺得有用就幫忙點(diǎn)個(gè)贊～

Powered by Froala Editor