iOS小游戏:撕掉美女衣服

// 1.创建工程 -> 选 Next.

QQ20160722-0.png

// 2.在Main.storyboard中放两张imageView, 先放撕掉后的,再在上面放撕掉前的,并打开用户交互,做好约束,然后将撕掉前的拽成属性.

QQ20160722-1.png

// 3.在ViewController.m里按如下操作即可实现,撕美女衣服(imageView)或者刮奖(label).

//
//  ViewController.m
//  郭宝-午分享
//
//  Created by 郭宝 on 16/7/15.
//  Copyright © 2016年 郭宝. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageB;
@property (nonatomic,assign) BOOL isTouch;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

// 关于触屏事件的一些操作
// 应用:刮奖(图片擦除 刮奖原理)
// 实现原理:当手指触摸到屏幕上的时候,去到触摸的某一个点,放大成一个正方形或者圆形,形成橡皮的感觉,在滑动过的区域将图片刮除,显示下面的label或者其他view,一定要保证刮除的图片一定是透明的,否则看不到下面的label或者view
// 先在ViewController里写几个方法:
// 开始触摸的方法

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 获取手指
    UITouch *touch = [touches anyObject];
    // 判断手指是否在触摸
    if (touch.view == self.imageB) {
        self.isTouch = YES;
        NSLog(@"开始触摸");
    }
}

// 触摸移动的方法

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    if (self.isTouch) {
        // 开启上下文      UIGraphicsBeginImageContextWithOptions(self.imageB.frame.size, NO, 0); //参数NO为设置不透明, 0为不进行缩放.
        // 把图片绘制到图像上下文中
        [self.imageB.image drawInRect:self.imageB.bounds];
        // 清空手指触摸的位置
        // 拿到手指, 根据手指的位置, 让对应的位置成为透明
        UITouch *touch = touches.anyObject;
        CGPoint point = [touch locationInView:touch.view];
        CGRect rect = CGRectMake(point.x - 10, point.y - 10, 20, 20);
        // 清除划过的区域
        CGContextClearRect(UIGraphicsGetCurrentContext(), rect);
        // 取出之后的图片赋值给imageB
        self.imageB.image = UIGraphicsGetImageFromCurrentImageContext();
        // 关闭图像上下文
        UIGraphicsEndImageContext();
        NSLog(@"触摸移动");
    }
}

// 触摸结束的方法

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    self.isTouch = NO;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

运行之后的结果如下:

QQ20160722-2.png

其中运用到的素材

afterA.jpg

preB.jpg