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

                                                                 

         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里预览。 示例：

                                           

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

 

背景知识：

       重写drawRect函数时要弄明白坐标， UIView分为frame和bounds变量。 frame是相对于父UIView的位置，bounds是在相对于自己的位置。 

                               

     上图就是二者的区别， 类似于Android的layout_margin和padding。