阿里云、騰訊云網(wǎng)站圖標(biāo)動效，設(shè)計+代碼我都教你！

時間：2023-10-05 07:30:01 | 來源：網(wǎng)站運營

時間：2023-10-05 07:30:01 來源：網(wǎng)站運營

阿里云、騰訊云網(wǎng)站圖標(biāo)動效，設(shè)計+代碼我都教你！：大家好，我是灰色執(zhí)照，很開心又給大家?guī)硪黄诟韶浗坛獭?br>
教程內(nèi)容無論是設(shè)計還是代碼部分100%由我原創(chuàng)。代碼已經(jīng)給大家準(zhǔn)備好了，很簡單你就能使用上。開源無版權(quán)，大家放心使用~




不知道從什么時候開始，很多大廠的云網(wǎng)站，都變成了使用這種非常有立體感的小圖標(biāo)，鼠標(biāo)移入、移出都會有一個有意思的小動效。























為了幫助大家了解這種動效的實現(xiàn)過程，阿灰特意寫了一個非常詳細的教程。教你制作并且實現(xiàn)這些效果。對于設(shè)計師，也可以只學(xué)習(xí)制作圖標(biāo)的部分，讓程序員直接Copy我的代碼。100%保證你的設(shè)計可以落地。







廢話不多說，我們先看看我弄好的最終成果（訪問下面藍色鏈接就可以查看）：









教程里面的模型都非常簡單，因為我不能手把手幾個小時教你建模、打燈光和渲染……我必須用最短的時間讓你了解實現(xiàn)的整個過程。今后，你就可以使用自己的方式，完成屬于你自己的阿里云立體小圖標(biāo)和動效了。


特別說明：本篇文章和阿里巴巴、騰訊沒有任何關(guān)系，他的設(shè)計是如何做的，代碼是怎么寫的，我完全不知道。我只是利用自己的經(jīng)驗去思考他們制作好的效果，并且教會大家都能做出并且實現(xiàn)相似的動效。




為了讓初級設(shè)計師更清楚的看清整個過程，我錄制了非常詳細的視頻教程，我強烈建議你通過視頻來學(xué)習(xí)，這樣保證每個步驟都十分清晰。如果你在公司不方便觀看視頻，也可以直接看我們的圖文教程。

---

- 視頻教程部分 -

大家手動復(fù)制下面藍色帶下劃線文字鏈接，去b站查看。

教學(xué)視頻1：《日常前戲》





教學(xué)視頻2：《使用C4D制作小模型動效》




教學(xué)視頻3：《使用Adobe Xd制作分層小圖標(biāo)動效》




教學(xué)視頻4：《用代碼實現(xiàn)效果》




再三強調(diào)，UI設(shè)計師可以不用學(xué)習(xí)如何寫代碼。你只需要關(guān)注交付部分的圖片是如何做成的即可。當(dāng)然，技多不壓身，你觀看整個視頻更有利于你知識面變得更開闊。更清楚你和研發(fā)之間的工作流程和關(guān)系，你了解得越多，你就越有話語權(quán)，沒有人可以用“無法實現(xiàn)”來否定你的設(shè)計。

---

- 圖文教程部分 -

教程1：C4D制作一個立體圖標(biāo)動效










步驟1 打開C4D新建一個立方體。




步驟2 使用縮放工具把立方體壓扁一點（你也可以調(diào)整右下角屬性面板，輸入具體的值）




步驟3 Ctrl+C 復(fù)制一個，Ctrl+V粘貼。然后用移動工具把復(fù)制好的向上拖拽。這樣你就得到了2個立方體。








步驟4 再次使用縮放工具，把頂上那個壓扁一點兒。







步驟5 復(fù)制頂部那個立方體，并且向上拖拽。這樣，你就完成了整個圖標(biāo)。







步驟6 雙擊左下角紅框處，這樣可以添加1個材質(zhì)。







步驟7 選中你剛才新建的材質(zhì)球，依次改成白色、橙色、黑色。







步驟8 把三個材質(zhì)球拖拽到三個立方體上去。







步驟9 選中頂部白色的立方體。在第0幀對著右下角的坐標(biāo)的H屬性K一個關(guān)鍵幀。







步驟10 在第16幀的位置，對H屬性再K一個關(guān)鍵幀，屬性改成180°

這樣，你就完成了頂部的旋轉(zhuǎn)動畫。效果如下圖：











用同樣的方法，對橙色的立方體K幀。整個動畫就做好了。但是這次我們讓橙色的立方體反著轉(zhuǎn)動（第16幀H屬性改成-180°）這樣，整個動效全部做好了。










步驟11 點擊渲染 > 編輯渲染設(shè)置。然后選擇輸入的格式是PNG，并且一定要勾選Alpha通道。這樣導(dǎo)出的PNG才是透明背景的。







步驟12 將要輸出的幀改成“手動”，起始幀為0，結(jié)束幀為16。







步驟13 點擊渲染 > 添加到渲染隊列。







步驟14 點擊渲染按鈕。這樣，0-16幀，一共17張圖片就都渲染好了。







