# 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()
}
~~~
- 介紹
- UI
- MaterialButton
- MaterialButtonToggleGroup
- 字體相關設置
- Material Design
- Toolbar
- 下拉刷新
- 可折疊式標題欄
- 懸浮按鈕
- 滑動菜單DrawerLayout
- NavigationView
- 可交互提示
- CoordinatorLayout
- 卡片式布局
- 搜索框SearchView
- 自定義View
- 簡單封裝單選
- RecyclerView
- xml設置點擊樣式
- adb
- 連接真機
- 小技巧
- 通過字符串ID獲取資源
- 自定義View組件
- 使用系統控件重新組合
- 旋轉菜單
- 輪播圖
- 下拉輸入框
- 自定義VIew
- 圖片組合的開關按鈕
- 自定義ViewPager
- 聯系人快速索引案例
- 使用ListView定義側滑菜單
- 下拉粘黏效果
- 滑動沖突
- 滑動沖突之非同向沖突
- onMeasure
- 繪制字體
- 設置畫筆Paint
- 貝賽爾曲線
- Invalidate和PostInvalidate
- super.onTouchEvent(event)?
- setShadowLayer與陰影效果
- Shader
- ImageView的scaleType屬性
- 漸變
- LinearGradient
- 圖像混合模式
- PorterDuffXfermode
- 橡皮擦效果
- Matrix
- 離屏繪制
- Canvas和圖層
- Canvas簡介
- Canvas中常用操作總結
- Shape
- 圓角屬性
- Android常見動畫
- Android動畫簡介
- View動畫
- 自定義View動畫
- View動畫的特殊使用場景
- LayoutAnimation
- Activity的切換轉場效果
- 屬性動畫
- 幀動畫
- 屬性動畫監聽
- 插值器和估值器
- 工具
- dp和px的轉換
- 獲取屏幕寬高
- JNI
- javah命令
- C和Java相互調用
- WebView
- Android Studio快捷鍵
- Bitmap和Drawable圖像
- Bitmap簡要介紹
- 圖片縮放和裁剪效果
- 創建指定顏色的Bitmap圖像
- Gradle本地倉庫
- Gradle小技巧
- RxJava+Okhttp+Retrofit構建網絡模塊
- 服務器相關配置
- node環境配置
- 3D特效