CALayer实现遮罩效果

#import "ViewController.h"

@interface ViewController ()
@property(nonatomic,strong)CALayer *imageLayer;
@property(nonatomic,strong)CALayer *maskLayer;
@property(nonatomic,strong)UIImage *imageContents;
@property(nonatomic,strong)UIImage *maskContents;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //获取图片
    self.imageContents=[UIImage imageNamed:@"1"];
    self.maskContents=[UIImage imageNamed:@"2"];

    //创建图片layer
    self.imageLayer=[CALayer layer];
    self.imageLayer.frame=CGRectMake(50, 50, 200, 200);
    self.imageLayer.contents=(__bridge id)self.imageContents.CGImage;
    [self.view.layer addSublayer:self.imageLayer];

    //创建出遮罩layer
    self.maskLayer=[CALayer layer];
    self.maskLayer.frame=self.imageLayer.bounds;
    self.maskLayer.contents=(__bridge id)self.maskContents.CGImage;

    //给图片layer提供遮罩的layer
    self.imageLayer.mask=self.maskLayer;

    //3秒后做做改变maskLayer的Frame动画
    [self performSelector:@selector(layerAnimation) withObject:nil afterDelay:3];

}
-(void)layerAnimation
{
    self.maskLayer.frame=CGRectMake(50, 50, 200, 200);
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];

}

@end
时间: 2024-11-08 20:50:37

CALayer实现遮罩效果的相关文章

【转】扩展easyUI tab控件,添加加载遮罩效果

在easyui下自己生成遮罩效果的方法 (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据,请稍候..."; } $("<di

CSS遮罩效果和毛玻璃效果

前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width

可以防止滚动条影响的全屏遮罩效果

可以防止滚动条影响的全屏遮罩效果:遮罩效果当前在很多应用中都有使用,当然也比较简单,无非是在需要的时候出现一个具有透明效果的全屏元素,但是有一种情况需要特别注意一下,那就是页面出现滚动条的时候,这个时候如不进行一下处理,遮罩层效果的表现可能不伦不类.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" cont

一个前端博客(5)——遮罩效果及tool.js实现

遮罩效果 遮罩效果的应用还是很多的,效果如图: 实现原理是通过一个div作为遮罩,它要绝对行为,高度和宽度为浏览器的高度和宽度,背景为半透明,这里半透明的效果若要兼容IE的话,通过filter:alpha(opacity=30),它等价于在其他的浏览器opacity:0.3.下面为代码: #screen{ position: absolute; top:0; left:0; background: #000; opacity: 0.3; z-index: 9998; display: none;

Extjs 密码遮罩效果

Extjs 密码插件 qq:2294508843 密码输入时候,可以先看到输入字符,过后变* ,作为Ext 的插件形式, Extjs 密码遮罩效果,布布扣,bubuko.com

jquery制作弹出层带遮罩效果,点击阴影部分层消失

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 1 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> 2 <div id="myModal" class="reveal-modal&quo

Html遮罩效果

遮罩效果 <!DOCTYPE html> <html> <head> <title>DIV CSS遮罩层</title> <script language="javascript" type="text/javascript"> function showdiv() { document.getElementById("bg").style.display ="bl

遮罩效果 css3

CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层就显示的越多,反之,底层显示越少 1. CSS3属性 CSS3中提供的新属性有(括号为跟background对应类似的属性): -webkit-mask-image:设置遮罩图片地址 -webkit-mask-position: 定义遮罩层的出现位置,可以取值px或百分比,也可以指定为 top le

为图片添加半透明遮罩效果

平时为图片添加半透明遮罩效果,我的做法如下:利用标签i实现背景半透明遮罩 <p class="opacity-black-position"><a href="#"><img src="images/4601.jpg" alt=""><i></i></a></p> 为html结构添加如下css样式: /* 利用标签i实现背景半透明遮罩, 兼容性