這就是渲染好的17張圖片了，他們都是透明背景的PNG圖片，非常的完美。我們在教程3里面會對它們做一些拼接，用來交付給程序員。

---

教程2 使用Adobe Xd制作一個日歷分層的小動效










制作這個教程的起源是有同學(xué)在微信群問下圖有沒有什么快速制作的方法。于是我想到了Adobe Xd的3d變換功能。順手將他做成了動畫。




▲ 這個圖片來自微信群群友的截圖，不知道是哪個大神做的。這里只是用來做免費的教程，不做任何商用，如果不慎侵犯了你的權(quán)益，或者你不開心我用了你的圖片，可以私信我刪除。








步驟1 在Adobe Xd里面繪制日歷的正面視圖，我這里簡化它，只畫4個圓角矩形。并且弄到一個組里面。







步驟2 選中這個組，點擊右側(cè)的3D轉(zhuǎn)換按鈕。







通過拖拽，將日歷圖標(biāo)弄成帶有透視感覺的。










步驟3 選中綠色按鈕圖層，把他的z軸調(diào)整成250。這樣，這個按鈕就懸浮起來了。







步驟4 選中白色矩形，調(diào)整它的z軸為150。這樣，白色矩形也懸浮起來了。







步驟5 選擇倒數(shù)第二個圖層，調(diào)整它的z軸為80。







這樣，這個動效的最終效果我們就做好了。接下來，我們只要導(dǎo)出多張圖片即可完成所有的工作了。







步驟6 選中這個組，把組名字改成“組20”，Ctrl+E 導(dǎo)出PNG圖片。這就是我們的第20幀的圖片。準(zhǔn)確的說是我們最后一幀的圖片，因為可能不會有20幀那么多。










步驟7 把我們的第三層那個矩形的z軸改成0（原本它是80），然后把組的名稱改成“組19”。再次選擇組后Ctrl+E導(dǎo)出第19幀的圖片。










步驟8 把白色矩形的z軸改成75（原本它是150）然后把組名稱改成“組18”。再次選擇組后Ctrl+E導(dǎo)出第18幀的圖片。








步驟9 把白色矩形的z軸改成0（原本它是75）然后把組名稱改成“組17”。再次選擇組后Ctrl+E導(dǎo)出第17幀的圖片。







步驟10 選中綠色按鈕圖層，把z軸直接改成0，然后把組名稱改成“組16”。再次選擇組后Ctrl+E導(dǎo)出第16幀的圖片。







到目前為止，Z軸一共有5張圖片了。這就是Z軸升起來的所有動畫了。接下來，我們再次制作旋轉(zhuǎn)角度的動畫圖片。選中整個組后，你會發(fā)現(xiàn)三維變換的地方x軸旋轉(zhuǎn)被我們手動調(diào)整到了12°，y軸旋轉(zhuǎn)被我們調(diào)整到了-43°




步驟11 把y軸旋轉(zhuǎn)改成-33°，然后把組名稱改成“組15”。再次選擇組后Ctrl+E導(dǎo)出第15幀的圖片。







步驟12 把y軸旋轉(zhuǎn)改成-23°，然后把組名稱改成“組14”。再次選擇組后Ctrl+E導(dǎo)出第14幀的圖片。







步驟13 把y軸旋轉(zhuǎn)改成-13°，然后把組名稱改成“組13”。再次選擇組后Ctrl+E導(dǎo)出第13幀的圖片。










步驟14 把y軸旋轉(zhuǎn)改成-0°，然后把組名稱改成“組12”。再次選擇組后Ctrl+E導(dǎo)出第12幀的圖片。




y軸旋轉(zhuǎn)的動畫我們都弄好了，接下來我們弄x軸旋轉(zhuǎn)的動畫，做法基本一樣。







步驟15 把x軸旋轉(zhuǎn)改成6°，然后把組名稱改成“組11”。再次選擇組后Ctrl+E導(dǎo)出第11幀的圖片。







步驟16 把x軸旋轉(zhuǎn)改成0°，然后把組名稱改成“組10”。再次選擇組后Ctrl+E導(dǎo)出第10幀的圖片。







這樣，我們整個日歷就正過來了。所有的動畫需要的幀圖片都已經(jīng)拿到了。查看一下剛才存的那一堆圖片，從組10-組20其實只有11張圖片。也就是說，實際上我們只有11幀而已。




哈哈，也許你怎么也想不到，我們這個效果的制作過程如此的簡單粗暴吧。在搞創(chuàng)作的過程里面，我們一定要大膽的想，勇敢的去試。兄弟們記好了：只要膽子大，女鬼咱也能讓她放產(chǎn)假！




Xd的動效教程到這里就結(jié)束了，我們將在教程3里面會對它們做一些拼接，用來交付給程序員。




教程3 通過代碼實現(xiàn)鼠標(biāo)移入、移出的動畫效果。




接下來，我們就將之前做好的兩個動效拼接成要交付的長圖片。你需要把圖片中多余的空白裁掉，然后拼接在一張豎著的長圖。具體請看下圖：





