有一段時間沒有更新文章了，記得上一篇文章講的是《用ClipDrawable實現音頻錄制麥克風講話效果》，用戶反響也都還不錯，自己也是深受鼓勵。事實上從那之後就一直想寫一篇關於RotateDrawable的文章，原因非常easy。RotateDrawable事實上和上一篇文章中的ClipDrawable非常類似。正愁著不知道以什麽樣的方式向大家介紹，也正是這個原因吧，一直沒有發表新的文章。趕巧了。在用朋友手機的時候發現了一款名叫‘網易雲音樂’的APP，在主播放頁面有一個唱片機的功能感覺不錯誒，於是乎。把玩了一番，心想著。何不用RotateDrawable實現這樣一個功能呢？ 說幹就幹！。。

老規矩。使用之前我們還是先要來了解一下今天的主角RotateDrawable

RotateDrawable

事實上從名字中就不難理解。RotateDrawable一定是一個和旋轉有關的Drawable。的確，RotateDrawable能夠控制drawable的旋轉，在XML文件裏定義RotateDrawable對象使用的根元素是< rotate… />元素。該元素包括下面幾個重要的屬性：

• android:drawable：指定將要進行旋轉操作的Drawable對象。
• android:visible：視圖是否可見，註意默認是false。也就是不可見。
• android:pivotX：pivotX表示旋轉軸心在x軸橫坐標上的位置，用百分比表示，表示在當前drawable總寬度百分之幾的位置。
• android:pivotY：同理，pivotY表示旋轉軸心在y軸橫坐標上的位置，用百分比表示。表示在當前drawable總高度百分之幾的位置。
• android:fromDegrees：fromDegrees表示起始角度。值大於0。則表示順時針旋轉，值小於0。則表示逆時針旋轉。
• android:toDegrees：fromDegrees表示終點角度，同理，值大於0，則表示順時針旋轉，值小於0，則表示逆時針旋轉。

之所以說RotateDrawable和ClipDrawable類似。是由於它們兩個都能夠通過調用方法setLevel(int level)來控制drawable的狀態，ClipDrawable能夠通過調用方法setLevel(int level)來控制截取區間的大小。相同，RotateDrawable能夠通過調用方法setLevel(int level)來控制旋轉角度的大小，取值相同是在0~10000之間。能夠理解為把起始角度和終點角度之間的角度均等分為10000份。當level等於0的時候處於起始位置，當level等於10000的時候處於終點位置。至於中間部分由level的取值大小來決定。

了解了RotateDrawable的使用原理，那我們就進入正題，怎樣使用RotateDrawable實現唱片機的效果，首先呢。當然是要準備素材！

素材大家能夠到Iconfont下載。有能力的也能夠自己PS，事實上我們的今天要用到的幾張素材非常easy，會簡單的PhotoShop操作基本就都能夠做出來：

註意、註意、一定要註意，重要的事情說三遍：在選擇或者制作素材的時候一定要註意一點，由於RotateDrawable是用於drawable的旋轉操作，所以關於drawable的中心點位置必須嚴格要求。否則制作出來的drawable在旋轉的時候會十分別扭。

如上面兩張截圖顯示的一樣，我制作素材的圖片的大小是240x240，唱片的中心點坐標是120x120，也就是pivotX = 50%、pivotY = 50% 。操縱桿的中心點坐標是192x24。 那麽pivotX = 80%、pivotY = 10%。

那好，既然素材已經準備完畢。並且它們的中心點也都確認完畢。緊接著。我們就在XML中定義這兩個RotateDrawable：

唱片rotate_cd.xml：

<?
xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:visible="true"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:drawable="@mipmap/cd" >
</rotate>

操縱桿rotate_hander.xml：

<?xml version="1.0" encoding="utf-8"?
>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotY="10%"
    android:pivotX="80%"
    android:toDegrees="0"
    android:visible="true"
    android:fromDegrees="-30"
    android:drawable="@mipmap/box_handbar" >
</rotate>

最後，僅僅要將這兩個drawable引用到兩個相互疊加的ImageView上，並結合線程和屬性動畫適當的調用ImageView.getDrawable().setLevel(int level)方法就能實現完美的效果啦 ！！！

<RelativeLayout    
    android:layout_width="140dp"    
    android:layout_height="140dp"    
    android:background="@mipmap/box_background" >

    <ImageView        
        android:src="@drawable/rotate_cd"        
        android:id="@android:id/progress"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/box_background" />  

    <ImageView        
        android:id="@android:id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"        
        android:src="@drawable/rotate_hander" />
</RelativeLayout>

附上一張效果圖，須要源代碼的小夥伴也能夠點擊這裏下載哦！！

！

假設文中有表述不當或闡述錯誤的地方。還望正在看文章的您能夠幫忙指出。有疑惑呢，也能夠在評論中提問或者私信。期待您的意見和建議。歡迎關註交流。

用RotateDrawable實現網易雲音樂唱片機效果