在 iOS 中实现谷歌灭霸彩蛋

示例代码下载

最近上映的复仇者联盟4据说没有片尾彩蛋，不过谷歌帮我们做了。只要在谷歌搜索灭霸，在结果的右侧点击无限手套，你将化身为灭霸，其中一半的搜索结果会化为灰烬消失...那么这么酷的动画在iOS中可以实现吗?答案是肯定的。整个动画主要包含以下几部分：响指动画、沙化消失以及背景音效和复原动画，让我们分别来看看如何实现。

响指动画

Google的方法是利用了48帧合成的一张Sprite图进行动画的：

原始图片中48幅全部排成一行，这里为了显示效果截成2行

iOS 中通过这张图片来实现动画并不难。CALayer有一个属性contentsRect，通过它可以控制内容显示的区域，而且是Animateable的。它的类型是CGRect，默认值为(x:0.0, y:0.0, width:1.0, height:1.0)，它的单位不是常见的Point，而是单位坐标空间，所以默认值显示100%的内容区域。新建Sprite播放视图层AnimatableSpriteLayer:

class AnimatableSpriteLayer: CALayer { 
    private var animationValues = [CGFloat]() 
    convenience init(spriteSheetImage: UIImage, spriteFrameSize: CGSize ) { 
        self.init() 
        //1 
        masksToBounds = true 
        contentsGravity = CALayerContentsGravity.left 
        contents = spriteSheetImage.cgImage 
        bounds.size = spriteFrameSize 
        //2 
        let frameCount = Int(spriteSheetImage.size.width / spriteFrameSize.width) 
        for frameIndex in 0..            animationValues.append(CGFloat(frameIndex) / CGFloat(frameCount)) 
        } 
    } 
 
    func play() { 
        let spriteKeyframeAnimation = CAKeyframeAnimation(keyPath: "contentsRect.origin.x") 
        spriteKeyframeAnimation.values = animationValues 
        spriteKeyframeAnimation.duration = 2.0 
        spriteKeyframeAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear) 
        //3 
        spriteKeyframeAnimation.calculationMode = CAAnimationCalculationMode.discrete 
        add(spriteKeyframeAnimation, forKey: "spriteKeyframeAnimation") 
    } 
} 

• //1: masksToBounds = true和contentsGravity = CALayerContentsGravity.left是为了当前只显示Sprite图的第一幅画面
• //2: 根据Sprite图大小和每幅画面的大小计算出画面数量，预先计算出每幅画面的contentsRect.origin.x偏移量
• //3: 这里是关键，指定关键帧动画的calculationMode为discrete确保关键帧动画依次使用values中指定的关键帧值进行变化，而不是默认情况下采用线性插值进行过渡，来个对比图可能比较容易理解： 

沙化消失

这个效果是整个动画较难的部分，Google的实现很巧妙，它将需要沙化消失内容的html通过html2canvas渲染成canvas，然后将其转换为图片后的每一个像素点随机地分配到32块canvas中，最后对每块画布进行随机地移动和旋转即达到了沙化消失的效果。

像素处理

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!