iOS中刮刮樂功能的實現

目前很多項目中都會用到“刮刮樂”這個功能點,處于此整理出了一套比較easy的實現方法。

在這里我主要用到了ImageMaskView這個類,下面來說說具體操作:

將項目中的Tools工具直接拖入到工程,ImageMaskView類作為VC的一個屬性并遵循ImageMaskFilledDelegate的代理方法:

@interface ViewController ()<ImageMaskFilledDelegate>
@property(nonatomic, strong)ImageMaskView *baseImage;

圖片的有兩層,第一層為上面的覆蓋層_baseImage,第二層為刮刮樂刮開后顯示的圖片層beforeImage:

UIImageView *beforeImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
beforeImage.frame = CGRectMake(10, 60, self.view.frame.size.width-20, 100);
beforeImage.center = self.view.center;
[self.view addSubview:beforeImage];

beforeImage.layer.borderColor = [UIColor grayColor].CGColor;
beforeImage.layer.borderWidth = 1;


//創建ImageMaskView
_baseImage = [[ImageMaskView alloc] initWithImage:[UIImage imageNamed:@"base"]];
_baseImage.alpha = 1.0;
_baseImage.frame = CGRectMake(10, 60, self.view.frame.size.width-20, 100);
_baseImage.center = self.view.center;
[self.view addSubview:_baseImage];

實現基本UI后,設置畫筆半徑radius大小:

//設置畫筆的半徑
  _baseImage.radius = 10;

調用ImageMaskView的beginInteraction方法:

// Initialization code
self.userInteractionEnabled = YES;
self.backgroundColor = [UIColor clearColor];
self.imageMaskFilledDelegate = self.imageMaskFilledDelegate ? self.imageMaskFilledDelegate : nil;
self.radius = self.radius > 0 ? self.radius : 20;

// Initalize bitmap context
CGSize size = self.image.size;
self.colorSpace = CGColorSpaceCreateDeviceRGB();
self.imageContext = CGBitmapContextCreate(0,size.width,
                                          size.height,
                                          8,
                                          size.width*4,
                                          colorSpace,
                                          kCGImageAlphaPremultipliedLast    );
CGContextDrawImage(self.imageContext, CGRectMake(0, 0, size.width, size.height), self.image.CGImage);

int blendMode = kCGBlendModeClear;
CGContextSetBlendMode(self.imageContext, (CGBlendMode) blendMode);

tilesX = size.width / (2 * self.radius);
tilesY = size.height / (2 * self.radius);

self.maskedMatrix = [[Matrix alloc] initWithMax:MySizeMake(tilesX, tilesY)];
self.tilesFilled = 0;

最重要的是要要設置代理:

_baseImage.imageMaskFilledDelegate = self;

實現代理方法:

#pragma mark ImageMaskFilledDelegate
- (void) imageMaskView:(ImageMaskView *)maskView clearPercentDidChanged:(float)clearPercent{
if (clearPercent > 50) {
    [UIView animateWithDuration:2
                     animations:^{
                         _baseImage.userInteractionEnabled = NO;
                         _baseImage.alpha = 0;
                         _baseImage.imageMaskFilledDelegate = nil;
                     }
                     completion:^(BOOL finished) {
                     }];
  }
}

效果圖:

刮開前
刮開中

GIF圖片:


刮刮樂.gif

需要源碼的,點擊這里

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,466評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,251評論 4 61
  • 0407晨讀 “極簡主義”,“斷舍離”近一兩年很流行。 第一點:清理購物車,這點相對容易,我一般不在余額寶支付寶放...
    二姑娘舍舍閱讀 135評論 0 1
  • 從14歲初戀就與他在一起,從吵吵鬧鬧到分分合合,幾乎身邊的朋友都覺得我們分了無數次,和好了無數次。已經司空見慣,到...
    抬頭遇見陽光閱讀 203評論 0 1
  • 五月, 北疆的“春”很是熱烈。 這不,我又踏著那燦爛的春光, 尋找新的方向。 寶貝兒, 你說你失了夢想。 走在了岔...
    時光妖嬈丶閱讀 293評論 0 1