轉盤
界面分析
- 點擊開始,轉盤開始轉動
- 點擊暫停,轉盤停止轉動
- 點擊開始選號,轉盤轉動幾下,指向正上方
- 轉盤上的星座可以點擊
- 動畫過程中可以與用戶進行交互,用UIView
素材分析
- 星座在一張圖片上面
裁剪
- 放在一張圖片上面的原因是:可以節省資源包的大小
- 必須要會裁剪
- 背景
封裝一個View
- 背景和選號按鈕位置固定不變
- xib
- 286*286 背景imageView
- 背景圖片上面再添加一張圖片
- 開始選號button
- 綁定類
- 封裝,考慮外界怎么用?
- 提供一個類方法
- 從xib中加載,loadNibName:
- 重寫initWithFrame:
- self = [NSBundle mainBundle]loadNibName:
- 提供一個類方法
添加按鈕
控制器的view里設置開始、暫停按鈕
監聽按鈕點擊狀態
-
把星座按鈕添加到轉盤上
- awakeFromNib
- 加載星座的大圖片oriImage
- for循環
- 創建按鈕
- 設置按鈕的圖片
- 設置背景圖片,選中狀態
- 設置按鈕正常情況下展示的圖片
- 圖片、區域——>把指定區域裁剪出來
- CGImageCreateWithImageInRect:(圖片,裁剪區域)
- oriImage.CGImage
- rect
- w:W /12
- h:H
- x:i*w
- y:0
- CGImageRef clipImage
- setImage:imageWithCGImage:forState:
- 問題: 看到的圖片不是完整的,只能看到四分之一,像素是不會乘以坐標的,CGImageCreateWithImageInRect:是C語言方法,在C語言當中,使用的都是像素,6s加載的大圖片是@2x,使用的是像素*2的,需要手動乘以2
- rect
- w:W /12 *【UIScreen mainScreen】.scale
- h:H *【UIScreen mainScreen】.scale
- x:i*w
- y:0
- rect
- 凡是C語言都有乘以scale
- 設置按鈕選中狀態下的圖片
- oriSelImage
- CGImageCreateWithImageInRect:
- 設置按鈕的尺寸大小
- 每個按鈕相對上一個按鈕旋轉30度
- 先把按鈕固定在0度的位置
- 設置按鈕的大小 68 *143
- 錨點(0.5 ,1)
- position 轉盤的中心點
- 設置按鈕的背景顏色
- 對按鈕做旋轉形變操作
- button.transform
- 沒有layer用CG,有layer用CA
- 帶make
- angle +=30
- 角度轉弧度
- angle*M_PI/180.0
- 按鈕添加到contentImageView上面
- 監聽按鈕點擊
- addTarget:action:
- 讓點擊的按鈕成為選中狀態,上一個取消選中
- 搞一個成員屬性記錄之前選中的按鈕
- 取消上一個選中的按鈕
- 讓當前點擊的按鈕成為選中狀態
- 讓當前點擊的按鈕成為上一個選中按鈕
- 讓父控件響應事件
- 細節:
- 第一次進來,讓第一個按鈕默認成為選中狀態
- 取消按鈕的高亮狀態
- 重寫按鈕內部的高亮方法
- 自定義按鈕,取消按鈕高亮狀態
- setHighlighted:
畫板(相似)
給外界提供一個接口
控制器里定義一個轉盤view屬性
-
到轉盤里面去寫開始、暫停的具體代碼(屬于內部的東西,寫到內部去,給外界提供一個接口即可)
-
開始
- 不可以使用基礎核心動畫(不能與用戶交互)
- 看到的是假象,選中的位置不準確,不能使用核心動畫
- 使用UIView
- 定時器,NSTimer/CADisplayLink
CADisplayLink
- 把定時器加到主運行循環當中addRunLoop:
- 讓轉盤旋轉contentImageView
- 不帶make
- 旋轉角度M_PI/300
- 用戶可能重復點擊開始,所以定時器需要懶加載,防止重復創建
- self.link.paused = NO;
- 不可以使用基礎核心動畫(不能與用戶交互)
-
暫停
- self.link.paused = YES
-
調整星座按鈕內部圖片的大小
- 自定義按鈕的方法里調整(三種方式)
返回按鈕內部UIImageView的尺寸位置
- imageRectForContentRect:
- contentRect:是當前按鈕的尺寸位置
- w:40固定死
- h:45
- y:20
- x:(父控件的寬度-按鈕自己的寬度)*0.5
- `返回按鈕內部UILabel的尺寸位置`
- titleRectForContentRect:
- `layoutSubviews`
中間開始選號
監聽按鈕點擊
-
讓轉盤快速旋轉幾圈
- 不需要與用戶交互
- keyPath
- toValue
- repeatCount = 1
- duration
- 動畫加到背景圖片上面的圖片上
- contentImageView
- 不需要與用戶交互
-
動畫停止的時候,選中的按鈕指向最上方
- 如何監聽核心動畫的暫停—— 代理,不用遵守協議(非正式協議)
- animationDidStop:當動畫停止的時候調用
- 設置代理必須要在添加動畫之前設置
- 當前點擊的按鈕preSelButton
- 父控件contentImageView,子控件:按鈕
- 父控件倒著旋轉回到最上方
- 獲取選中按鈕旋轉的角度
- atan2(transform.b,transform.a)
- 讓按鈕的父控件倒著旋轉回去
- 角度:- angle
解決星座按鈕重疊的問題
- 讓按鈕的一部分能夠點擊
- hitTest:withEvent:
- 判斷點在不在給定區域
- rect(指定高度:高度*0.5)
- CGRectContainsPoint(rect,point)
- 在:return [super hitTest:withEvent:]
- 不在:return nil
開始選號的時候暫停定時器
- self.link.paused = YES;