跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码)

跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码)_第1张图片

Swift很屌,开发自定义View可以说so easy。

大部分iOS初学者都会看斯坦福白胡子老头的视频, 讲的确实挺好的。 在最新的iOS9第4课讲了自定义UIView, 根据视频写个Demo,并使用定时器实现一个简单的动画。

自定义View动画的实现思路: 使用定时器或子线程每隔一段时间刷新一次界面, 界面重绘时要使用不同的参数, 实现视觉上的动画效果, 其实就是帧动画。

先介绍一下定时器, 在iOS10版本里使用Timer类实现定时器的功能。 基本用法是

timer = Timer.scheduledTimer(withTimeInterval: 0.01, repeats: true, block: { (param) in  /*注意param是Timer类型的参数, 等于当前Timer类实例的引用*/

self.count += 1  //自增1

let tmp: Double = Double(self.count) / 100.0  //画嘴的角度

print("current mouthCur: \(tmp)")

self.faceView.mouthCurvature = tmp

self.faceView.setNeedsDisplay()  //UIView的方法, 即需要刷新view

//self.faceView.setNeedsLayout()

//self.faceView.layoutIfNeeded()

if self.count == 100 {

param.invalidate()  //停止定时器

}

print("counter current: \(self.count)")

})

在Android里自定义View会重写onDraw函数, 相当于iOS UIView的的drawRect函数。 注意: drawRect不能直接被调用, 跟Android里不能指教调用onDraw方法一样。 在自定义UIView时, Xcode的注释里已经说明了drawRect函数的作用。

iOS的UIBezierPath类似于Android Canvas的drawLine/drawRect, 使用UIBezierPath可以绘制线条和图形。 老头在例子里也是使用UIBezierPath类绘制笑脸的。  iOS没有画布的概念, 设置颜色时直接使用UIColor类, 不像Android那样使用Canvas的引用。

UIView绘制界面的方法:

override func draw(_ rect: CGRect) {

print("function draw is called")

// Drawing code

UIColor.blue.set()

pathForCircleCenterAtPoint(midPoint: skullCenter, withRadius: skullRadius)  //画圆圈

UIColor.black.set()  //切换颜色, 显示黑色眼睛

pathforEye(eye: .Left)  //画左眼

pathforEye(eye: .Right)  //画右眼

UIColor.red.set()

pathForMouth()

}

自定义UIView在预览时默认是空白的, 但Swift提供个关键字支持预览自定义View。 仅仅需要再自定义UIView的上面加一行代码@IBDesignable

跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码)_第2张图片
跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码)_第3张图片

最上面的gif动画是通过定时器修改mouthCurature参数改变嘴的形状,Swift还支持使用@IBInspectable将自定义UIView的参数作为属性, 在storyboard里预览。 示例:


跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码)_第4张图片
注意类属性添加@IBInspectable
跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码)_第5张图片
FaceView多了Scale和Mouth Curvature属性


原文:http://blog.csdn.net/brycegao321/article/details/53817222

代码下载地址: http://download.csdn.net/detail/brycegao321/9719939

你可能感兴趣的:(跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码))