加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

在 iOS 中实现谷歌灭霸彩蛋

发布时间:2019-05-17 05:39:49 所属栏目:业界 来源:potato04
导读:示例代码下载 最近上映的复仇者联盟4据说没有片尾彩蛋,不过谷歌帮我们做了。只要在谷歌搜索灭霸,在结果的右侧点击无限手套,你将化身为灭霸,其中一半的搜索结果会化为灰烬消失...那么这么酷的动画在iOS中可以实现吗?答案是肯定的。整个动画主要包含以下

新建自定义视图 DustEffectView,这个视图的作用是用来接收图片并将其进行沙化消失。首先创建函数createDustImages,它将一张图片的像素随机分配到32张等待动画的图片上:

  1. class DustEffectView: UIView { 
  2.     private func createDustImages(image: UIImage) -> [UIImage] { 
  3.         var result = [UIImage]() 
  4.         guard let inputCGImage = image.cgImage else { 
  5.             return result 
  6.         } 
  7.         //1 
  8.         let colorSpace = CGColorSpaceCreateDeviceRGB() 
  9.         let width = inputCGImage.width 
  10.         let height = inputCGImage.height 
  11.         let bytesPerPixel = 4 
  12.         let bitsPerComponent = 8 
  13.         let bytesPerRow = bytesPerPixel * width 
  14.         let bitmapInfo = CGImageAlphaInfo.premultipliedLast.rawValue | CGBitmapInfo.byteOrder32Little.rawValue 
  15.  
  16.         guard let context = CGContext(data: nil, width: width, height: height, bitsPerComponent: bitsPerComponent, bytesPerRow: bytesPerRow, space: colorSpace, bitmapInfo: bitmapInfo) else { 
  17.             return result 
  18.         } 
  19.         context.draw(inputCGImage, in: CGRect(x: 0, y: 0, width: width, height: height)) 
  20.         guard let buffer = context.data else { 
  21.             return result 
  22.         } 
  23.         let pixelBuffer = buffer.bindMemory(to: UInt32.self, capacity: width * height) 
  24.         //2 
  25.         let imagesCount = 32 
  26.         var framePixels = Array(repeating: Array(repeating: UInt32(0), count: width * height), count: imagesCount) 
  27.         for column in 0..            for row in 0..                let offset = row * width + column 
  28.                 //3 
  29.                 for _ in 0...1 {  
  30.                     let factor = Double.random(in: 0..<1) + 2 * (Double(column)/Double(width)) 
  31.                     let index = Int(floor(Double(imagesCount) * ( factor / 3))) 
  32.                     framePixels[index][offset] = pixelBuffer[offset] 
  33.                 } 
  34.             } 
  35.         } 
  36.         //4 
  37.         for frame in framePixels { 
  38.             let data = UnsafeMutablePointer(mutating: frame) 
  39.             guard let context = CGContext(data: data, width: width, height: height, bitsPerComponent: bitsPerComponent, bytesPerRow: bytesPerRow, space: colorSpace, bitmapInfo: bitmapInfo) else { 
  40.                 continue 
  41.             } 
  42.             result.append(UIImage(cgImage: context.makeImage()!, scale: image.scale, orientation: image.imageOrientation)) 
  43.         } 
  44.         return result 
  45.     } 
  • //1: 根据指定格式创建位图上下文,然后将输入的图片绘制上去之后获取其像素数据
  • //2: 创建像素二维数组,遍历输入图片每个像素,将其随机分配到数组32个元素之一的相同位置。随机方法有点特别,原始图片左边的像素只会分配到前几张图片,而原始图片右边的像素只会分配到后几张。

在 iOS 中实现谷歌灭霸彩蛋

图4 上部分为原始图片,下部分为像素分配后的32张图片依次显示效果
  • //3: 这里循环2次将像素分配两次,可能 Google 觉得只分配一遍会造成像素比较稀疏。个人认为在移动端,只要一遍就好了。
  • //4: 创建32张图片并返回

添加动画

(编辑:核心网)

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

热点阅读