導言

在這篇文章中，我們將探索如何設計一個充滿活力的 QRCode 產生器。這不僅僅是一個普通的 QRCode，還能在圖中心展示我們的 logo，同時黑色方塊會隨著動畫效果舞動。在保證 QRCode 在鏡頭下能夠成功辨識的情況下，我們會增添視覺上的趣味與動感。

學習目標

• QRCode 生成：使用 CoreImage 的 CIFilter 生成 QRCode 圖片，並設定適當的容錯等級。
• Logo 整合：學習如何在 QRCode 中心加入 logo，讓 QRCode 不僅具功能性，也增添品牌辨識度。
• 動畫效果：透過 UIView 的動畫 API，為 QRCode 中的黑色方塊添加透明度變化的動畫效果，使其更加動感活潑。

App 操作示意

App 截圖

主要程式步驟

1. 生成 QRCode

生成 QRCode 比想像中要簡單，CoreImage 提供了 CIFilter，使我們可以輕鬆完成 QRCode 的生成。透過 CIQRCodeGenerator 濾鏡，我們能快速生成帶有容錯能力的 QRCode。

func generateQRCode(from string: String) -> UIImage? {
    let data = string.data(using: String.Encoding.ascii)
    
    if let filter = CIFilter(name: "CIQRCodeGenerator") {
        filter.setValue(data, forKey: "inputMessage")
        filter.setValue("H", forKey: "inputCorrectionLevel") // 設定容錯等級
        
        if let qrCodeImage = filter.outputImage {
            let transform = CGAffineTransform(scaleX: 10, y: 10) // 放大 QR code 圖片
            let scaledQRCode = qrCodeImage.transformed(by: transform)
            return UIImage(ciImage: scaledQRCode)
        }
    }
    return nil
}

這段程式碼將輸入的字串轉換為 ASCII 編碼的資料，並使用 CIFilter 生成 QRCode。接著，我們將圖片放大，讓 QRCode 更加清晰地顯示在螢幕上。

2. 在 QRCode 中心加入 Logo

接下來，我們要將 logo 圖片嵌入到 QRCode 的中心，增加品牌識別度。

func addLogo(to qrCodeImageView: UIImageView, logo: UIImage) -> UIImageView {
    let logoSize = qrCodeImageView.frame.size.width * 0.2 // Logo 大小為 QR code 寬度的 20%
    let logoImageView = UIImageView(image: logo)
    logoImageView.frame.size = CGSize(width: logoSize, height: logoSize)
    logoImageView.center = qrCodeImageView.center
    logoImageView.layer.cornerRadius = 10
    logoImageView.clipsToBounds = true
    return logoImageView
}

這段程式碼將 logo 放置在 QRCode 中心，並設置圓角來增強美感。Logo 的大小設置為 QRCode 寬度的 20%，既不影響 QRCode 的掃描功能，也提升了視覺效果。

3. 動態效果實作

為了讓 QRCode 更加動感，我們會將 QRCode 圖片的像素轉換為可操作的單位，並為每一個黑色模組設置動畫，讓它們隨著時間進行透明度變化，從而創造出閃爍的效果。

像素轉換

首先，我們使用 Core Image 的 CIFilter 來生成 QRCode 圖片，接著將這張圖片轉換為像素數據，這樣我們就可以進一步對每個像素進行操作。為了實現這個目標，我們將使用一個專門的圖像上下文 (CIContext) 來處理圖片數據，並將 QRCode 的每個像素轉換為一個可操作的數字矩陣。

我們會將圖像的每個像素提取出來，並根據其顏色值進行判斷：黑色像素代表 QRCode 中的有效數據，而白色像素則是背景部分。接下來，我們可以針對這些黑色像素應用不同的動畫效果，例如讓它們的透明度或大小隨時間變化，以達到動感十足的視覺效果。

這個步驟的關鍵在於將圖片中的每一個像素轉換成可讀取的數據，讓我我們可以在每個像素上進行細部的操作，使 QRCode 不僅是靜態的圖像，還可以展示出豐富的動態效果。

設置動畫

最後，我們可以對每個黑色像素設置透明度變化的動畫，通過 UIView 的動畫方法來實現動態效果。

UIView.animate(withDuration: 0.5, delay: 0, options: [.repeat, .autoreverse], animations: {
    blackSquare.alpha = 0.5
}, completion: nil)

總結

在這篇文章中，我們展示了如何使用 CoreImage 和 CIFilter 生成動感的 QRCode，並結合 UIView 的動畫效果，使 QRCode 不僅具有實用性，還充滿活力。這樣的 QRCode 設計不僅提升了視覺吸引力，還能有效結合品牌元素。我們探討了如何將 logo 融入 QRCode 中，以及如何透過動畫讓黑色模組變得更加有趣。同時，我們也保持了 QRCode 的基本功能性，確保其在掃描時仍然能被準確識別。

透過這篇實作，相信你可以將 QRCode 結合更多創意，並應用在不同的專案中。未來，你還可以嘗試進一步自定義 QRCode 的樣式，甚至加入更多動態元素，讓它更加符合你的設計理念！