ios开发 新人引导设计/新功能/新特性引导页

当我们开发app的一些新功能的时候,经常会有需求,要求我们引导用户去使用这些新功能,类似于下面的这种效果:

大家注意看,”知道啦“,”全新任务上线了“,这些字体,我们的UI们都使用了艺术字体。这是必须的。由于屏幕适配,艺术字体被拉伸了也看不出来呀~

所以,大家就可以想到我们这张引导页,其实整体使用的就是一张图片。

敲重点!!!    ”任务中心“,这里的镂空效果,就是我们接下来要详细讲解的部分。

两种方案:

方案一:我们可以在灰色背景的上层加一层白色的背景,在白色背景上再添加图片和文字,覆盖掉底层的图片和文字。

方案二:我们可以使用贝塞尔曲线来反向绘制一个镂空的部分,这是我们重点讲解的内容:

     //绘制一个全屏的透明背景View

    UIView *bgView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 375, 667)];

    [self.view addSubview:bgView];

    //贝塞尔曲线 画一个矩形

    UIBezierPath *bpath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 375, 667)];

    //bezierPathByReversingPath表示反向绘制

    [bpath appendPath:[[UIBezierPath bezierPathWithRect:CGRectMake(10, 200, 100, 100)] bezierPathByReversingPath]];

    //创建一个CAShapeLayer 图层,黑色半透明背景

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    shapeLayer.fillColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor;

    shapeLayer.path = bpath.CGPath;

    [bgView.layer addSublayer:shapeLayer];

//最后添加图片

    UIImageView *imageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 375, 667)];

    imageView.image=[UIImage imageNamed:@"image_1"];

    [bgView addSubview:imageView];

你可能感兴趣的:(ios开发 新人引导设计/新功能/新特性引导页)