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

1 整體拆分

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

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

1 第1部分拆分細則

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

1.1部分的拆解細則

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

1.2部分的拆解細則

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

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

1.3部分的拆解細則

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

1.4部分的拆解細則

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

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

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

2 第2部分拆分細則

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

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

3 動畫使用

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

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

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

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

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