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

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

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


注意类属性添加@IBInspectable
FaceView多了Scale和Mouth Curvature属性


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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,270评论 5 13
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,696评论 6 30
  • 前言 本文只要描述了iOS中的Core Animation(核心动画:隐式动画、显示动画)、贝塞尔曲线、UIVie...
    GitHubPorter阅读 3,742评论 7 11
  • 1.自定义控件 a.继承某个控件 b.重写initWithFrame方法可以设置一些它的属性 c.在layouts...
    圍繞的城阅读 3,704评论 2 4
  • 143 七夕情人节是我们中国的传统情人节。大家都有不同的祝福,有心之人还是很在意的,无心之人什么都不会意。 我们今...
    馨之芬芳阅读 342评论 3 2

友情链接更多精彩内容