利用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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

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