音樂磁帶，可以這麼玩

此篇文字只是用來拓展對幻燈片的認識，不是那個正經專欄系列

1 整體拆分

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

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

1 第1部分拆分細則

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

1.1部分的拆解細則

這一塊的內容比較簡單，就是基本的圓角矩形和矩形的填充疊放。可能麻煩一點的就是十字螺絲的製作，為了在版面之中體現螺絲中十字紋路，對其合成的兩個細長圓角矩形使用陰影處理效果，其效果為居中偏移。兩個細長圓角矩形是豎直狀態下，分別偏移+45度，-45度，然後居中、左右對齊即可。

1.2部分的拆解細則

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

如果還不清楚齒輪怎麼做的，下面這個圖可以解惑：豎直狀態下確定好兩個圓角矩形的尺寸和距離之後，將其右鍵組合，然後分別旋轉120、240度，當然也可以是120、-120度，實現的結果一樣。

1.3部分的拆解細則

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

1.4部分的拆解細則

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

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

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

2 第2部分拆分細則

相比較於第一部分，第二部分沒那麼複雜。封面遮罩部分使用布爾運算，圓角矩形的進度指示條是多個長短不一的圓角矩形。

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

3 動畫使用

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

轉輪的陀螺旋動畫，要保證兩個轉輪的速度、方向、持續性。

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

最後將上述部分進行圖層疊放，動畫調整即可實現。