iOS-UI组件之仿照“半糖”实现树状标签

iOS-UI组件之仿照“半糖”App实现树状标签

背景

因为自己在做电商方面的App，所以在浏览其他App学习一些好的交互方式以及动画处理。无意中发现了“半糖”这款App，觉得其中的一些交互给人感觉特别顺畅和舒服。在这期间对树状分支比较感兴趣，用于对图片打上特定的树状标签，于是便仿写了这一组件，其中也参考了曾宪华大神的demo，如果感兴趣或者有其他的意见和建议请见:Github

实现效果

image

image

技术实现

一、视图拆分

我们可以将视图拆分为三大块：

• 中间的圆心视图
• 树状分叉
• 分支尾部文本视图

二、视图效果与动画

• 首先是圆心视图，可以看到圆心视图有脉冲的效果，于是我们用到了CAReplicatorLayer。 CAReplicatorLayer可以复制自己子层的layer,并且复制的出来的layer和原来的子layer拥有相同的动效。然后通过设置一些属性，就可以完成很酷的效果，非常强大。使用CAAnimationGroup包装动画，形成动画组。这其中包括放大和变更透明度的动画，使用CABasicAnimation及CAKeyframeAnimation完成。

- (void)startAnimation {
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
        
        if (!self.animationGroup) {
            CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
            animationGroup.duration = self.animationDuration;
            animationGroup.repeatCount = self.repeatTimes;
            animationGroup.removedOnCompletion = NO;
            
            CAMediaTimingFunction *defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
            animationGroup.timingFunction = defaultCurve;
            
            CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
            scaleAnimation.fromValue = @(self.fromValueForRadius);
            scaleAnimation.toValue = @1.0;
            scaleAnimation.duration = self.animationDuration;
            
            CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
            opacityAnimation.duration = self.animationDuration;
            opacityAnimation.values = @[@(self.fromValueForAlpha), @0.45, @0];
            opacityAnimation.keyTimes = @[@0, @(self.keyTimeForHalfOpacity), @1];
            opacityAnimation.removedOnCompletion = NO;
            
            NSArray *animations = @[scaleAnimation, opacityAnimation];
            
            animationGroup.animations = animations;
            
            self.animationGroup = animationGroup;
        }
        
        dispatch_async(dispatch_get_main_queue(), ^(void) {
            self.opacity = 1.0;
            [self.targetLayer addAnimation:self.animationGroup forKey:@"focus"];
        });
    });
}

• 分支动画，其实就是我们最常用的CAShapeLayer+BezierPath来绘制折线的过程,并在endpoint处画圆。这部分比较简单，就不粘出来了，感兴趣的可以直接gitclone代码来看。

三、三个分支四种样式

分支样式有：1.分支全在左边；2.分支全在右边；3.两左一右；4.两右一左。 初始化时可以指定对应的样式。不同的样式是根据已经存到model中的六组分支数据去配置的。

四、后续

后面会继续维护优化这一UI库，支持更强大的tag，比如三个以上的多分支，边界判断，更炫的动画效果等等。希望感兴趣的童鞋可以star一下，谢谢啦！MikeZhangpy