ios - 仿簡書網頁，網路載入過渡動畫的封裝

摘要： 先上效果圖 111.gif 說明 本文主要講解如何將demo(傳送門)整合到你的專案中，並使用，同時也算是拋磚引玉了，大佬們要是有更好的封裝方法，求之不得。 均為個人思考，轉載請註明出處，謝謝:pray: 主要使用的技...

先上效果圖

說明

1. 本文主要講解如何將demo(傳送門)整合到你的專案中，並使用，同時也算是拋磚引玉了，大佬們要是有更好的封裝方法，求之不得。
2. 均為個人思考，轉載請註明出處，謝謝:pray:

主要使用的技術

AOP，即IOS的 Runtime 執行機制的黑魔法

使用方法

第二步 ：在需要動畫的table上，將屬性 animatedStyle 設定為 TABTableViewAnimationStart ,不需要動畫的table不用做額外的操作

typedef enum {
TABTableViewAnimationDefault = 0, //沒有動畫，預設
TABTableViewAnimationStart,//開始動畫
TABTableViewAnimationEnd//結束動畫
}TABTableViewAnimationStyle; //table動畫狀態列舉

- (UITableView *)mainTV {
if (!_mainTV) {
_mainTV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];
_mainTV.animatedStyle = TABTableViewAnimationStart;//開啟動畫
_mainTV.delegate = self;
_mainTV.dataSource = self;
_mainTV.rowHeight = 100;
_mainTV.backgroundColor = [UIColor whiteColor];
_mainTV.estimatedRowHeight = 0;
_mainTV.estimatedSectionFooterHeight = 0;
_mainTV.estimatedSectionHeaderHeight = 0;
_mainTV.separatorStyle = UITableViewCellSeparatorStyleNone;
}
return _mainTV;
}

第三步：將 需要動 的元件的屬性 loadStyle ，設定為需要的型別，下面貼程式碼， 不需要動 的元件不用做額外的操作

typedef enum {
TABViewLoadAnimationDefault = 0, //預設沒有動畫
TABViewLoadAnimationShort,//動畫先變短再變長
TABViewLoadAnimationLong//動畫先變長再變短
}TABViewLoadAnimationStyle; //view動畫型別列舉

第四步(非常重要，決定了你願不願意使用此封裝方法)：貼部分程式碼，並講解

//獲取對應元件文字大小
CGSize titleSize = [TABMethod tab_getSizeWithText:titleLab.text sizeWithFont:kFont(15) constrainedToSize:CGSizeMake(MAXFLOAT, 25)];
//設定frame
titleLab.frame = CGRectMake(CGRectGetMaxX(gameImg.frame)+15, 10, titleSize.width>0?self.frame.size.width-(CGRectGetMaxX(gameImg.frame)+15):130, 25);

請把注意力放在元件 寬 上，想必你已經看到了，當文字為空的時候，計算出來的大小是0，但是這個時候設定一個預設的寬，並設定背景色，就能達到了讓使用者看到佈局架構的效果，使用此封裝方法的工作量也就在這個地方，接下來只要讓它動起來就可以了

第五步：在cell的 layoutSubviews 方法的末尾加上 [TABViewAnimated startOrEndAnimated:self];

- (void)layoutSubviews {
[super layoutSubviews];

//獲取對應元件文字大小
CGSize titleSize = [TABMethod tab_getSizeWithText:titleLab.text sizeWithFont:kFont(15) constrainedToSize:CGSizeMake(MAXFLOAT, 25)];
CGSize timeSize = [TABMethod tab_getSizeWithText:timeLab.text sizeWithFont:kFont(12) constrainedToSize:CGSizeMake(MAXFLOAT, 25)];

//佈局
gameImg.frame = CGRectMake(15, 10, (self.frame.size.height-20)*1.5, (self.frame.size.height-20));
gameImg.layer.cornerRadius = 5;

titleLab.frame = CGRectMake(CGRectGetMaxX(gameImg.frame)+15, 10, titleSize.width>0?self.frame.size.width-(CGRectGetMaxX(gameImg.frame)+15):130, 25);
timeLab.frame = CGRectMake(CGRectGetMaxX(gameImg.frame)+15, CGRectGetMaxY(titleLab.frame)+5, timeSize.width>0?self.frame.size.width-(CGRectGetMaxX(gameImg.frame)+15):200, 15);
statusBtn.frame = CGRectMake(CGRectGetMaxX(gameImg.frame)+15, CGRectGetMaxY(timeLab.frame)+5+5,70, 20);

if ( timeSize.width > 0 ) {
statusBtn.layer.cornerRadius = 5;
}

//執行動畫/移除動畫
[TABViewAnimated startOrEndAnimated:self];
}

第六步：在獲取到資料後，停止動畫，如下:

_mainTV.animatedStyle = TABTableViewAnimationEnd;
[_mainTV reloadData];

注意點：在載入動畫的時候，即未獲得資料時，不要設定對應的數值

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *str = @"TestTableViewCell";
TestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:str];
if (!cell) {
cell = [[TestTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:str];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}

//在載入動畫的時候，即未獲得資料時，不要走載入控制元件資料的方法
if (_mainTV.animatedStyle != TABTableViewAnimationStart) {
[cell initWithData:dataArray[indexPath.row]];
}

return cell;
}

最後：

• 歡迎在下方談論，同時，如果覺得對你有所幫助的話，能在github上star一下就更好了
• 如有問題，可以聯絡我，qq:1429299849
• github地址： ofollow,noindex">https://github.com/tigerAndBull/LoadAnimatedDemo-ios ，別忘記點star哦～