相信大家都看見過微博上鲫懒，或者簡書看到這個控件的占位圖，預加載的動畫效果圖刽辙，這個在web上已經很成熟了窥岩，最近有空閑，就研究了一下宰缤，其實還是很好實現的颂翼。
place_hold.png
先說OC版晃洒，在GitHub上下載安裝包 [鏈接](https://github.com/mayqiyue/OCSkeleton）
下載完成以后你會看到
image.png
研究了一下他的代碼，看示例代碼可以看出來用到了繼承朦乏，然后添加到CAGradientLayer動畫組里面滑動方向分左右兩個方向
typedef enum {
OCDirectionRight = 0,
OCDirectionLeft,} OCDirection
示例代碼里面已經在tableView代理方法中這樣寫
-(NSInteger)tableView:(UITableView *)tableVie numberOfRowsInSection:(NSInteger)section {
return self.view.frame.size.height/70;
}
這里你稍微做一下調整在真實項目中
-(NSInteger)tableView:(UITableView *)tableVie numberOfRowsInSection:(NSInteger)section {
if（self.dataSoure.count>0）{ return self.dataSoure.count }else{
return self.view.frame.size.height/70;}
}
示例代碼這段代碼
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
OCSkeletonCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellid" forIndexPath:indexPath];
for (CAGradientLayer *layer in cell.gradientLayers) {
UIColor *baseColor = cell.titlePlaceholderView.backgroundColor;
layer.colors = @[(id)baseColor.CGColor, (id)brightened(baseColor, 0.93).CGColor,(id) baseColor.CGColor];
}
return cell;
}
真實項目中做一個判斷
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
OCSkeletonCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellid" forIndexPath:indexPath]; if（self.dataSourc.count>0）{
-- 這里是給cell賦值 }else{
for (CAGradientLayer *layer in cell.gradientLayers) {
UIColor *baseColor = [UIColor grayColor] ;
layer.colors = @[(id)baseColor.CGColor, (id)brightened(baseColor, 0.93).CGColor,(id) baseColor.CGColor];
} }
return cell;
}
這里是你動畫的方向是向右還是向左
- (void)tableView:(UITableView *)tableView willDisplayCell:(自定義的cell )cell forRowAtIndexPath:(NSIndexPath *)indexPath{
[cell slideToDir:OCDirectionRight animations:nil];}
有個小細節(jié)要注意就是你的控件繼承
image.png
就是你的cell了里面肯定有UILabel 或者UIbutton 分別繼承他的父類球及，可以參考#import "OCGradientContainerView.h"里面的代碼重新復制一份就行了，然后在自定義的cell里的加上他需要動畫的數組中這個是關鍵
- (NSArray <OCGradientLayer *>*)gradientLayers {
if (self.titlePlaceholderView && self.subtitlePlaceholderView) {
return @[self.titlePlaceholderView.gradientLayer, self.subtitlePlaceholderView.gradientLayer];
}
return nil;}
好了呻疹，swift版本的鏈接也發(fā)出來鏈接
用法跟OC版本是一樣的
好了快去試試吧吃引！
