[swift]读取svg图片为UIBezierPath,开心做动画

更新

给对本文感兴趣的朋友们推荐个好东西:paintcode

动画预览

先扯淡

最近手痒又想整点动画玩玩,但是想了几个主意发现稍微复杂一点的手写都一定会累爆。这篇文章记录一下今天折腾的一个方案。说来简单,就是用矢量设计工具舒舒服服的做好设计,然后输出成 svg 格式,再用 NSXMLParser 去读出来,转换成 UIBezierPath ,然后就天高任鸟飞~

清晰起见,这里不使用各种库,由上面的二维码动画为例,只转换最简单的矩形。需要更多高能操作的,出门右转 SVGKit

开工

筹备材料先,首先找个能提供 svg 格式下载的二维码生成网站,比如 这个 。拿到 svg 文件后用文本编辑器打开可以看到其实是一个描述矢量图形的 xml ,而且里面几百个矩形。。。如果你用的生成网站跟我一样,还会有一个白色的背景矩形,待会儿我们会把它排除掉。

准备工作就到这了,接下来我们会用 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:) parserDidEndDocument(_:)` 两个方法用于处理解析结果:

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了。。。心塞。。。

继续加特技

手贱没忍住。。。二维码真是玩不坏。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

字符画生成01

1281
来自专栏一“技”之长

iOS文本布局探讨之二——关于TextKit框架中的字体描述

        UIFont是iOS开发中处理文本字体的类,关于UIFont的相关内容,以前的一篇博客有详细介绍,本片博客主要介绍关于动态字体的应用与字体描述类...

1232
来自专栏游戏杂谈

INVALID_STATE_ERR: DOM Exception 11

在使用jQuery的ajax且网络很慢、设置了timeout的情况下,直接不判断ajax的readyState而直接取responseText将出会错(此时xh...

1142
来自专栏冰霜之地

Weex 事件传递的那些事儿

在前两篇文章里面分别谈了Weex如何在Native端初始化的和Weex是如何高效的渲染Native的原生UI的。Native这边还缺一块,那就是Native产生...

2154
来自专栏滕先生的博客

地图相关 MapKit框架介绍MKMapView控件对象的属性和方法MKAnnotation 大头针模型类大头针view显示类:MKPinAnnotationView 继承于 MKAnnotation

3327
来自专栏iOSer成长记录

MJRefresh 源码阅读

2552
来自专栏一“技”之长

iOS中UITextView方法解读 原

@property(nonatomic,assign) id<UITextViewDelegate> delegate;

944
来自专栏青玉伏案

iOS开发之多表视图滑动切换示例(仿"头条"客户端)

  好长时间没为大家带来iOS开发干货的东西了,今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例。在Demo中对所需的组件进行的简单封装,在封装的组件...

2906
来自专栏游戏杂谈

as3与php 上传多张图片demo

2、在一次添加的图片中如果超出最大上传数,忽略本次选中的所有图片(又得重新选一次,此现象普通存在于目前各大网站的flash批量上传中)

1812
来自专栏一个小程序员的成长笔记

HTML5标签学习笔记

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="content-type" cont...

3336

扫码关注云+社区

领取腾讯云代金券