# 1. 效果 展開為：  然后點擊后可以旋轉消失：  # 2. 分析 至于顯示的東西其實就是圖片，也就是說利用事先`PS`好的圖片，然后按照位置定位。組成也就是三個圓環加其余的圖標。對應的視頻教程：[尚硅谷Android視頻教程《自定義控件》](https://www.bilibili.com/video/BV1qW411L7Cp?p=1)。當然，資源文件在評論區有給出： >尚硅谷Android學科全套教程 鏈接：https://pan.baidu.com/s/1EegFNEv6X2yqi6cJ9iStJQ 提取碼：f6zp 也就是說這個案例的重點就在于`Android`動畫中的旋轉實現。 # 3. 實現 ## 3.1 View動畫 我們可以直接使用`View`提供的`RotateAnimation`來做，比如： ~~~ override fun onClick(v: View?) { when(v?.id){ R.id.icon_home -> { if (isShowLevel2) { // 關閉第二級菜單 hideView(level2) if(isShowLevel3) { hideView(level3, 20) isShowLevel3 = false } } else { // 打開第二級菜單 showView(level2) } isShowLevel2 = !isShowLevel2 } R.id.icon_menu -> { if (isShowLevel3) { // 關閉第二級菜單 hideView(level3) } else { // 打開第二級菜單 showView(level3) } isShowLevel3 = !isShowLevel3 } } } fun showView(view: View){ showView(view, 0) } fun showView(view: View, delayTime: Int){ rotateView(view, 180, 360, delayTime) } fun hideView(view: View){ hideView(view, 0) } fun hideView(view: View, delayTime: Int){ rotateView(view, 0, 180, delayTime) } fun rotateView(view: View, fromDegrees: Int, toDegrees: Int, delayTime: Int){ val rotateAnimation = RotateAnimation(fromDegrees*1f, toDegrees*1f, view.width / 2f, view.height * 1f) rotateAnimation.duration = 500 rotateAnimation.fillAfter = true // 設置延遲多久播放 rotateAnimation.startOffset = delayTime.toLong() view.startAnimation(rotateAnimation) } ~~~ 但是，我們知道對于`View`動畫的效果只是視圖層的動畫，對于`View`的屬性沒有任何變化，常見的也就是還是會在原位置響應點擊事件。針對這個問題，我們需要做一些額外的處理。也就是讓控件不可點擊即可。比如我們可以設置： ~~~ fun rotateViewByRoateAnimation(view: ViewGroup, fromDegrees: Int, toDegrees: Int, delayTime: Int){ val rotateAnimation = RotateAnimation(fromDegrees*1f, toDegrees*1f, view.width / 2f, view.height * 1f) rotateAnimation.duration = 500 rotateAnimation.fillAfter = true // 設置延遲多久播放 rotateAnimation.startOffset = delayTime.toLong() view.startAnimation(rotateAnimation) // 所有元素不可點擊或可點擊 val children = view.children for (child in children) { child.isEnabled = (fromDegrees!=0) } } ~~~ ## 3.2 屬性動畫 前面提到了，使用`View`動畫需要額外處理，而屬性動畫就不需要。它自`API 11`，即`Android 3.0`后，就在每次屬性發生變化后，自動調用`inviladate`進行重新繪制。這里我們直接使用屬性動畫來解決。 ~~~ fun roateViewByAttrAnimator(view: ViewGroup, fromDegrees: Int, toDegrees: Int, delayTime: Int){ val animator = ObjectAnimator.ofFloat(view, "rotation", fromDegrees*1f, toDegrees*1f) animator.duration = 500 animator.startDelay = delayTime.toLong() // 設置旋轉中心 view.pivotX = view.width / 2f view.pivotY = view.height * 1f animator.start() } ~~~