阅读 1636

使用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的最大好处就是能异步绘制最大程度保持界面流畅,另外可以通过YYLabelexclusionPaths属性实现缩进动画。

exclusionPathsYYText的用于设置文本空白区域的数组,可以存放多个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:想要动态修改YYLabelexclusionPaths,则ignoreCommonProperties属性要为 NO。 如果设置为YES,文本显示的属性诸如textfonttextColorattributedTextlineBreakModeexclusionPaths等将不可用,这是为了提高性能,尽可能将控件属性做静态处理。

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;
}];
复制代码

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

最终效果

总结

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

可惜的是刚完成这效果,产品就说标题那里不需要状态图标了,也就是白做了~

今时今日YYKit还是很强大实用的👍,感谢看到最后 Thanks♪(・ω・)ノ。