最近做了個直播項目，需要用到彈幕和刷禮物。在網上找了許多開源代碼，發現都不是很適合自己的項目需求，于是利用空余時間將兩個功能都實現下，這里分享出來，供大家一起學習。(關于彈幕的實現，大家可以參考我前面寫的一篇文章IOS 自定義彈幕實現)
在開始我的實現方案之前，大家可以先參看下這篇文章iOS 基于 IM 實現仿映客刷禮物連擊效果,寫得很好。Demo中關于禮物連乘的動畫效果，就是引用其中。但這位大神所用的緩存邏輯特別復雜，所以在控制緩存的時候有些小BUG，為了彌補這個缺陷，于是我就開始了這篇文章。
實現功能
程序最終實現的效果圖如下：
這里的禮物1、2、3、4四個按鈕分別模擬四個人發的四種禮物，點擊一次，就代表發送一條禮物消息，實現邏輯功能如下：
- 點擊禮物1按鈕，會出現一個倒計時按鈕，并發送一條禮物消息
- 再次點擊倒計時按鈕，會再次發送一條禮物消息，禮物數量累加
- 在倒計時的時間內，倒計時按鈕如果沒有收到點擊事件，倒計時按鈕會隱藏，并且當前用來展示禮物動畫的cell也會隱藏
- 如果當前全部的cell都在展示，這時你點擊了其他類型的禮物按鈕，這時的禮物消息會被緩存，等到當前禮物動畫執行完時，再去執行緩存的
- 如果在短時間內多次點擊連送按鈕，連乘動畫也會緩存
實現界面功能如下：
- 可自定義cell樣式
- 可自定義cell的展示和隱藏動畫
- 可監聽cell的點擊事件
下面是我實現這些功能的基本邏輯與實現代碼。
基本邏輯
開始寫代碼之前，將功能的基本邏輯列出，這是個很好的習慣。特別是對于那些復雜的功能，這個習慣就顯得尤為重要。
功能要求：收到消息展示動畫、可連乘、可緩存
功能要求看起好像很簡單，如果真的實現可就不是那么容易了。
具體邏輯如下：
- 收到一條禮物消息
- 檢測當前是否有相同類型的禮物消息正在展示動畫
- 有，將該消息加入到當前的動畫組中
- 沒有，檢測當前是否有空閑的軌道用于展示動畫
- 有，取出緩存中相同類型的消息，開始執行動畫
- 沒有，將當前消息加入到消息緩存中
- 連乘動畫完成，如果3秒內沒有收到新的同類消息，就執行隱藏動畫
- 隱藏動畫完成，再取緩存，開始下一個動畫，直至無緩存為止
理清楚了邏輯之后，下面就是代碼實現了，真正的痛苦現在才開始！
實現代碼
這里我會根據邏輯順序來介紹代碼的實現。在收到一條消息之后，在外面只需調用PresentView對象的insertPresentMessages:接口方法，將消息插入進來，insertPresentMessages:接口實現代碼如下：
- (void)insertPresentMessages:(NSArray<id<PresentModelAble>> *)models
{
NSArray *siftArray = [self checkElementOfModels:models];
if (!siftArray.count) return;
for (int index = 0; index < siftArray.count; index++) {
id<PresentModelAble> obj = models[index];
PresentViewCell *cell = [self examinePresentingCell:obj];
if (cell) {
[cell shakeAnimationWithNumber:1];
}else {
[self.dataCaches addObject:obj];//將當前消息加到緩存中
NSArray *cells = [self examinePresentViewCells];
if (cells.count) {
cell = cells.firstObject;
NSArray *objs = [self subarrayWithObj:obj];
__weak typeof(self) ws = self;
[cell showAnimationWithSender:[obj sender] giftName:[obj giftName] prepare:^{
if ([ws.delegate respondsToSelector:@selector(presentView:configCell:sender:giftName:)]) {
[ws.delegate presentView:ws configCell:cell sender:[obj sender] giftName:[obj giftName]];
}
} completion:^(BOOL finished) {
int index = 0;
while (index < objs.count) {
index++;
[cell shakeAnimationWithNumber:objs.count];
}
}];
}
}
}
}
這基本就是整個邏輯的實現了，看到這一堆的邏輯判斷，是不是感覺頭都大了。沒關系，接下來我會對這個代碼進行一步步的解析。
首先，調用了PresentView對象的checkElementOfModels:方法，這就是數據檢測。
數據檢測
數據檢測就是對插入的模型數組進行過濾，因為我們需要通過這個模型來確定消息的類型(禮物類型是通過發送者和發送的禮物名來確定的)，所以自定義的消息模型必須要遵守PresentModelAble協議，協議要求如下：
@required
@property (copy, nonatomic) NSString *sender;
@property (copy, nonatomic) NSString *giftName;
故檢測數據，其實就是檢測模型數組中的元素是否遵守了PresentModelAble協議，并剔除其中沒有遵守協議的數據。具體實現代碼如下：
- (NSArray *)checkElementOfModels:(NSArray<id<PresentModelAble>> *)models
{
NSMutableArray *siftArray = [NSMutableArray array];
for (id obj in models) {
if (![obj conformsToProtocol:@protocol(PresentModelAble)]) {
DebugLog(@"%@對象沒有遵守PresentModelAble協議", obj);
}else {
[siftArray addObject:obj];
}
}
return siftArray;
}
選出合適的數據之后，就是遍歷該數組，對每一個元素進行動畫檢測。
動畫檢測
動畫檢測就是檢測當前是否有相同類型的消息正在展示動畫，即流程2。這里是遍歷當前所有的cell，如果cell上展示的消息類型與該消息類型一致，并且cell的動畫正在執行，就返回該cell，否則返回nil。具體實現代碼如下：
- (PresentViewCell *)examinePresentingCell:(id<PresentModelAble>)obj
{
for (PresentViewCell *cell in self.showCells) {
if ([cell.sender isEqualToString:[obj sender]] && [cell.giftName isEqualToString:[obj giftName]]) {
//當前正在展示動畫
if (cell.state != AnimationStateNone) return cell;
}
}
return nil;
}
如果動畫檢測檢測到匹配的cell，就在cell當前的動畫隊列上添加一個連乘動畫（shakeAnimation）任務。
ShakeAnimation
連乘動畫就是在當前禮物數量上做一個累加的動畫，即流程3。連乘動畫的具體實現，大家可以自行查看demo中PresentLable對象的startAnimationDuration:completion:方法。因為連乘動畫執行完，三秒后沒有收到新的任務就要開始cell的隱藏動畫(hiddenAnimation)。所以開始連乘動畫前，需要取消掉前面延時三秒執行的隱藏動畫任務，然后重新開始延時,即流程7。具體實現代碼如下：
- (void)shakeAnimationWithNumber:(NSInteger)number
{
[NSObject cancelPreviousPerformRequestsWithTarget:self];
__weak typeof(self) ws = self;
[self performSelector:@selector(hiddenAnimation) withObject:nil afterDelay:3.0];
_state = AnimationStateShaking;
self.shakeLable.text = [NSString stringWithFormat:@"X%ld", ++self.number];
[self.shakeLable startAnimationDuration:Duration completion:^(BOOL finish) {
if (number > 1) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[ws startShakeAnimationWithNumber:(number - 1) completion:block];
});
}else {
_state = AnimationStateShaked;
if (block) {
block(YES);
}
}
}];
}
HiddenAnimation
隱藏動畫實現代碼也非常簡單，這里就不介紹了。但是需要注意的地方是，隱藏動畫執行完成后需要將cell恢復到初始狀態，保證cell在開始下一次展示動畫之前不會因為狀態的錯誤而導致流程判斷出錯。
如果動畫檢測沒有檢測到匹配的cell，就開始cell的檢測
cell檢測
cell檢測就是檢測當前是否有空閑的cell用于展示禮物消息動畫，即流程4.這里只需要遍歷所有的cell，判斷cell的動畫狀態就可以了。具體實現代碼如下：
- (NSArray<PresentViewCell *> *)examinePresentViewCells
{
NSMutableArray *freeCells = [NSMutableArray array];
for (PresentViewCell *cell in self.showCells) {
if (cell.state == AnimationStateNone) {
[freeCells addObject:cell];
}
}
return freeCells;
}
如果沒有空閑的cell用于展示動畫，就將當前消息加入到緩存中，即添加到dataCaches這個數組中,即流程6。
如果有空閑cell用于展示，就從空閑cell數組中取出一個cell，執行cell的展示動畫(showAnimation)，即流程5。
ShowAnimation
cell的展示動畫，其接口如下：
/**
* 顯示cell動畫
*
* @param sender 發送者
* @param name 禮物名
* @param prepare 準備動畫回調
* @param completion 動畫完成回調
*/
- (void)showAnimationWithSender:(NSString *)sender
giftName:(NSString *)name
prepare:(void (^)(void))prepare
completion:(void (^)(BOOL finished))completion;
因為展示動畫是用來展示禮物消息的動畫，在展示之前需要知道展示的禮物消息的類型，所以需要傳入sender和name兩個參數。
展示動畫完成之后，就需要從緩存中取出與該消息相同類型的消息,然后開始連乘動畫，這些操作就可以早completion中完成。那prepare回調是干嘛呢？
其實這里還有一個問題：在開始cell的展示動畫之前，我們就需要給這個cell設置需要展示的數據。可是cell是自定義的，這是根本無法拿到自定義的cell，也就無法給這個cell設置數據？
這里我的思路是：在開始cell的展示動畫之前，就是prepare回調中，給外界一個代理通知，讓外面來執行這個賦值操作。代理通知接口如下：
/**
* 禮物動畫即將展示的時調用，根據禮物消息類型為自定義的cell設置對應的模型數據用于展示
*
* @param cell 用來展示動畫的cell
* @param sender 禮物發送者
* @param name 禮物名
*/
- (void)presentView:(PresentView *)presentView
configCell:(PresentViewCell *)cell
sender:(NSString *)sender
giftName:(NSString *)name;
到這里，關于收到一條消息的流程就就全部處理完了。最后一步就是對緩存邏輯進行處理了，即上面的流程8。
緩存處理
緩存處理就是當一個禮物消息類型的動畫處理完，即cell的隱藏動畫執行完成，就要從緩存中取下一個類型的禮物消息，開始下一組動畫,直至無緩存為止，即流程8。這里的隱藏動畫回調是通過代理實現的，具體實現代碼如下：
- (void)presentViewCell:(PresentViewCell *)cell operationQueueCompletionOfNumber:(NSInteger)number
{
if (self.dataCaches.count) {
id<PresentModelAble> obj = self.dataCaches.firstObject;
NSArray *objs = [self subarrayWithObj:obj];
__weak typeof(self) ws = self;
[cell showAnimationWithSender:[obj sender] giftName:[obj giftName] prepare:^{
if ([ws.delegate respondsToSelector:@selector(presentView:configCell:sender:giftName:)]) {
[ws.delegate presentView:ws configCell:cell sender:[obj sender] giftName:[obj giftName]];
}
} completion:^(BOOL finished) {
[cell shakeAnimationWithNumber:objs.count];
}];
// [self insertPresentMessages:self.dataCaches completion:self.completion];
}else {
[cell releaseVariable];
}
}
其實這里的處理就重復流程5。最后緩存處理完了就調用releaseVariable方法釋放相關引用內存。
至此，整個刷禮物效果的基礎邏輯就以實現了。這里就完了嗎？當然，還沒有！任何一個功能實現之后，沒有經過反復的測試、修改、優化等流程的檢驗，就都不算完成。
后續
由于篇幅原因，關于這個刷禮物效果功能的優化與bug的修改，我會在下一篇文章進行說明。
最后奉上Demo(優化后)的下載地址
