Latest 1.1
Homepage https://github.com/WilliamZhangWH/WWAnimationTabbar
License MIT
Platforms ios 7.0, requires ARC
Authors

谷歌翻译TabBar点击效果动画复刻

效果展示

image

调用方法

increasedHeight为0即为系统TabBar高度

- (instancetype)initWithFrame:(CGRect)frame increasedHeight:(CGFloat)height;

代理方法

记录从哪里跳转到哪里

- (void)tabBar:(WWTabBar *)tabBar selectedFrom:(NSInteger)from to:(NSInteger)to;

按钮点击圆形扩展动画原理

  • 原理:创建CAShapeLayer图层,通过UIBezierPath创建两个绘图路径,再通过CABasicAnimation完成两个绘图路径之间动画转变

图层创建

- (CAShapeLayer *)circlePathLayer {
    if (!_circlePathLayer) {
        _circlePathLayer = [[CAShapeLayer alloc]init];
        _circlePathLayer.frame = self.bounds;

        CGRect circleFrame = CGRectMake(0, 0, circleRadius, circleRadius);
        circleFrame.origin.x = CGRectGetMidX(_circlePathLayer.bounds);
        circleFrame.origin.y = CGRectGetMidY(_circlePathLayer.bounds);
        self.circleFrame = circleFrame;

        _circlePathLayer.path = [self getSmallCirclePath].CGPath;

        self.layer.masksToBounds = YES;
        _circlePathLayer.fillColor = Shadow_Color.CGColor;
        _circlePathLayer.backgroundColor= [UIColor clearColor].CGColor;

        /* 添加到按钮的第一层 这样不会覆盖按钮的Image */
        [self.layer insertSublayer:_circlePathLayer atIndex:0];
    }
    return _circlePathLayer;
}
  • 绘图路径创建 (需要创建两个路径,第一个是点击时候出现的一个小圆,第二个是覆盖整个按钮的一个大圆)

小圆路径创建

- (UIBezierPath *)getSmallCirclePath {
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.circleFrame.origin.x, self.circleFrame.origin.y) radius:circleRadius startAngle:0.0 endAngle:M_PI*2 clockwise:YES];
    return path;
}

大圆路径创建

- (UIBezierPath *)getBigCirclePath {
    /* 求按钮对角线的距离 即为大圆的半径 这样不论点击按钮的任何位置大圆都可完全覆盖 */
    /* 函数功能:已知直角三角形的两个直角边,求斜边*/
    CGFloat bigCircleRadius = hypotf(self.bounds.size.width, self.bounds.size.height);

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.circleFrame.origin.x, self.circleFrame.origin.y) radius:bigCircleRadius startAngle:0.0 endAngle:M_PI*2 clockwise:YES];
    return path;
}

小圆到大圆的扩张动画

- (void)pathExpandAnimate {
    CABasicAnimation *circleAnimtion = [CABasicAnimation animationWithKeyPath:@"path"];
    circleAnimtion.removedOnCompletion = NO;
    circleAnimtion.duration = 0.3;
    circleAnimtion.fromValue = (__bridge id)[self getSmallCirclePath].CGPath;
    circleAnimtion.toValue = (__bridge id)[self getBigCirclePath].CGPath;
    _circlePathLayer.path = [self getBigCirclePath].CGPath;
    [_circlePathLayer addAnimation:circleAnimtion forKey:@"animPath"];
}

通过按钮的触摸事件来触发动画的开始和结束

- (void)showCircleLayerWithPoint:(CGPoint)position {
    [self circlePathLayer];
    self.circlePathLayer.position = position;/* 传递手指点击的位置 */
    [self pathExpandAnimate];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    /* 执行按钮的事件方法 不写不会执行 */
    [self sendActionsForControlEvents:UIControlEventTouchDown];
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];

    [self showCircleLayerWithPoint:point];

}

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [_circlePathLayer removeFromSuperlayer];
    _circlePathLayer = nil;
}

Installation

1.手动添加:

  • 将WWTabbar文件夹中拖拽到项目中
  • 导入头文件:#import "WWTabbar.h"

2.pods添加

  • pod ‘WWAnimationTabbar’

License

  • MIT license.

Latest podspec

{
    "name": "WWAnimationTabbar",
    "version": "1.1",
    "summary": "Animation in tabbar.",
    "homepage": "https://github.com/WilliamZhangWH/WWAnimationTabbar",
    "license": "MIT",
    "authors": {
        "williamzhangwh": "[email protected]"
    },
    "platforms": {
        "ios": "7.0"
    },
    "source": {
        "git": "https://github.com/WilliamZhangWH/WWAnimationTabbar.git",
        "tag": "1.1"
    },
    "source_files": [
        "WWAnimationTabbar",
        "WWAnimationTabbar/WWAnimationTabbar/WWTabbar/*.{h,m}"
    ],
    "requires_arc": true
}

Pin It on Pinterest

Share This