【移動應用開發技術】在iOS中實現谷歌滅霸彩蛋的完整示例

前言最近上映的復仇者聯盟4據說沒有片尾彩蛋，不過谷歌幫我們做了。只要在谷歌搜索滅霸，在結果的右側點擊無限手套，你將化身為滅霸，其中一半的搜索結果會化為灰燼消失...那么這么酷的動畫在iOS中可以實現嗎？答案是肯定的。整個動畫主要包含以下幾部分：響指動畫、沙化消失以及背景音效和復原動畫，讓我們分別來看看如何實現。圖1左為沙化動畫，右為復原動畫響指動畫

Google的方法是利用了48幀合成的一張Sprite圖進行動畫的：圖2響指Sprite圖片原始圖片中48幅全部排成一行，這里為了顯示效果截成2行iOS中通過這張圖片來實現動畫并不難。CALayer有一個屬性contentsRect，通過它可以控制內容顯示的區域，而且是Animateable的。它的類型是CGRect，默認值為(x:0.0,y:0.0,width:1.0,height:1.0)，它的單位不是常見的Point，而是單位坐標空間，所以默認值顯示100%的內容區域。新建Sprite播放視圖層AnimatableSpriteLayer:

//1:masksToBounds=true和contentsGravity=CALayerContentsGravity.left是為了當前只顯示Sprite圖的第一幅畫面

//2:根據Sprite圖大小和每幅畫面的大小計算出畫面數量，預先計算出每幅畫面的contentsRect.origin.x偏移量

//3:這里是關鍵，指定關鍵幀動畫的calculationMode為discrete確保關鍵幀動畫依次使用values中指定的關鍵幀值進行變化，而不是默認情況下采用線性插值進行過渡，來個對比圖可能比較容易理解：圖3左邊為離散模式，右邊為默認的線性模式沙化消失

這個效果是整個動畫較難的部分，Google的實現很巧妙，它將需要沙化消失內容的html通過html2canvas渲染成canvas，然后將其轉換為圖片后的每一個像素點隨機地分配到32塊canvas中，最后對每塊畫布進行隨機地移動和旋轉即達到了沙化消失的效果。

像素處理

新建自定義視圖DustEffectView，這個視圖的作用是用來接收圖片并將其進行沙化消失。首先創建函數createDustImages，它將一張圖片的像素隨機分配到32張等待動畫的圖片上：

//1:根據指定格式創建位圖上下文，然后將輸入的圖片繪制上去之后獲取其像素數據

//2:創建像素二維數組，遍歷輸入圖片每個像素，將其隨機分配到數組32個元素之一的相同位置。隨機方法有點特別，原始圖片左邊的像素只會分配到前幾張圖片，而原始圖片右邊的像素只會分配到后幾張。圖4上部分為原始圖片，下部分為像素分配后的32張圖片依次顯示效果

//3:這里循環2次將像素分配兩次，可能Google覺得只分配一遍會造成像素比較稀疏。個人認為在移動端，只要一遍就好了。

//4:創建32張圖片并返回

添加動畫

Google的實現是給canvas中css的transform屬性設置為rotate(deg)translate(px,px)rotate(deg)，值都是隨機生成的。如果你對CSS的動畫不熟悉，那你會覺得在iOS中只要添加三個CABasicAnimation然后將它們添加到AnimationGroup就好了嘛，實際上并沒有那么簡單...因為CSS的transform中后一個變換函數是基于前一個變換后的新transform坐標系。假如某張圖片的動畫樣式是這樣的：rotate(90deg)translate(0px,100px)rotate(-90deg)直覺告訴我應該是旋轉著向下移動100px，然而在CSS中的元素是這么運動的：圖5CSS中transform多值動畫

第一個rotate和translate決定了最終的位置和運動軌跡，至于第二個rotate作用，只是疊加第一個rotate的值作為最終的旋轉弧度，這里剛好為0也就是不旋轉。那么在iOS中該如何實現相似的運動軌跡呢？可以利用UIBezierPath,CAKeyframeAnimation的屬性path可以指定這個UIBezierPath為動畫的運動軌跡。確定起點和實際終點作為貝塞爾曲線的起始點和終止點，那么如何確定控制點？好像可以將“預想”的終點（下圖中的(0,-1)）作為控制點。圖6將“預想”的終點作為控制點的貝塞爾曲線，看起來和CSS中的運動軌跡差不多

擴展問題

通過文章中描述的方式生成的貝塞爾曲線是否與CSS中的動畫軌跡完全一致呢？

擴展問題

通過文章中描述的方式生成的貝塞爾曲線是否與CSS中的動畫軌跡完全一致呢？現在可以給視圖添加動畫了：

//1:實際的偏移量旋轉了radian1弧度，這個可以通過公式x'=x*cos(rad)-y*sin(rad),y'=y*cos(rad)+x*sin(rad)算出

//2:創建UIBezierPath并關聯到CAKeyframeAnimation中

//3:兩個弧度疊加作為最終的旋轉弧度

//4:設置CAAnimationGroup的開始時間，讓每層Layer的動畫延遲開始

結尾

到