相信大家都看见过微博上，或者简书看到这个控件的占位图，预加载的动画效果图，这个在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];}
有个小细节要注意就是你的控件继承
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版本的链接也发出来链接
用法跟OC版本是一样的
好了快去试试吧！
