高仿QQ红点消除动画

前言

一直觉得qq的红点动画比较叼,今天研究了一下,主要是绘制不规则图形和左右晃动动画,希望可以帮到你们.

王姐威武霸气.jpg
一下是效果展示
2BDEF402-CC52-4704-A218-4C6FE648AA9F.png
CD8E492F-6EC8-4F7A-9FCF-202F6E834304.png

废话不多说上代码

#pragma mark - 用于计算不规则路径
- (UIBezierPath *)pathWithBigCirCleView:(UIView *)bigCirCleView  smallCirCleView:(UIView *)smallCirCleView
{
    CGPoint bigCenter = bigCirCleView.center;
    CGFloat x2 = bigCenter.x;
    CGFloat y2 = bigCenter.y;
    CGFloat r2 = bigCirCleView.bounds.size.width / 2;
    
    CGPoint smallCenter = smallCirCleView.center;
    CGFloat x1 = smallCenter.x;
    CGFloat y1 = smallCenter.y;
    CGFloat r1 = smallCirCleView.bounds.size.width / 2;
    
    // 获取圆心距离
    CGFloat d = [self pointToPoitnDistanceWithPoint:self.samllCircleView.center potintB:self.center];
    CGFloat sinθ = (x2 - x1) / d;
    CGFloat cosθ = (y2 - y1) / d;
    
    // 坐标系基于父控件
    CGPoint pointA = CGPointMake(x1 - r1 * cosθ , y1 + r1 * sinθ);
    CGPoint pointB = CGPointMake(x1 + r1 * cosθ , y1 - r1 * sinθ);
    CGPoint pointC = CGPointMake(x2 + r2 * cosθ , y2 - r2 * sinθ);
    CGPoint pointD = CGPointMake(x2 - r2 * cosθ , y2 + r2 * sinθ);
    CGPoint pointO = CGPointMake(pointA.x + d / 2 * sinθ , pointA.y + d / 2 * cosθ);
    CGPoint pointP = CGPointMake(pointB.x + d / 2 * sinθ , pointB.y + d / 2 * cosθ);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    // A
    [path moveToPoint:pointA];
    // AB
    [path addLineToPoint:pointB];
    // 绘制BC曲线
    [path addQuadCurveToPoint:pointC controlPoint:pointP];
    // CD
    [path addLineToPoint:pointD];
    // 绘制DA曲线
    [path addQuadCurveToPoint:pointA controlPoint:pointO];
    
    return path;
}

Demo下载地址:https://github.com/yuhechuan/UITabBar-qqDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,466评论 25 708
  • 没有人不需要一个朋友,没有人没有一个朋友,除非他是自我封闭,与世隔绝。李白说得好“桃花潭水深千尺,不及汪伦送我情”...
    D035牛牛_佛山阅读 209评论 2 8
  • 董院子,古柏山水画家,江苏省徐州市人,山人斋主。1963年出生。现为中国当代书画家网特聘书画家,中国王義之书画艺术...
    燕子掌柜阅读 1,968评论 0 0
  • 不可能有人在原处等着你 就像你也会追逐着风景离去 这是闲下来累下去怀念的时光罢了 而你,恰好是其中一个
    枢止阅读 179评论 0 0