刮奖效果

刮奖效果

 

效果

 

说明

刮奖效果使用了开源的 Scatch & See 控件.

 

源码

https://github.com/YouXianMing/Animations

https://github.com/moqod/iOS-Scratch-n-See

//
//  ScratchImageViewController.m
//  Animations
//
//  Created by YouXianMing on 15/12/22.
//  Copyright  2015年 YouXianMing. All rights reserved.
//

#import "ScratchImageViewController.h"
#import "MDScratchImageView.h"
#import "UIView+SetRect.h"
#import "UIImage+ImageEffects.h"

@interface ScratchImageViewController ()

@end

@implementation ScratchImageViewController

- (void)setup {

    [super setup];

    self.titleView.backgroundColor       = [UIColor whiteColor];
    self.contentView.layer.masksToBounds = YES;

    UIImage *image = [UIImage imageNamed:@"1"];

    // 背景图片
    UIImageView *blurImageView = [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, image.size}];
    blurImageView.image        = image;
    blurImageView.center       = self.contentView.middlePoint;
    [self.contentView addSubview:blurImageView];

    // 被刮的图片
    MDScratchImageView *scratchImageView = [[MDScratchImageView alloc] initWithFrame:blurImageView.frame];
    [scratchImageView setImage:[image blurImage] radius:20.f];
    [self.contentView addSubview:scratchImageView];
}

@end

细节

 

时间: 2024-10-26 01:11:45

刮奖效果的相关文章

使用MDScratchImageView实现刮奖效果

使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // // RootViewController.m // Scratch // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "MDScratchI

HTML5实现刮奖效果

原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out.意思就是:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明.这样可能不好理解,后面实现的时候会解释.有了globalCompositeOperation这个属性,实现过程就很简单了. 我们需要有两个

轻松实现功能强大的Android刮奖效果控件(ScratchView)_Android

前言 我身边有一部分开发的小伙伴,存在着这样一种习惯.某一天,突然看到某一款 App 上有个很漂亮的自定义控件(动画)效果,就会绞尽脑子想办法去自己实现一发.当然,我自己也是属于这类型的骚年,看到某种效果就会手痒难耐琢磨着实现套路.个人觉得这是一种需求驱动进步的方法,当你绞尽脑子去实现自己想要的效果时,你就会发现你对 Android 自定义控件(动画)的知识体系认识越深,久而久之,自己也能轻松的造出各种控件(动画)效果.要是哪天,产品童鞋拿着个原型(或者对着某款 App )跟你讲:"XXXX,你

分享Android仿刮奖效果控件_Android

本文实例为大家分享了Android刮刮卡效果控件,供大家参考,具体内容如下 刮刮卡类: package com.reyo.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Paint; import android.gr

仿刮刮乐刮奖效果

该功能实现很简单,就是根据手指坐标位置在画板上画 1.效果图            2.代码实现 [java] view plaincopy public class ErinieShow extends RelativeLayout {       Context context;       RelativeLayout bg;       MyView MyView;       int level;       public ErinieShow(Context context, int

HTML5 canvas标签实现刮刮卡效果

             HTML5 canvas标签实现刮刮卡效果           你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 源码下载:           我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到

使用HTML5实现刮刮卡效果

原文 使用HTML5实现刮刮卡效果 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果.                                     查看演示 下载源码                       我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形

利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧

先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

手机端canvas刮奖无效果,PC端好好的

问题描述 手机端canvas刮奖无效果,PC端好好的 window.onload=function () { var canvas = document.getElementById("birthday"); var width = window.screen.availWidth; canvas.width = window.screen.availWidth; canvas.height = width*2; canvas.style.border = "1px soli