4月24日，Burberry亞太地區(qū)規(guī)模最大的旗艦店在上海開幕。Burberry突破性地運用了諸多創(chuàng)新的數(shù)字營銷模式，借助與騰訊的合作，為更多未能到場的用戶創(chuàng)造了一個“平行的體驗”，也正式開啟了Burberry的創(chuàng)新數(shù)字營銷之旅。

騰訊的營銷頁面：?

其中多次用到了類似于云霧褪去的效果，如下圖。

我對這種神奇的特效產(chǎn)生的極大的興趣，于是通過chrome的審查元素里面Resources找到下面這張圖片（由于圖片是白色的png，為了讓大家看清楚我將背景調(diào)成了黑色）。

于是效果的實現(xiàn)方式就顯而易見了，是利用css3的-webkit-mask來實現(xiàn)的。

####Step1.為背景加上蒙板 ?

    <div class="stage">        <div class="sprite1"></div>    </div>

.stage{    width: 320px;    height: 480px;    position: absolute;    left: 50%;    top: 50%;    margin-top:-240px;    margin-left:-160px;    background: url('./img/bg.jpg') no-repeat;    background-size: auto 100%;}.stage .sprite1{    width: 100%;    height: 100%;    background: url('./img/bg2.jpg') no-repeat;    background-size: auto 100%;    -webkit-mask:url('./img/Touch1.png') no-repeat;    -webkit-mask-size: 100% 100%;}

這里為了在桌面瀏覽器中觀看方便，將畫面大小調(diào)整成了320*480并居中。在 sprite1中添加 background的同時也增加了蒙板。

-webkit-mask:url('./img/Touch1.png') no-repeat;-webkit-mask-size: 100% 100%;

我們這里將蒙板的大小設(shè)置為100%來觀察蒙板的效果。圖中畫圈圈的地方就是sprite1透過蒙板展示出來的部分。

我們看到這個蒙板Touch1.png應(yīng)該是一個序列幀組成的圖片，我們只需要將其一幀幀的顯示出來就可以實現(xiàn)動畫了。
點擊查看歷史代碼

Step2.序列幀動畫

.stage .sprite1{    ......    -webkit-mask-size: 400% 300%;    -webkit-mask-position: 0% 0%;}

Touch1.png 是序列幀的整合圖片，其中一排有4幀一共有3排，所以我們將 -webkit-mask-size 設(shè)為 400% 300% 。將 -webkit-mask-postion 設(shè)為 0% 0% 表示從第一幀開始。做動畫時只需要依次修改 -webkit-mask-position 的x與y值，每次將x增加25%（100/每排的幀數(shù)4）直到75%，y增加33.33%（100/每牌的幀數(shù)3）直到66.66%。我們需要將每一幀的position狀態(tài)在不同的時間賦給sprite1，這只需要用 setTimeout 就可以了。

我們新建一個spriteClip類，并傳入(dom,w,h,time)四個參數(shù)，其中dom用來定位sprite1這個元素，w為一排有幾幀，h為一共有幾行，time為每一幀之間的間隔。

function spriteClip(dom,w,h,time){    if(dom){        this.dom = dom;        this.w = w ||0;        this.h = h ||0;        this.time = time || 0;    }else{        return false;    }}

新建run方法。遍歷w與h算出時間與位置，用setTimeout設(shè)置好延時執(zhí)行

