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
