公司有个需求，点击关注，标题处要有个已关注的图标提示，标题文本要根据是否已关注作出位置调整。
关注前后
这种需求可以通过富文本设置首行缩进距离 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♪(･ω･)ﾉ。
网友评论