使用YYLabel+CADisplayLink实现文本首行缩进的动画效果

公司有个需求，点击关注，标题处要有个已关注的图标提示，标题文本要根据是否已关注作出位置调整。

关注前后

这种需求可以通过富文本设置首行缩进距离 parag.firstLineHeadIndent 来进行调整：

NSMutableParagraphStyle *parag = [[NSMutableParagraphStyle alloc] init];
parag.firstLineHeadIndent = _isFollowed ? 100 : 0;
NSDictionary *attDic = @{NSFontAttributeName: font,
                         NSForegroundColorAttributeName: WTVPUGCProfilePlayView.videoTitleColor,
                         NSParagraphStyleAttributeName: parag};
NSAttributedString *attStr = [[NSAttributedString alloc] initWithString:videoTitle attributes:attDic];
self.titleLabel.attributedText = attStr;

由于关注按钮点击后应该要有相应的状态更新，如果使用这种做法进行刷新，直接重新设置attributedText，这样虽然能达到目的，可是没有过渡，看上去很生硬，用户体验没那么好，我个人想要的效果是文字也能跟着控件一起过渡变化。

这里介绍一下使用YYLabel+CADisplayLink来实现该效果：

最终效果

1. YYLabel - exclusionPaths

使用YYLabel的最大好处就是能异步绘制最大程度保持界面流畅，另外可以通过YYLabel的exclusionPaths属性实现缩进动画。

exclusionPaths是YYText的用于设置文本空白区域的数组，可以存放多个UIBezierPath类型的元素，即规定的空白区域。

红色框就是exclusionPaths设置的区域

对于首行缩进，只要创建一个原点为(0, 0)，宽度为已关注图标的最大x值+间距，高度不超过行高（宽高都不能为0，必须大于0，否则无效果）的UIBezierPath，丢进数组，设置一下exclusionPaths即可实现：

// 刷新方法
- (void)updateTitleLabelExclusionPaths {
    if (self.pursueView) {  // 已关注
        // 1.获取图标最大x值+间距
        CGFloat w = self.pursueView.jp_maxX + _subviewSpace; 
        // 2.刷新 exclusionPaths。
        self.titleLabel.exclusionPaths = @[[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, w, 1)]];
    } else {  // 没有关注
        // 移除 exclusionPaths
        self.titleLabel.exclusionPaths = nil; 
    }
}

PS：想要动态修改YYLabel的exclusionPaths，则ignoreCommonProperties属性要为 NO。 如果设置为YES，文本显示的属性诸如text、font、textColor、attributedText、lineBreakMode、exclusionPaths等将不可用，这是为了提高性能，尽可能将控件属性做静态处理。

2. CADisplayLink

配合CADisplayLink，用于动画过程中跟踪已关注图标的位置变化，不过动画过程监听的并不是图标控件自身的属性，而是图标控件的layer.presentationLayer。

presentationLayer是用于实时获取动画过程中的layout信息，如果控件不是在动画过程中，该属性为nil（系统的动画API都是通过这个“假”的presentationLayer来呈现动画的，本体是直接就到了最终位置的，如果是POP这个库的动画本体才是实时变化的）。

添加、移除CADisplayLink：

- (void)addLink {
    [self removeLink];
    // 执行updateTitleLabelExclusionPaths进行刷新
    self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateTitleLabelExclusionPaths)];
    [self.link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
- (void)removeLink {
    if (self.link) {
        [self.link invalidate];
        self.link = nil;
    }
}

另外刷新方法得修改一下：

- (void)updateTitleLabelExclusionPaths {
    if (self.pursueView) {  // 已关注
        // 1.获取图标最大x值+间距
        CGFloat w = _subviewSpace
        if (self.link) {  // 如果CADisplayLink存在，说明是在动画过程中
            w += self.pursueView.layer.presentationLayer.jp_maxX;
        } else {
            w += self.pursueView.jp_maxX;
        }
        // 2.刷新 exclusionPaths。
        self.titleLabel.exclusionPaths = @[[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, w, 1)]];
    } else {  // 没有关注
        // 移除 exclusionPaths
        self.titleLabel.exclusionPaths = nil; 
    }
}

点击关注/取关按钮触发的动画方法：

CGFloat alpha = 0;
CGFloat x = 0;
if (isFollowed) {
    if (!self.followedView) [self createFollowedView];
    alpha = 1;
} else {
    x -= (self.followedView.jp_width + _subviewSpace); // 非关注就挪开
}
    
self.pursueView = self.followedView; // 标记跟踪的图标

// 非关注 --> 已关注 的初始化
if (isFollowed) {
    self.followedView.alpha = 0;
    self.followedView.jp_x = x - (self.followedView.jp_width + _subviewSpace);
}

// 0.动画过程中得关闭displaysAsynchronously属性，因为这是异步绘制，如果为YES则label会不停地闪烁刷新
self.titleLabel.displaysAsynchronously = NO;

// 1.动画开始前一刻添加CADisplayLink，开始跟踪
[self addLink];

// 2.开始动画
[UIView animateWithDuration:0.45 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:1.0 options:kNilOptions animations:^{
    self.followedView.alpha = alpha;
    self.followedView.jp_x = x;
} completion:^(BOOL finished) {
    // 3.移除CADisplayLink，停止跟踪
    [self removeLink];
    // 4.最终调整
    [self updateTitleLabelExclusionPaths];
    // 5.重新开启异步绘制（滑动优化）
    self.titleLabel.displaysAsynchronously = YES;
}];

这样就可以实现我个人想要的最终效果了，如果还有别的状态图标，也是一样的做法，例如直播状态：

最终效果

总结

YYLabel的ignoreCommonProperties要设置为NO；
CADisplayLink要在动画开始前一刻才开启，并且记得在结束后关闭；
动画过程中要跟踪的是控件的presentationLayer，这个才有显式信息，本体是一步到位的；
如果YYLabel设置了displaysAsynchronously为YES，动画开始前最好设为NO，否则动画过程中label会不停地闪烁刷新（异步绘制后刷新），动画结束后才设回YES；
如果多行显示不全时结尾无法以省略号显示，可以参考我上一篇文章：解决YYLabel多行显示不全时结尾无法以省略号显示的问题。

可惜的是刚完成这效果，产品就说标题那里不需要状态图标了，也就是白做了~
今时今日YYKit还是很强大实用的👍，感谢看到最后 Thanks♪(･ω･)ﾉ。

Demo地址：FirstLineHeadIndentAnimation
Demo说明