溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

在iOS中實現谷歌滅霸彩蛋的完整示例

發布時間:2020-09-20 21:42:04 來源:腳本之家 閱讀:226 作者:potato04 欄目:移動開發

前言

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

在iOS中實現谷歌滅霸彩蛋的完整示例在iOS中實現谷歌滅霸彩蛋的完整示例

圖1 左為沙化動畫,右為復原動畫

響指動畫

Google的方法是利用了48幀合成的一張Sprite圖進行動畫的:

在iOS中實現谷歌滅霸彩蛋的完整示例

圖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:

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..<frameCount {
  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中指定的關鍵幀值進行變化,而不是默認情況下采用線性插值進行過渡,來個對比圖可能比較容易理解:

在iOS中實現谷歌滅霸彩蛋的完整示例在iOS中實現谷歌滅霸彩蛋的完整示例

圖3 左邊為離散模式,右邊為默認的線性模式

沙化消失

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

像素處理

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

class DustEffectView: UIView {
 private func createDustImages(image: UIImage) -> [UIImage] {
 var result = [UIImage]()
 guard let inputCGImage = image.cgImage else {
  return result
 }
 //1
 let colorSpace = CGColorSpaceCreateDeviceRGB()
 let width = inputCGImage.width
 let height = inputCGImage.height
 let bytesPerPixel = 4
 let bitsPerComponent = 8
 let bytesPerRow = bytesPerPixel * width
 let bitmapInfo = CGImageAlphaInfo.premultipliedLast.rawValue | CGBitmapInfo.byteOrder32Little.rawValue
 
 guard let context = CGContext(data: nil, width: width, height: height, bitsPerComponent: bitsPerComponent, bytesPerRow: bytesPerRow, space: colorSpace, bitmapInfo: bitmapInfo) else {
  return result
 }
 context.draw(inputCGImage, in: CGRect(x: 0, y: 0, width: width, height: height))
 guard let buffer = context.data else {
  return result
 }
 let pixelBuffer = buffer.bindMemory(to: UInt32.self, capacity: width * height)
 //2
 let imagesCount = 32
 var framePixels = Array(repeating: Array(repeating: UInt32(0), count: width * height), count: imagesCount)
 for column in 0..<width {
  for row in 0..<height {
  let offset = row * width + column
  //3
  for _ in 0...1 { 
   let factor = Double.random(in: 0..<1) + 2 * (Double(column)/Double(width))
   let index = Int(floor(Double(imagesCount) * ( factor / 3)))
   framePixels[index][offset] = pixelBuffer[offset]
  }
  }
 }
 //4
 for frame in framePixels {
  let data = UnsafeMutablePointer(mutating: frame)
  guard let context = CGContext(data: data, width: width, height: height, bitsPerComponent: bitsPerComponent, bytesPerRow: bytesPerRow, space: colorSpace, bitmapInfo: bitmapInfo) else {
  continue
  }
  result.append(UIImage(cgImage: context.makeImage()!, scale: image.scale, orientation: image.imageOrientation))
 }
 return result
 }
}

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

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

在iOS中實現谷歌滅霸彩蛋的完整示例

圖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中的元素是這么運動的:

在iOS中實現谷歌滅霸彩蛋的完整示例

圖5 CSS中transform多值動畫

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

在iOS中實現谷歌滅霸彩蛋的完整示例

圖6 將“預想”的終點作為控制點的貝塞爾曲線,看起來和CSS中的運動軌跡差不多

擴展問題

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

現在可以給視圖添加動畫了:

 let layer = CALayer()
 layer.frame = bounds
 layer.contents = image.cgImage
 self.layer.addSublayer(layer)
 let centerX = Double(layer.position.x)
 let centerY = Double(layer.position.y)
 let radian1 = Double.pi / 12 * Double.random(in: -0.5..<0.5)
 let radian2 = Double.pi / 12 * Double.random(in: -0.5..<0.5)
 let random = Double.pi * 2 * Double.random(in: -0.5..<0.5)
 let transX = 60 * cos(random)
 let transY = 30 * sin(random)
 //1: 
 // x' = x*cos(rad) - y*sin(rad)
 // y' = y*cos(rad) + x*sin(rad)
 let realTransX = transX * cos(radian1) - transY * sin(radian1)
 let realTransY = transY * cos(radian1) + transX * sin(radian1)
 let realEndPoint = CGPoint(x: centerX + realTransX, y: centerY + realTransY)
 let controlPoint = CGPoint(x: centerX + transX, y: centerY + transY)
 //2:
 let movePath = UIBezierPath()
 movePath.move(to: layer.position)
 movePath.addQuadCurve(to: realEndPoint, controlPoint: controlPoint)
 let moveAnimation = CAKeyframeAnimation(keyPath: "position")
 moveAnimation.path = movePath.cgPath
 moveAnimation.calculationMode = .paced
 //3:   
 let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
 rotateAnimation.toValue = radian1 + radian2
 let fadeOutAnimation = CABasicAnimation(keyPath: "opacity")
 fadeOutAnimation.toValue = 0.0
 let animationGroup = CAAnimationGroup()
 animationGroup.animations = [moveAnimation, rotateAnimation, fadeOutAnimation]
 animationGroup.duration = 1
 //4:
 animationGroup.beginTime = CACurrentMediaTime() + 1.35 * Double(i) / Double(imagesCount)
 animationGroup.isRemovedOnCompletion = false
 animationGroup.fillMode = .forwards
 layer.add(animationGroup, forKey: nil)

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

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

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

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

結尾

到這里,谷歌滅霸彩蛋中較復雜的技術點均已實現。如果您感興趣,完整的代碼(包含音效和復原動畫)可以通過文章開頭的鏈接進行查看,可以嘗試將沙化圖片的數量從32提高至更多,效果會越好,內存也會消耗更多 :-D。

示例代碼下載

參考資料

  • www.calayer.com/core-animat…
  • stackoverflow.com/questions/3…
  • weibo.com/1727858283/…

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女