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

orangeostrich 发布于1年前 阅读12826次
0 条评论

背景

因为自己在做电商方面的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,比如三个以上的多分支,边界判断,更炫的动画效果等等。

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。