上面這個步驟，需要你使用PS一類的軟件自己手動弄，并且記住裁切后的單張圖片的寬度、高度、以及一共有幾張圖片。有了這3個關(guān)鍵的信息，程序員就可以寫代碼完成所有的工作了。







接下來我要用到我自己開發(fā)的插件《PS動效代碼助手》來完成所有的工作，插件會自動生成長圖片。
插件下載地址：




接下的步驟是用插件生成的。如果你不使用插件，沒有關(guān)系，可以自己手動拼接圖片。手動拼接并沒有什么難度，只是麻煩一點兒。拼接成長圖片是屬于PS（或其它設(shè)計軟件）操作的基礎(chǔ)，我這里就不專門寫文章講解了。







步驟1 打開PS，新建一個尺寸1920*1080 分辨率72dpi的空白文檔，并且打開《PS動效代碼助手》這款插件。










步驟2 點擊插件上第一個按鈕 導(dǎo)入。選擇你之前存放C4D導(dǎo)出序列幀的那個文件夾（文件夾內(nèi)必須只有png圖片，沒有別的其他東西）這樣，所有的圖片就都“置入”到了PS里面。







步驟3 點擊插件的第二個按鈕，自動排序。點擊后，圖層的順序就給你弄好了。







步驟4 點擊插件的第三個按鈕，最小化切圖。這樣圖片空白的地方就自動給你裁切掉了。




雖然多余的尺寸被切掉了，但是目前圖標(biāo)的寬度依舊有400多像素，我們只需要一個小圖標(biāo)，還要將它整體縮小。







步驟5 圖像 > 圖像大小，把寬度改成100，這樣整個圖標(biāo)都變小了。







步驟6 點擊插件第4個按鈕，它會生成一個帶動效的文件。里面包含一個html和一個拼接好的長圖。







桌面上就會有一個生成好的文件夾，里面就有一個html文件和一個拼接好的png圖片，如果你打開這個html文件，就能看到生成好的代碼了。




▲ 動效代碼助手是一款生成循環(huán)動效的工具，不過我們這次不是需要這種一直播放的動效。我們只需要它生成好的長圖。








這就是它生成的長圖了，是我們需要的。非常的完美。




▲ 插件還很貼心，給生成的圖片取了一個有意義的名字。圖片的名稱是：w100h1343steps17.png 其中 w 代表寬度，h 代表整張長圖的高度，steps 代表一共有多少幀。也就是說：單個小圖片的寬度是 100px，高度是 1347/17=79，一共有 17 幀。這些關(guān)鍵的信息要用來編程。







到這里，UI設(shè)計師的工作就全部完成了。剩下的部分就全部由前端程序員來完成了。如果你想學(xué)習(xí)代碼，或者你們家的程序員不知道如何實現(xiàn)?？梢钥催@個視頻，里面錄制了我逐行寫代碼實現(xiàn)的過程。




視頻教程地址：







不想學(xué)習(xí)寫代碼，就請直接用我寫好的。詳細的步驟如下：

步驟7 文章下方給我留言“我要代碼”即可獲取我寫好的文件。




這就是你下載到的文件了。里面有一個html文件和一個jquery.js的文件。







步驟8 把你制作好的長圖復(fù)制到這個文件夾里來







步驟9 用編輯器打開這個html文件，打開后會是這個樣子。







步驟10 在<style> </style>中間加上下面樣式


▲ 需要注意的是，剛才我們做的圖標(biāo)大小是100*79，所以這里的寬度和高度都要弄對。這個c4d的樣式名稱是我隨便取的，你可以根據(jù)你的需要自己取一個。





步驟11 在<body></body>標(biāo)簽里面添加一點兒Dom代碼







需要說明的是：我們這里多添加了一個img的樣式，一旦你的div有這個樣式，那么他就會可以執(zhí)行動畫。我還添加了一個data-max="17"的屬性。意思是這個動畫有17幀。因為界面上有可能其他的動畫幀數(shù)不同，所以我們需要針對每個動畫，標(biāo)明一下不同的幀數(shù)。




打開html文件，你就可以看到最終效果了。










是的，就是這么簡單。寫了1行結(jié)構(gòu)代碼+幾行CSS就完成了。

紅色方框內(nèi)就是你寫的所有內(nèi)容了。




我們用同樣的方法，把剛才用Xd做的動效也做進去。










這就是最終的效果了。你想在一個頁面上添加多個這種圖標(biāo)都行。







我用C4D隨手搞了2分鐘，全部用軟件自帶的效果，又加了幾個小圖標(biāo)進去：




今天的所有內(nèi)容到這里就結(jié)束了，我是灰色執(zhí)照，今后會繼續(xù)為大家?guī)碛袃r值的干貨內(nèi)容，謝謝大家，我們下期見。下期我準(zhǔn)備教一教大家實現(xiàn)阿里云或騰訊云首頁Banner上的效果，也就是這兩個：



















不過呢，這種教程寫起來很累，希望點個贊支持一下。讓我更有動力寫出更多干貨文章~