最近再做一个统计类视图较多的一个项目，有一个需求是显示某人的两个业务的统计情况，效果类似于这样
屏幕快照 2017-08-23 上午9.55.17.png
整体是滑动视图，apear时会有动画展开，动画结束后显示后边的数值，乍一看思路很简单：
- cell上用CAShapLayer画线;
- 给相应的layer加上基础动画；
- 采用动画的代理，兼听动画的结束；
- 动画结束后修改数据源model数据，刷新相应的cell，取消动画，显示数字。
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
开始的思路是在上边的方法中获取某项动画的结束，于是创建的基础动画的子类并添加了标记位tag值，标记是cell中的那一项，在上述方法中获取这个基础动画，并获取他的标记位，刷新相应的cell
但是在实际测试时发现这个基础动画的标记位，始终不能赋值，在动画结束时也可以获取基础动画类，但是标记位始终为空。
于是调换思路，让cell自己记录自己的位置，在动画结束时获取结束的cell位置，告知VC刷新
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
if (self.model.isShow) {
return;
}else{
self.model.isShow = YES;
}
if (self.blockUpdate) {
self.blockUpdate(self.animation.myTag);
}
}
效果基本达到了需求的要求，主要代码如下:
添加动画
- (void)addLayer{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 22)];
[path addLineToPoint:CGPointMake(320, 22)];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
// layer.bounds = CGRectMake(0, 0, 320, 22);
// layer.position = CGPointMake(160, 22);
layer.strokeColor = [UIColor blueColor].CGColor;
layer.lineWidth = 20.0f;
self.layer0 = layer;
[self.contentView.layer addSublayer:layer];
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(0, 22)];
[path1 addLineToPoint:CGPointMake(100, 22)];
CAShapeLayer *layer1 = [CAShapeLayer layer];
layer1.path = path1.CGPath;
// layer1.bounds = CGRectMake(0, 0, 100, 22);
// layer1.position = CGPointMake(50, 22);
layer1.strokeColor = [UIColor redColor].CGColor;
layer1.lineWidth = 20.0f;
self.layer1 = layer1;
[self.contentView.layer addSublayer:layer1];
// [self addTextLayer:layer];
CWCCABasicAnimation *strokeEndAnimation = nil;
strokeEndAnimation = [CWCCABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation.duration = 2.0f;
strokeEndAnimation.myTag = [NSString stringWithFormat:@"%ld",(long)self.tag0];
strokeEndAnimation.fromValue = @(0.0f);
strokeEndAnimation.toValue = @(1.0f);
strokeEndAnimation.autoreverses = NO; //无自动动态倒退效果
strokeEndAnimation.delegate = self;
self.animation = strokeEndAnimation;
CABasicAnimation *strokeEndAnimation1 = nil;
strokeEndAnimation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation1.duration = 2.0f * 1/3;
strokeEndAnimation1.fromValue = @(0.0f);
strokeEndAnimation1.toValue = @(1.0f);
strokeEndAnimation1.autoreverses = NO; //无自动动态倒退效果
if (self.model.isShow) {
return;
}
[layer addAnimation:strokeEndAnimation forKey: [NSString stringWithFormat: @"strokeEnd%ld",(long)self.tag0]];
[layer1 addAnimation:strokeEndAnimation1 forKey:@"strokeEnd"];
}
视图显示&刷新
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
// UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
// if (!cell) {
CWCTableViewCell*cell = [[CWCTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
// }
cell.model = self.sourceArray[indexPath.row];
// [[cell.contentView.layer sublayers] makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
// [[cell.contentView subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];
cell.tag0 = indexPath.row;
[cell addLayer];
cell.blockUpdate = ^(NSString *tag){
[self.myTableView beginUpdates];
[self.myTableView reloadRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:[tag integerValue] inSection:0]] withRowAnimation:UITableViewRowAnimationNone];
[self.myTableView endUpdates];
};
// [self addAnimation:cell.contentView tag:indexPath.row];
// [self addTextLayer:cell.contentView.layer tag:indexPath.row];
// NSInteger tage = indexPath.row;
CWCmodel *model = self.sourceArray[indexPath.row];
if (model.isShow) {
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width-20, 12, 20, 20)];
label.backgroundColor = [UIColor blackColor];
[cell.contentView addSubview:label];
UILabel *labelText = [[UILabel alloc] initWithFrame:CGRectMake(110, 12, 30, 20)];
labelText.backgroundColor = [UIColor clearColor];
labelText.text = @"34";
labelText.textColor = [UIColor whiteColor];
[cell.contentView addSubview:labelText];
}
return cell;
}
效果
IMG_2895.GIF