spriteClip.prototype.run = function(){    for(var w=0;w<this.w for h="0;h<this.h;h++){" var time="(h*self.time*self.w+w*self.time);" settimeout self.dom.style.webkitmaskposition="(100/(self.w-1))*w+'%">  <br>  <br>  <p></p>  <p> 新建并運行spriteClip。</p>  <p> </p>  <pre name="code" class="sycode">var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);sp1.run();

運行代碼：

點擊查看歷史代碼

Step3.添加動畫控制

有了sprite1后，再添加3個sprite，將所有的動畫按照順序播放來形成完整的轉(zhuǎn)場。為了實現(xiàn)按照順序的播放，我們需要為動畫添加播放控制。即在播放動畫完成后給dom觸發(fā)一個finish事件，dom接到完成事件后執(zhí)行下一個動畫。同時添加show和hide用來控制動畫的顯示/隱藏。

function spriteClip(dom,w,h,time){    if(dom){        ......        //記錄dom初始的display狀態(tài)        this.display = this.dom.style.display;        //記錄動畫是否播放過        this.played = false;    }else{        return false;    }}spriteClip.prototype.run = function(){    //如果動畫已經(jīng)播放過則不做任何動畫    if(this.played)        return false;    //標(biāo)記為已播放完成    this.played = true;    //讓dom顯示    this.show();    for(var w=0;w<this.w for h="0;h<this.h;h++){" var time="(h*self.time*self.w+w*self.time);" settimeout ...... if>= self.w-1 && h>=self.h-1){                        //動畫結(jié)束                        var event = document.createEvent('HTMLEvents');                        event.initEvent('finish', true, true);                        event.eventType = 'message';                        event.content =  'finish';                        //觸發(fā)finish事件                        self.dom.dispatchEvent(event);                    }                },time);            })(w,h,this);        }    }}//隱藏domspriteClip.prototype.hide = function(){    this.dom.style.display = 'none';}//顯示domspriteClip.prototype.show = function(){    this.dom.style.display = this.display;}//接收finish時間并用callback函數(shù)處理spriteClip.prototype.finish = function(callback){    this.dom.addEventListener('finish',callback);}var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);//在做動畫之前讓sprite隱藏sp1.hide();document.addEventListener('touchend',function(){    //手指抬起后運行動畫    sp1.run();});document.addEventListener('click',function(){    //點擊后運行動畫    sp1.run();});sp1.finish(function(){    //動畫完成    console.log('finish');});</this.w>

下面添加剩下的3個sprite。

.......stage .sprite2{    width: 100%;    height: 100%;    position: absolute;    left: 0px;    top: 0px;    background: url('./img/bg2.jpg') no-repeat;    background-size: auto 100%;    -webkit-mask:url('./img/Touch2.png') no-repeat;    -webkit-mask-size: 400% 300%;    -webkit-mask-position: 0% 0%;}.stage .sprite3{    width: 100%;    height: 100%;    position: absolute;    left: 0px;    top: 0px;    background: url('./img/bg2.jpg') no-repeat;    background-size: auto 100%;    -webkit-mask:url('./img/Touch3.png') no-repeat;    -webkit-mask-size: 400% 300%;    -webkit-mask-position: 0% 0%;}.stage .sprite4{    width: 100%;    height: 100%;    position: absolute;    left: 0px;    top: 0px;    background: url('./img/bg2.jpg') no-repeat;    background-size: auto 100%;    -webkit-mask:url('./img/Touch4.png') no-repeat;    /* Touch4是4*5 */    -webkit-mask-size: 400% 500%;    -webkit-mask-position: 0% 0%;}......<div class="stage">    <div class="sprite1"></div>    <div class="sprite2"></div>    <div class="sprite3"></div>    <div class="sprite4"></div>
</div>.....//新建4個spritevar sprite1 = document.querySelector('.sprite1');var sprite2 = document.querySelector('.sprite2');var sprite3 = document.querySelector('.sprite3');var sprite4 = document.querySelector('.sprite4');var sp1 = new spriteClip(sprite1,4,3,80);var sp2 = new spriteClip(sprite2,4,3,80);var sp3 = new spriteClip(sprite3,4,3,80);var sp4 = new spriteClip(sprite4,4,5,80);sp1.hide();sp2.hide();sp3.hide();sp4.hide();document.addEventListener('touchend',function(){    sp1.run();});document.addEventListener('click',function(){    sp1.run();});sp1.finish(function(){    //sprite1結(jié)束后運行sprite2    sp2.run();});sp2.finish(function(){    //sprite2結(jié)束后運行sprite3    sp3.run();});sp3.finish(function(){    //sprite3結(jié)束后運行sprite4    sp4.run();})......

運行代碼：

查看所有代碼請去Github

如有問題或者建議請微博@UED天機(jī)。我會及時回復(fù)，也可以提供其他特效一起討論其實現(xiàn)方法。