利用CAShapeLayer做一些效果

CAShapeLayer是个非常好用的类,配合UIBezierPath曲线可以做很多特殊的效果,而且在效率和内存占用上比自己重新绘制好很多。

利用遮罩效果画圆角

什么是遮罩效果?
顾名思义,就像是一个罩子盖在了一个图片上,这个图片只漏出了一部分。每个View持有的Layer属性里都有一个mask属性,用来给这个view添加遮罩效果。
需要注意,遮罩效果中设置遮罩颜色是不起作用的,遮罩部分显示的是底色(层级上距离这个view最近上一层view的底色,并不一定是父视图的颜色),透明度在此起作用。
我们可以尝试利用这个方式做一个只有左上和右下有圆角效果的view。

    //切个圆角(为了展示颜色效果,我添加了一个背景图)
    self.view.backgroundColor = [UIColor lightGrayColor];
    //
    UIView *yx_backView = [[UIView alloc] initWithFrame:CGRectMake(150, 150, 150, 150)];
    yx_backView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yx_backView];
    
    //进行操作的视图,左下和右上
    UIView *yx_showView = [[UIView alloc] initWithFrame:CGRectMake(40, 40, 80, 80)];
    yx_showView.backgroundColor = [UIColor greenColor];
    [yx_backView addSubview:yx_showView];
    
    //切个圆角操作
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, yx_showView.bounds.size.width, yx_showView.bounds.size.height) byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
    CAShapeLayer *maskShaperLayer = [CAShapeLayer layer];
    maskShaperLayer.path = maskPath.CGPath;
    yx_showView.layer.mask = maskShaperLayer;

效果如图所示:

3E165192-2A94-4C98-9CE7-203B1709201F.png

可以自行测试设置遮罩颜色和遮罩应该显示的颜色。
利用这个效果我们可以很轻松地设置特殊的圆角操作要求,当然,配合贝塞尔曲线可以做出各种形状的遮罩达到特殊效果。

做一个动画效果

这里用到了CADisplayLink,在做与UI有关的需要用到计时时,强烈建议使用CADisplayLink而不是NSTimer。这两者之间的不同请参照:https://zsisme.gitbooks.io/ios-/content/chapter11/frame-timing.html

2017-08-01 14_59_04.gif

类似于这样的一个动态填充效果。事实上,你可以按照这种方式做很多简单的填充,需要的仅仅是一张填充好的图片和一张未填充的图片。

//做个动画
    UIImageView *yx_starView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"星_03"]];
    yx_starView.frame = CGRectMake(50, 300, 100, 100);
    [self.view addSubview:yx_starView];
    
    UIImageView *yx_coverStarView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1_03"]];
    yx_coverStarView.frame = CGRectMake(0, 0, 100, 100);
    [yx_starView addSubview:yx_coverStarView];
    
    self.starShapeLayer = [CAShapeLayer layer];
    UIBezierPath *starPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 0, 0) cornerRadius:0];
    _starShapeLayer.path = starPath.CGPath;
    yx_coverStarView.layer.mask = _starShapeLayer;
    
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(yx_starAnimation)];
    [_displayLink addToRunLoop:[NSRunLoop currentRunLoop]
                       forMode:NSRunLoopCommonModes];
    //填充百分比
    self.starFillPercent = 0;

- (void)yx_starAnimation {
    //假设要4秒填充完整个星星,每秒需要填充百分之25,CADisplayLink频率大概是1秒60次,这里不需要特别的精准,就不用时间偏移精确计算了
    _starFillPercent += 0.25/60;
    if (_starFillPercent > 1) {
        [_displayLink invalidate];
        return;
    }
    UIBezierPath *starPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 100,100,-_starFillPercent*100) cornerRadius:0];
    _starShapeLayer.path = starPath.CGPath;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,702评论 6 30
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 16,072评论 4 61
  • 在这里学到了什么是忍,什么是默默的不说话,什么是尊严、什么是绝对服从,所以当跟外人聊起经历,我所能表现的仅仅...
    I独听风吟阅读 234评论 5 2
  • 有一句话说任何一种相遇都是一种缘分。今天有幸参加了关于<<高绩效教练>>的书籍分享。 从小给教练贴的标签都是...
    青木林里青木秧阅读 373评论 0 0
  • 六月份美人每日都是欢天喜地忙碌着,终于腾出时间来,已经到了七月初 算一算,时间不早不晚,既能够充分总结一下六月读的...
    CocoWu美人阅读 5,251评论 25 185

友情链接更多精彩内容