用于mask遮罩效果的图片配合resizableImage使用

效果:

作为素材用的图片:

源码:

//
//  ViewController.m
//  Rect
//
//  Created by YouXianMing on 15/3/29.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 背景图
    UIImageView *bgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"psb.jpeg"]];
    bgView.frame        = CGRectMake(0, 0,
                                     bgView.frame.size.width / 2.f,
                                     bgView.frame.size.height / 2.f);
    bgView.center       = self.view.center;
    [self.view addSubview:bgView];

    // 作为mask用的图片
    UIImage *maskImage   = [UIImage imageNamed:@"rect_new"];
    maskImage            = [maskImage resizableImageWithCapInsets:UIEdgeInsetsMake(13, 13, 13, 13)
                                                     resizingMode:UIImageResizingModeTile];

    // 作为mask用的view
    UIImageView *maskView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    maskView.image        = maskImage;
    bgView.maskView       = maskView;

    // 执行动画
    [UIImageView animateWithDuration:3.f animations:^{
        maskView.frame = bgView.bounds;
    }];
}

@end

需要注意的细节:

这对于做alpha通道的渐变效果十分便利。

时间: 2024-08-18 18:57:26

用于mask遮罩效果的图片配合resizableImage使用的相关文章

CSS3 mask 遮罩蒙版效果

mask demo效果演示:http://dtdxrk.github.io/game/css3-demo/mask.html mask 的属性: -webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/ -webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat -webkit-mask-position:x y; -webkit-mask-clip:border | padding |

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

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

[读码][js,css3]能感知鼠标方向的图片遮罩效果

效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net

css奇特用法之 IMG添加背景图片配合显示--效果惊艳

IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路,我想这种思路可以应用的地方相当多了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

遮罩效果 css3

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

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

使用CAShapeLayer实现复杂的View的遮罩效果

一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定义遮罩效果,就是本文要讲的内容.效果演示如下:第一张是一个View的遮罩效果,第二张是UIImageView的遮罩效果.  二.实现机制 在每一View的layer层中有一个mask属性,他就是专门来设置该View的遮罩效果的.该mask本身也是一个layer层.我们只需要生成一个自定义的layer

jquery轻量级鼠标悬停半透明遮罩效果,一看就懂哦

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery打造鼠标悬停图片时的半透明遮罩效果</title><style>*{margin:0;padding:0;}li{list-style:none;}.box{width:800px;height:400px;margin:50px auto;overflow:hidden;}.box ul li{widt

Flash Actionscript AS3 渐变透明 mask遮罩

把图片变成渐变透明(左图是效果图,右图是原图) var a:Sprite = new Sprite(); a.graphics.beginGradientFill(GradientType.LINEAR, [0xff0000,0xff0000], [1,0.3], [0, 255]); a.graphics.drawRect(0, 0, 240, 225); a.graphics.endFill(); addChild(a); a.rotation = 90; a.x = 226; aaa.ma