每个像样的iOS应用程序一定会有自定义元素、自定义UI以及自定义动画等等很多自定义的东西。
假如你想让你的应用脱颖而出，你必须花费一些时间为你的应用增添一些独特的元素，这些元素将会使你的应用耳目一新。
在这个教程中，你将学会如何创建一个自定义的文本框视图（text field view），当你点击这个文本框时，它的边框会有一个令人愉悦的弹性动画，效果如下图：
在学习的过程中，你讲会用到许多有趣的API：
- CAShapeLayer
- CADisplayLink
- UIView spring animations
- IBInspectable
开始吧！
首先下载启动项目ElasticUI-Starter。
这个工程是基于Single View Applicetion模板的应用，创建过程是iOS\Application\Single View Application。目前在container view里有两个文本框和一个按钮。
你的目标是当用户点击时给它们一个伸缩的弹性动画。怎么实现这个功能？
这个技术是很简单的，你将会用到四个control point views和一个CAShapeLayer对象，然后使用UIView的spring animations动画使control points做动画。当它们
在动画过程中时，你要重绘它们位置周围的形状。
注意：如果你不熟悉CAShapeLayer这个类，请参阅 这里 Scott Gardner写的一篇很棒的教程，能够迅速的帮你入门。
这个动画看起来似乎有点复杂，但不用担心，它比你想象中要容易。
创建一个基本的弹性视图
首先，你要创建一个基本的弹性视图，并且把它作为子视图嵌入到UITextfield中，然后激活这个视图并控制弹性动画。
在工程的导航器上，选中ElasticUI文件夹右击选择新建文件，然后选择iOS/Source/Cocoa Touch Class模板，然后点击下一步，命名这个类名为ElasticView，它的父
类选择UIView ，语言选择swift。单击Next,然后选择默认位置来创建存储文件相关的新类。
最重要的是，你需要创建4个控制点和一个CAShapeLayer对象。添加下面的代码,最终得到的类定义：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import UIKit class ElasticView: UIView { private let topControlPointView = UIView() private let leftControlPointView = UIView() private let bottomControlPointView = UIView() private let rightControlPointView = UIView() private let elasticShape = CAShapeLayer() override init(frame: CGRect) { super.init(frame: frame) setupComponents() } required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) setupComponents() } private func setupComponents() { } } |
这些视图和图层能够立即创建。setUpComponents()是一个配置方法，它会在所有的初始化方法中调用。现在你要设法实现它。
在setUpComponents()方法中增添如下代码：
|
1 2 3 |
elasticShape.fillColor = backgroundColor?.CGColor elasticShape.path = UIBezierPath(rect: self.bounds).CGPath layer.addSublayer(elasticShape) |
以上是配置图形图层，设置它的填充色和ElasticView的背景色一样，填充的路径的和视图的边界一样。最后把它添加到图层结构上。
接下来，在setUpComponents()方法的最后添加以下代码：
|
1 2 3 4 5 6 |
for controlPoint in [topControlPointView, leftControlPointView, bottomControlPointView, rightControlPointView] { addSubview(controlPoint) controlPoint.frame = CGRect(x: 0.0, y: 0.0, width: 5.0, height: 5.0) controlPoint.backgroundColor = UIColor.blueColor() } |
在你的视图上添加了四个控制点。为了更好地调试，我们把控制点的背景色改成了蓝色，这样容易在模拟器里看到它们。在教程的最后部分你会移除这段代码。
你需要把这些控制点分别放到上边界中心、下边界中心、左边界中心和右边界中心。这样做是为了，当你让它们离开视图的时候，你可以利用它们的位置在你的CAShapeLayer对象上绘制新的路径。
这个操作会频繁进行，因此创建一个新的函数来是实现它。在ElasticView.swift文件中中添加以下代码：
|
1 2 3 4 5 6 |
private func positionControlPoints(){ topControlPointView.center = CGPoint(x: bounds.midX, y: 0.0) leftControlPointView.center = CGPoint(x: 0.0, y: bounds.midY) bottomControlPointView.center = CGPoint(x:bounds.midX, y: bounds.maxY) rightControlPointView.center = CGPoint(x: bounds.maxX, y: bounds.midY) } |
这个函数在视图边界上将每个控制点移到正确的位置。
在setUpComponents()函数调用之后调用新的函数：
|
1 |
一些独特的元素，这些元素将会使你的应用耳目一新。
在这个教程中，你将学会如何创建一个自定义的文本框视图（text field view），当你点击这个文本框时，它的边框会有一个令人愉悦的弹性动画，效果如下图：
在学习的过程中，你讲会用到许多有趣的API：
开始吧！ 首先下载启动项目ElasticUI-Starter。 这个工程是基于Single View Applicetion模板的应用，创建过程是iOS\Application\Single View Application。目前在container view里有两个文本框和一个按钮。
你的目标是当用户点击时给它们一个伸缩的弹性动画。怎么实现这个功能？
这个技术是很简单的，你将会用到四个control point views和一个CAShapeLayer对象，然后使用UIView的spring animations动画使control points做动画。当它们 在动画过程中时，你要重绘它们位置周围的形状。 注意：如果你不熟悉CAShapeLayer这个类，请参阅 这里 Scott Gardner写的一篇很棒的教程，能够迅速的帮你入门。 这个动画看起来似乎有点复杂，但不用担心，它比你想象中要容易。 创建一个基本的弹性视图 首先，你要创建一个基本的弹性视图，并且把它作为子视图嵌入到UITextfield中，然后激活这个视图并控制弹性动画。 在工程的导航器上，选中ElasticUI文件夹右击选择新建文件，然后选择iOS/Source/Cocoa Touch Class模板，然后点击下一步，命名这个类名为ElasticView，它的父 类选择UIView ，语言选择swift。单击Next,然后选择默认位置来创建存储文件相关的新类。 最重要的是，你需要创建4个控制点和一个CAShapeLayer对象。添加下面的代码,最终得到的类定义：
这些视图和图层能够立即创建。setUpComponents()是一个配置方法，它会在所有的初始化方法中调用。现在你要设法实现它。 在setUpComponents()方法中增添如下代码：
以上是配置图形图层，设置它的填充色和ElasticView的背景色一样，填充的路径的和视图的边界一样。最后把它添加到图层结构上。 接下来，在setUpComponents()方法的最后添加以下代码：
在你的视图上添加了四个控制点。为了更好地调试，我们把控制点的背景色改成了蓝色，这样容易在模拟器里看到它们。在教程的最后部分你会移除这段代码。 你需要把这些控制点分别放到上边界中心、下边界中心、左边界中心和右边界中心。这样做是为了，当你让它们离开视图的时候，你可以利用它们的位置在你的CAShapeLayer对象上绘制新的路径。 这个操作会频繁进行，因此创建一个新的函数来是实现它。在ElasticView.swift文件中中添加以下代码：
这个函数在视图边界上将每个控制点移到正确的位置。 在setUpComponents()函数调用之后调用新的函数：
|
