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

简介:

用于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通道的渐变效果十分便利。

 

目录
相关文章
|
3月前
Fireworks如何给图片添加阴影效果? fw给图片增加阴影效果的技巧
有时需要给图片添加阴影效果。那么,Fireworks软件中如何给图片添加阴影效果呢?
55 1
|
6月前
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
171 0
如何使用 CSS object-fit 进行图片的缩放和裁剪
layer弹出图片大小自适应
layer弹出图片大小自适应
153 0
|
小程序 JavaScript
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
773 0
|
定位技术
egret纹理填充模式(上下填充)
egret纹理填充模式(上下填充)
egret纹理填充模式(上下填充)
|
前端开发
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
|
JavaScript 前端开发
利用 clip-path 实现动态区域裁剪
利用 clip-path 实现动态区域裁剪
279 0
|
前端开发 定位技术 容器
使用 mask 实现视频弹幕人物遮罩过滤
使用 mask 实现视频弹幕人物遮罩过滤
276 0
使用 mask 实现视频弹幕人物遮罩过滤
|
Android开发
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(二)
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(二)
329 0
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(二)

热门文章

最新文章