IOS仿微信红包CAShapeLayer + UIBezierPath

/**
 *  仿微信红包
 */
- (void)wxRedPacket{
    //深色背景
    CAShapeLayer *redLayer = [[CAShapeLayer alloc] init];
    UIBezierPath *pathFang = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 80, kMain_Width-40, kMain_Height-160) cornerRadius:4];
    redLayer.path = pathFang.CGPath;
    [self.view.layer addSublayer:redLayer];
    [redLayer setFillColor:[UIColor colorWithRed:0.7968 green:0.2186 blue:0.204 alpha:1.0].CGColor];
    
    //浅色红包口
    CAShapeLayer *lineLayer = [[CAShapeLayer alloc] init];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 80, kMain_Width-40, kMain_Height-320) byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(4, 4)];
    CGPoint startPoint = CGPointMake(20,  kMain_Height-240);
    CGPoint endPoint = CGPointMake(kMain_Width-20, kMain_Height-240);
    CGPoint controlPoint = CGPointMake(kMain_Width*0.5, kMain_Height-180);
    //曲线起点
    [path moveToPoint:startPoint];
    //曲线终点和控制基点
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
    
    //曲线部分颜色和阴影
    [lineLayer setFillColor:[UIColor colorWithRed:0.851 green:0.3216 blue:0.2784 alpha:1.0].CGColor];
    [lineLayer setStrokeColor:[UIColor colorWithRed:0.9401 green:0.0 blue:0.0247 alpha:0.02].CGColor];
    [lineLayer setShadowColor:[UIColor blackColor].CGColor];
    [lineLayer setLineWidth:0.1];
    [lineLayer setShadowOffset:CGSizeMake(6, 6)];
    [lineLayer setShadowOpacity:0.2];
    [lineLayer setShadowOffset:CGSizeMake(1, 1)];
    lineLayer.path = path.CGPath;
    [self.view.layer addSublayer:lineLayer];
    
    //发红包按钮
    UIButton *sendBtn = [[UIButton alloc] initWithFrame:CGRectMake((kMain_Width-100)/2, kMain_Height-240-20, 100, 100)];
    sendBtn.layer.masksToBounds = YES;
    sendBtn.layer.cornerRadius = sendBtn.bounds.size.height/2;
    [sendBtn setTitle:@"发红包" forState:UIControlStateNormal];
    [sendBtn setBackgroundColor:[UIColor brownColor]];
    [self.view addSubview:sendBtn];
}

效果:

IMG_2618.PNG
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容