产品背景

亲,像下面这种有关移动互联网迅猛发展的报告,最近见得很多吧?在座各位作为互联网行业的弄潮儿,看完是不是很有历史使命感和紧迫感呢?简直热血喷张、跃跃欲试,甚至有一种“不移动不成活”的冲动吧?!

gteffect00

其实互动活动移动化已经不再是一种未知的趋势,而是可以用数据证明的。为了让我们的用户有更完美的体验,互动活动必须延伸到移动端!

创意诞生

大部分互动活动为了吸引用户都祭出了“抽奖大礼”这个杀手锏,这种方式虽然老套,但是老而弥坚。然而,这一已经非常成熟的形式,在向移动端移植的时候,我们却遇到了实际问题:

第一是实现方式。过去Flash技术开发的大转盘、老虎机之类的东东,在移动端的兼容性简直惨不忍睹,但是换做 JS 开发,又面临时间成本太高、效率太低的窘境,无法快速应对多样且善变的定制化需求。

第二是表现方式。移动端的小屏幕,无法承担过于复杂的抽奖界面设计,用户如果连内容都看不清楚,就更别提参与的热情了。

gteffect01.jpg

那么,既要抽奖,又要兼顾移动端体验,更要兼备清晰的表现形式及创新点,我们该怎么办?

gteffect02

经过若干次头脑风暴和会议讨论,结合多次交互测试,一个 Good Idea 终于诞生了! LOOK !这就是亮闪闪的移动端互动活动抽奖刮刮卡!下面请欣赏全家福:)

gteffect03

亲,请用硬币使劲的刮屏幕,就可以刮出巨奖哦……刮坏 7 块屏幕者可以召集神龙!”这只是个玩笑!用手指涂抹就可以刮出奖啦,妈妈再也不用担心刮奖弄脏我的指甲!

gteffect04

技术实现手段

gteffect05

代码实现

(function(bodyStyle) {
    bodyStyle.mozUserSelect = 'none';
    bodyStyle.webkitUserSelect = 'none';
 
    var img = new Image();
    var canvas = document.querySelector('canvas');
    canvas.style.backgroundColor='transparent';
    canvas.style.position = 'absolute';
 
    img.addEventListener('load', function(e) {
        var ctx;
        var w = img.width,
            h = img.height;
        var offsetX = canvas.offsetLeft,
            offsetY = canvas.offsetTop;
        var mousedown = false;
 
        function layer(ctx) {
            ctx.fillStyle = 'gray';
            ctx.fillRect(0, 0, w, h);
        }
 
        function eventDown(e){
            e.preventDefault();
            mousedown=true;
        }
 
        function eventUp(e){
            e.preventDefault();
            mousedown=false;
        }
 
        function eventMove(e){
            e.preventDefault();
            if(mousedown) {
                if(e.changedTouches){
                    e=e.changedTouches[e.changedTouches.length-1];
                }
                var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                    y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                with(ctx) {
                    beginPath()
                    arc(x, y, 5, 0, Math.PI * 2);
                    fill();
                }
            }
        }
 
        canvas.width=w;
        canvas.height=h;
        canvas.style.backgroundImage='url('+img.src+')';
        ctx=canvas.getContext('2d');
        ctx.fillStyle='transparent';
        ctx.fillRect(0, 0, w, h);
        layer(ctx);
 
        ctx.globalCompositeOperation = 'destination-out';
 
        canvas.addEventListener('touchstart', eventDown);
        canvas.addEventListener('touchend', eventUp);
        canvas.addEventListener('touchmove', eventMove);
        canvas.addEventListener('mousedown', eventDown);
        canvas.addEventListener('mouseup', eventUp);
        canvas.addEventListener('mousemove', eventMove);
    });
    img.src ='';
})(document.body.style);

需要判断是否刮完时用这段代码替换原代码的eventUp事件处理函数:

e.preventDefault();
mousedown = false;
var data=ctx.getImageData(0,0,w,h).data;
for(var i=0,j=0;i< data.length;i+=4){
    if(data[i] && data[i+1] && data[i+2] && data[i+3]){
        j++;
    }
}
if(j<=w*h*0.1){
    alert('ok');
}

这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了

版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/142.html

标签: 抽奖刮刮卡

评论已关闭