https://segmentfault.com/a/1190000002580541

更新

給對本文感興趣的朋友們推薦個好東西：paintcode

動畫預覽

先扯淡

最近手癢又想整點動畫玩玩，但是想了幾個主意發現稍微複雜一點的手寫都一定會累爆。這篇文章記錄一下今天折騰的一個方案。說來簡單，就是用向量設計工具舒舒服服的做好設計，然後輸出成 svg 格式，再用 NSXMLParser 去讀出來，轉換成 UIBezierPath ，然後就天高任鳥飛～

清晰起見，這裡不使用各種庫，由上面的二維碼動畫為例，只轉換最簡單的矩形。需要更多高能操作的，出門右轉 SVGKit。

開工

籌備材料先，首先找個能提供 svg

準備工作就到這了，接下來我們會用 NSXMLParser 來解析這個二維碼。

新建一個 Single View Application ，把二維碼拖進專案裡去，在 ViewController 裡新增一個 UIView 作為二維碼的容器：

class ViewController: UIViewController {

    let qrView = UIView
 
()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        qrView.center = view.center
        view.addSubview(qrView)
    }
    
    ...
}

初始化一個 NSXMLParser 去解析 svg ，同時讓 ViewController 實現 NSXMLParserDelegate 的 `
parser(_:didStartElement:namespaceURI:qualifiedName:attributes:) 和 

class ViewController: UIViewController, NSXMLParserDelegate {
    
    ...
    
    override func viewDidLoad() {
        ...
        
        let qrPath = NSBundle.mainBundle().pathForResource("zcfan_qrcode", ofType: "svg")!
        let qrData = NSData(contentsOfFile: qrPath)
        let xmlParser = NSXMLParser(data: qrData)
        xmlParser.delegate = self
        xmlParser.parse()
    }
    
    func parser(parser: NSXMLParser!, didStartElement elementName: String!, namespaceURI: String!, qualifiedName qName: String!, attributes attributeDict: [NSObject : AnyObject]!) {
        // 每當解析到一個新標籤，這裡就會被呼叫
    }
    
    func parserDidEndDocument(parser: NSXMLParser!) {
        // 整個 svg 檔案解析完畢後，這裡就會被呼叫
    }
    
    ...
}

接下來我們會在 parser(_:didStartElement:namespaceURI:qualifiedName:attributes:) 中把遇到的每一個形如：

<rect ... x="0" y="0" width="12" height="12" fill="black"/>

的標籤轉換成 CGRect 儲存在陣列中，並在 parserDidEndDocument(_:) 中把他們轉換為 CAShapeLayer 並新增動畫。

先來看看 parser(_:didStartElement:namespaceURI:qualifiedName:attributes:) 的內容：

...

var rects = [CGRect]()  // 用於儲存二維碼

func parser(parser: NSXMLParser!, didStartElement elementName: String!, namespaceURI: String!, qualifiedName qName: String!, attributes attributeDict: [NSObject : AnyObject]!) {

    // 只轉換 “黑色” 的二維碼 “方塊”
    if elementName == "rect" && (attributeDict["fill"] as String) == "black" {
        let x = (attributeDict["x"] as NSString).doubleValue
        let y = (attributeDict["y"] as NSString).doubleValue
        let w = (attributeDict["width"] as NSString).doubleValue
        let h = (attributeDict["height"] as NSString).doubleValue
        
        let rect = CGRect(x: x, y: y, width: w, height: h)
        rects.append(rect)
        
    // 設定 qrView 的尺寸為 svg 影象的大小
    } else if elementName == "svg" {
        let w = (attributeDict["width"] as NSString).doubleValue
        let h = (attributeDict["height"] as NSString).doubleValue
        
        qrView.bounds = CGRect(x: 0, y: 0, width: w, height: h)
    }
}

...

接下來是 parserDidEndDocument(_:) ，在這裡我們要把二維碼顯示出來：

...

func parserDidEndDocument(parser: NSXMLParser!) {
    for r in rects {
        let rectLayer = CAShapeLayer()
        
        rectLayer.fillColor = UIColor.darkGrayColor().CGColor
        rectLayer.strokeColor = nil
        rectLayer.path = UIBezierPath(rect: CGRect(origin: CGPointZero, size: r.size)).CGPath  // #1
        rectLayer.frame = r  // #2
        
        qrView.layer.addSublayer(rectLayer)
    }
}

...

#1、#2 ：看著有點暈？程式碼不直觀的話不妨稍微把玩一下，原因很簡單，但要用語言解釋我的舌頭可能會打結。。。

至此，執行專案應該就能在螢幕上看到一個大二維碼了！

加特技！ Duang～

回到上面的 parserDidEndDocument(_:) 方法，然後把它改到面目全非！Duang~

func parserDidEndDocument(parser: NSXMLParser!) {
    
    qrView.layer.shadowColor = UIColor.grayColor().CGColor
    qrView.layer.shadowRadius = 4
    qrView.layer.shadowOpacity = 1
    qrView.layer.shadowOffset = CGSizeZero
    
    for r in rects {
        let rectLayer = CAShapeLayer()
        
        rectLayer.fillColor = UIColor.darkGrayColor().CGColor
        rectLayer.strokeColor = nil
        rectLayer.path = UIBezierPath(rect: CGRect(origin: CGPointZero, size: r.size)).CGPath
        rectLayer.frame = r
        
        var startTransform = CATransform3DIdentity
        startTransform.m34 = 1.0 / -20  // 透視
        startTransform = CATransform3DRotate(startTransform, CGFloat(M_PI)*0.5, 0, 1, 0)  // 沿 y 軸旋轉 π/2 圈，待會再動畫轉回來
        
        // transform 動畫
        let transAnim = CABasicAnimation(keyPath: "transform")
        transAnim.duration = drand48() * 4  // 隨機一個持續時間
        transAnim.fromValue = NSValue(CATransform3D: startTransform)
        transAnim.toValue = NSValue(CATransform3D: CATransform3DIdentity)
        rectLayer.addAnimation(transAnim, forKey: "transAnim")
        
        // 透明度動畫
        let alphaAnim = CABasicAnimation(keyPath: "opacity")
        alphaAnim.duration = transAnim.duration
        alphaAnim.fromValue = 0
        alphaAnim.toValue = 1
        rectLayer.addAnimation(alphaAnim, forKey: "alphaAnim")
        
        qrView.layer.addSublayer(rectLayer)
    }
}

完工

沒眼看，不錄gif了。。。心塞。。。

繼續加特技

手賤沒忍住。。。二維碼真是玩不壞。。。