用PPT繪制磁帶教程

在本人第一篇文字之中，使用了磁帶的形式來表示音樂的播放節(jié)奏，有朋友問這個是不是使用圖片來實現(xiàn)的，答曰：不是，是用基本的形狀拼接出來的。借鑒的原型是蝦米的一張封面圖，現(xiàn)在就將整個過程來介紹一下。

1 整體拆分

從左右圖看出，這就是基本形狀的拼接疊放形成的多圖層基本形狀，怎么去實現(xiàn)這個制作過程呢，下面開始一點點說明

將封面圖移開之后，即下圖中的1、2部分，現(xiàn)在就按照這個順序再去拆分

1 第1部分拆分細(xì)則

細(xì)分之后，將第一部分分成了4個部分，其中1.2、1.3的實現(xiàn)過程一樣，不同點就是兩個外周表示帶子厚度的部分不一樣。

1.1部分的拆解細(xì)則

這一塊的內(nèi)容比較簡單，就是基本的圓角矩形和矩形的填充疊放?？赡苈闊┮稽c的就是十字螺絲的制作，為了在版面之中體現(xiàn)螺絲中十字紋路，對其合成的兩個細(xì)長圓角矩形使用陰影處理效果，其效果為居中偏移。兩個細(xì)長圓角矩形是豎直狀態(tài)下，分別偏移+45度，-45度，然后居中、左右對齊即可。

1.2部分的拆解細(xì)則

將每個部分分開之后，看得出這個部分可能比較麻煩的就是轉(zhuǎn)輪上齒輪制作了，即下方的那個白色6圓角矩形和其下方的圓環(huán)背景，它使用的是陰影處理，使其在動畫傳動的過程中，能夠更為有質(zhì)感。

如果還不清楚齒輪怎么做的，下面這個圖可以解惑：豎直狀態(tài)下確定好兩個圓角矩形的尺寸和距離之后，將其右鍵組合，然后分別旋轉(zhuǎn)120、240度，當(dāng)然也可以是120、-120度，實現(xiàn)的結(jié)果一樣。

1.3部分的拆解細(xì)則

它的過程和1.2部分一致，不同的就是最外邊的漸變圓環(huán)不一樣，這個后面有說明：主要是在傳動過程中，其帶子的厚度會一增一少，因此使用這個的圓環(huán)厚度來表示傳動的過程表現(xiàn)。

1.4部分的拆解細(xì)則

這部分的實現(xiàn)過程比較簡單，可能比較復(fù)雜的就是圓角矩形和圓形的陰影處理，這個主要是為了在背景體現(xiàn)凹下去的真實效果，因此它們使用的是陰影效果中的內(nèi)部效果：左上角。還有一個需要進(jìn)行說明的就是下方的線條，這個不是傳統(tǒng)意義上的線條，而是圓角矩形的加大長寬比例的效果，為什么要這么做后面就會說明。

一般的線條屬于一維結(jié)構(gòu)，將其整體組合到其他形狀元素之中，不能夠隨著整體尺寸的變化而增加線條的粗細(xì)，需要手動設(shè)置寬度磅數(shù)。而對于圓角矩形線條，其是圓角矩形加大長寬比例而來的，本身屬于二維機(jī)構(gòu)，只要鎖定長寬的縱橫比，可以跟隨整體結(jié)構(gòu)進(jìn)行縮放

還有一個比較重要的要點就是：圓角矩形線條可以參與布爾運算，而一般的線條由于其一維結(jié)構(gòu)的屬性不能夠參與布爾運算。

2 第2部分拆分細(xì)則

相比較于第一部分，第二部分沒那么復(fù)雜。封面遮罩部分使用布爾運算，圓角矩形的進(jìn)度指示條是多個長短不一的圓角矩形。

封面遮罩，主要是為了給兩個轉(zhuǎn)輪留下位置，同時在進(jìn)度指示條顯示兩個轉(zhuǎn)輪當(dāng)前的帶子厚度，考慮到其在處于封面遮罩的作用，因此使用布爾運算

3 動畫使用

動畫效果的使用，主要包括陀螺旋動畫、放大/縮小動畫，兩個動畫效果都在「強(qiáng)調(diào)」動畫條目下。

轉(zhuǎn)輪的陀螺旋動畫，要保證兩個轉(zhuǎn)輪的速度、方向、持續(xù)性。

隨著轉(zhuǎn)輪的動畫推移，外部表示帶子厚度的部分使用放大縮小動畫，一增一減實現(xiàn)傳動效果。

本文作者：JunLing
本文來源：https://zhuanlan.zhihu.com/p/25964573

最后將上述部分進(jìn)行圖層疊放，動畫調(diào)整即可實現(xiàn)。