原文:How To Create an Elastic Animation with Swift
作者:Daniel Tavares
译者:kmyhy
每个优雅的 iOS app 都会有一些定制的元素,定制的 UI、定制动画等等。定制、定制、定制,重要的事情重复三遍。
如果你想让自己的 app 与众不同,你肯定在某些独一无二的特性上花了大量的时间,正是这些特性让你的 app 闪闪发光。
在本文中,你将创建一个定制的 text fIEld,当你点击它的时候,它会呈现一个吸引人的d性动画效果。
你将使用到许多好玩的 API 包括:
CAShapeLayer CAdisplaylink UIVIEw d簧动画 IBInspectable 开始请在这里下载开始项目。
这个项目使用了 Single VIEw Application iOS\Application\Single VIEw Application 模板。在容器视图中包含了两个 text fIEld 和一个按钮。
你的最终目标是让它们获得焦点时播放一个d性动画。你觉得要怎么做?
技术上是简单的;你将使用 4 个控制点 vIEw 和一个 CAShapeLayer,并通过 UIVIEw d簧动画的方式来驱动 4 个 控制点 vIEw。当它们被驱动的同时,你将重绘它们四周的形状。
注意:如果你不了解 CAShapeLayer 类,Scott Gardner 写了一个精彩的教程,你可以马上去看一下。
听起来有点复杂。不过别担心,实际上比你想象要容易。
创建基本的 Elastic VIEw首先创建基础的 elastic vIEw。你会用它作为 text fIEld 的 subvIEw,你通过驱动这个 vIEw 来控制控件的d动。
右键点击项目导航窗口中 ElasticUI 文件组,选择 New file…,然后是 iOS/Source/Cocoa touch Class 模板。点击 Next。
将类命名为 ElasticVIEw,Subclass 设置为 UIVIEw,Language 选 Swift。点击 Next,然后选择文件存放位置。
首先,需要创建 4 个 vIEw 和一个 CAShapeLayer。在类定义中加入代码:
import UIKitclass 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() 方法是一个 setup 方法,在所有初始化方法中调用。接下来我们来实现它。
在 setupComponents()方法中:
elasticShape.fillcolor = backgroundcolor?.CGcolorelasticShape.path = UIBezIErPath(rect: self.bounds).CGPathlayer.addSublayer(elasticShape)
这些代码用于设置 CAShapeLayer,设置它的填充色为 ElasticVIEw 的背景色,将路径设置为视图的 bould。最后将 CALayer 添加为 sublayer。
然后,继续在 setupComponents() 中添加:
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()}这里将所有的 控制点 添加到 vIEw。为了便于调试,控制点 的背景色我们设置为蓝色,这样我们就能够在模拟器中直观地看到它们。调试完后你可以去掉这个颜色。你需要将 top 控制点 分别放置到顶部居中位置、底部居中位置、左边居中位置和右侧居中位置。当你让它们从 vIEw 向外移动时,你可以利用这些位置让 CAShapeLayer 绘制新的路径。因为这些代码要反复用到,因此可以放到一个函数中。在 ElasticVIEw.swift 中新增方法:```swiftprivate 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)}<div class="se-prevIEw-section-delimiter"></div>
利用这个函数将 4 个 控制点 移动到合适的位置。
然后在 setupComponents 方法中调用它:
positionControlPoints()<div class="se-prevIEw-section-delimiter"></div>
在你开始动画之前,你需要用到一个新 UIVIEw,通过它来观察 ElasticVIEw 的行为。也就是说,你要在故事板中拖入一个新的 UIVIEw。
打开 Main.storyboard,拖一个新的 UIVIEw 到 vIEw controller 的 vIEw 中,将它的 Custom Class 设为 ElasticVIEw。不要管它的位置,只要它是在屏幕上显示,你就能看到接下来会发生什么。
编译运行项目。
看到 4 个蓝色的小方块了吗——这就是我们在 setupComponents 中创建的 4 个控制点。
现在,为了达到d性动画效果,你将使用它们在 CAShapeLayer 上绘制路径。
绘制贝塞尔曲线在继续后面的步骤之前,需要了解如何绘制 2D 图形——实际上是绘制线段,尤其是直线和曲线。在绘制任何形状之前,如果是直线,你需要制定开始和结束位置,如果是复杂的图形,你需要制定多个位置。
点就是 CGPoint,代表了当前坐标系中的一个 x 和 y 坐标。
当你想绘制矢量图比如方块、多边形以及复杂曲线时,情况会稍微复杂一些。
要模拟d性效果,你应当绘制一个二次贝塞尔曲线,看起来是一个矩形,但在矩形的 4 边都会有一个控制点,每边用一条曲线来制作d性效果。
贝塞尔曲线因 PIErre BezIEr 而得名,他是一位法国工程师,他在 CAD/CAM 系统中提出了如何描述一条曲线。让我们看一下这个二次贝塞尔曲线是什么样子:
蓝色的点代表了控制点,即你事先创建的 4 个 vIEw,而红色的点是矩形的 4 个角。
注意:苹果文档中有 UIBezIErPath 的类参考手册。如果你想知道如何创建路径,请阅读这个文档。
让我们看看实际应该怎么做。在 ElasticVIEw.swift 中新增一个方法:
private func bezIErPathForControlPoints()->CGPathref { // 1 let path = UIBezIErPath() // 2 let top = topControlPointVIEw.layer.presentationLayer().position let left = leftControlPointVIEw.layer.presentationLayer().position let bottom = bottomControlPointVIEw.layer.presentationLayer().position let right = rightControlPointVIEw.layer.presentationLayer().position let wIDth = frame.size.wIDth let height = frame.size.height // 3 path.movetoPoint(CGPointMake(0,0)) path.addQuadCurvetoPoint(CGPointMake(wIDth,0),controlPoint: top) path.addQuadCurvetoPoint(CGPointMake(wIDth,height),controlPoint:right) path.addQuadCurvetoPoint(CGPointMake(0,controlPoint:bottom) path.addQuadCurvetoPoint(CGPointMake(0,controlPoint: left) // 4 return path.CGPath}<div class="se-prevIEw-section-delimiter"></div>
上述代码分可以为 4 个部分:
创建一个 UIBezIErPath 对象,用于表示要绘制的曲线。 用 4 个常量表示 4 个控制点的坐标。我们使用 presentationLayer 的原因是想拿到 vIEw 在动画过程中的“实时的”坐标。 绘制路径,依次从矩形的 4 个角开始绘制 4 条曲线,曲线的控制点就是 4 个控制点。 以 CGPathref 形式返回路径,对于一个形状图层来说,它需要提供一个 CGPathref。在对 4 个控制点进行动画时,你会调用这个方法,并绘制新的形状。怎么做?
一个 CAdisplaylink 对象是一个定时器,允许你的 app 将某些动作和显示刷新率同步。你可以加一个 target 和 action 给它,当屏幕刷新时,action 会被调用。
这是你重绘路径、刷新形状图层的绝佳机会。
首先,新增一个方法,用于屏幕刷新时调用:
func updateLoop() { elasticShape.path = bezIErPathForControlPoints()}<div class="se-prevIEw-section-delimiter"></div>
然后,在 ElasticVIEw.swift 中创建一个 display link 变量:
private lazy var displaylink : CAdisplaylink = { let displaylink = CAdisplaylink(target: self,selector: Selector("updateLoop")) displaylink.addToRunLoop(NSRunLoop.currentRunLoop(),forMode: NSRunLoopCommonModes) return displaylink}()<div class="se-prevIEw-section-delimiter"></div>
这是一个懒加载变量,也就是说,如果没有人访问它,它不会初始化。每当屏幕刷新时,它会调用 updateLoop() 方法。
你还要两个方法以启动和停止 display link:
private func startUpdateLoop() { displaylink.paused = false}private func stopUpdateLoop() { displaylink.paused = true}<div class="se-prevIEw-section-delimiter"></div>
这样,当控制点发生变化时,你就可以绘制新的路径了。现在就让我们来移动它们!
UIVIEw Spring 动画苹果每次 iOS 版本发布时,总是会加入一些新特性,spring 动画正是其中之一,它使我们在增加 app 的卖点时更加容易。
它允许你在驱动某些元素动画时,可以指定阻尼系数和速度,使动画更加个性化和具有d性!
注意:如果你想深入了解动画,请参考 iOS Animations by Tutorials。
在 ElasticVIEw.swift 中用这个方法来驱动控制点:
func animateControlPoints() { //1 let overshootAmount : CGfloat = 10.0 // 2 UIVIEw.animateWithDuration(0.25,delay: 0.0,usingSpringWithdamPing: 0.9,initialSpringVeLocity: 1.5,options: nil,animations: { // 3 self.topControlPointVIEw.center.y -= overshootAmount self.leftControlPointVIEw.center.x -= overshootAmount self.bottomControlPointVIEw.center.y += overshootAmount self.rightControlPointVIEw.center.x += overshootAmount },completion: { _ in // 4 UIVIEw.animateWithDuration(0.45,usingSpringWithdamPing: 0.15,initialSpringVeLocity: 5.5,animations: { // 5 self.positionControlPoints() },completion: { _ in // 6 self.stopUpdateLoop() }) })}<div class="se-prevIEw-section-delimiter"></div>
让我们逐一进行解释:
overshootAmount 是控制点可能移动的距离。 将动画包装成 spring 动画,时长为 1/4 秒,如果你不熟悉 spring 动画但物理学得好,请阅读 UIVIEw 类参考手册,它对 damPing(阻尼系数) 和 veLocity(速度)变量做了详尽的解说。因为我们都不是火箭科学家,所以只需要知道这些变量能够控制动画的d性就行了。你可以调整这些数字,以找出一个最佳值。 向上、左、下、右移动这些控制点——这回触发动画。 创建另一个 spring 动画用于将所有东东反d回来。 将控制点的位置恢复原样——这也会触发动画。 当所有东西静止后,停止 display link。当然,你还没有调用 animateControlPoints 方法。因为你的目的是在点到控件时触发动画,因此最好是在 touchedBegan 方法中调用这个方法。
新增如下方法:
overrIDe func touchesBegan(touches: Set,withEvent event: UIEvent) { startUpdateLoop() animateControlPoints()}<div class="se-prevIEw-section-delimiter"></div>
编译运行,点击你的自定义 vIEw。成功了! :]
美化亮化工程现在你已经看过动画的效果了,但你仍然还有一些工作要做,让 ElasticVIEw 拥有更多加分项。
第一个问题的 overshootAmount。它的值是 10,是硬编码的,将它变成一个能够在代码和 IB 中改变变量将会更好。
Xcode 6.0 的一个新特性就是支持 @IBInspectable,这是一种可以通过 IB 来改变自定义属性的方法。
注意:如果想进一步了解 @IBInspectable,请阅读 Caroline BegbIE 写的 Modern Core Graphics with Swift。
要使用这个性特性,你可以增加一个 overshootAmount 属性并用 @IBInspectable 修饰,这样你创建的每个 ElasticVIEw 都可以有不同的 overshootAmount 值。
在 ElasticVIEw 中新增变量:
@IBInspectable var overshootAmount : CGfloat = 10<div class="se-prevIEw-section-delimiter"></div>
在 animateControlPoints() 将这一行:
let overshootAmount : CGfloat = 10.0<div class="se-prevIEw-section-delimiter"></div>
替换为:
let overshootAmount = self.overshootAmount<div class="se-prevIEw-section-delimiter"></div>
回到 Main.storyboard,点击 ElasticVIEw 打开属性面板。
你会看到在 Elastic VIEw 下面增加了一个新的字段,叫做 Overshoot A…
每个用 @IBInspectable 声明的变量,都会在 IB 中显示为一个新的字段,你可以用它来修改变量的值。
为了检验效果,你可以复制一个 ElasticVIEw,这样你就用两个 ElasticVIEw 了。将新的 ElasticVIEw 放在原来的那个上面,如:
将新、老 ElasticVIEw 的 Overshoot Amount 分别修改为 40、20。
编译运行。点击两个 ElasticVIEw。你会看到它们的动画有所不同,因为你在 IB 中为它们设置了不同值:
将值从 40 改为 -40,看看会发生什么。你会发现控制点向内运动,但背景却没有改变。
你一定想自己解决这个问题吧?
让我给你一点提示:你需要改变 setupComponents 方法。请自己尝试解决,如果你解决不了,再参考下面的答案。
参考答案:
// You have to change the background color of your vIEw after the elasticShape is created,otherwise the vIEw and layer have the same colorbackgroundcolor = UIcolor.clearcolor()clipsToBounds = false<div class="se-prevIEw-section-delimiter"></div>
好了,你已经完成你的 ElasticVIEw 了.
有了 ElasticVIEw 之后,你可以将它放到不同的控件中,比如 text fIEld 或者按钮中。
让 UITextFIEld 具有d性现在你完成了 ElasticVIEw 的核心功能,剩下来的任务就是将它添加到自定义的 text fIEld 中。
在项目导航窗口中,右键点击 ElasticUI 文件组,选择 New file…,然后选择 iOS/Source/Cocoa touch Class 模板,然后点击Next。
类名命名为 ElasticTextFIEld,Subclass of 输入 UITextfIEld,语言选择 Swift。点击 Next 、Create。
打开 ElasticTextFIEld.swift 将内容替换为:
import UIKitclass ElasticTextFIEld: UITextFIEld { // 1 var elasticVIEw : ElasticVIEw! // 2 @IBInspectable var overshootAmount: CGfloat = 10 { dIDSet { elasticVIEw.overshootAmount = overshootAmount } } // 3 overrIDe init(frame: CGRect) { super.init(frame: frame) setupVIEw() } required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) setupVIEw() } // 4 func setupVIEw() { // A clipsToBounds = false borderStyle = .None // B elasticVIEw = ElasticVIEw(frame: bounds) elasticVIEw.backgroundcolor = backgroundcolor addSubvIEw(elasticVIEw) // C backgroundcolor = UIcolor.clearcolor() // D elasticVIEw.userInteractionEnabled = false } // 5 overrIDe func touchesBegan(touches: Set,withEvent event: UIEvent) { elasticVIEw.touchesBegan(touches,withEvent: event) }}<div class="se-prevIEw-section-delimiter"></div>
上述代码逐一解释如下:
用一个属性存放 ElasticVIEw。 一个 IBInspectable 变量 overshootAmout,你可以用它在 IB 中修改控制点的d性。它重载了 dIDSet 方法,在其中设置 elastic vIEw 的 overshootAmount 属性。 类的标准初始化动作,这两个初始化方法都会调用 setupVIEw 方法。在这里配置 text fIEld。这个方法又分为几个步骤:
A. 将 clipsToBounds 设置为 false。这将导致 elastic vIEw 的大小会超出父控件的边框,同时 text fIEld 的边框风格被设置为 .None 以使控件扁平化风格。
B. 创建 elastic vIEw 并将它添加到控件的 subvIEws 中。
C. 将控件的背景色设置为透明,因为你将用 elastic vIEw 来产生控件背景色。
D. 最后,设置 elsatic vIEw 的 userInteractionEnabled 为 false,以免它阻断控件本身对触摸事件的接收。
重载 touchesBegan 方法,并将事件传递给 elsatic vIEw 以驱使它启动动画 :]
回到 Main.storyboard,选择两个 text fIEld,在属性面板中,将它们的 Class 从 UITextFIEld 改为 ElasticTextFIEld。
别忘了还要将两个用于测试的 elastic vIEw 删除。
编译运行。点击 text fIEld,它的实际效果却是这样:
这是因为我们在代码中创建 elastic vIEw 时,它的背景色就是透明的,所以 shape layer 的颜色也就是透明的了。
要解决这个问题,你需要编写某种方法,当我们为 elastic vIEw 设置一种新的背景色时,将背景色的值传递给 shape layer。
传递背景色由于你想用 elastic vIEw 作为控件的主体背景,因此你需要重载 elastic vIEw 的 backgroundcolor 属性。
在 ElasticVIEw.swift 中加入:
overrIDe var backgroundcolor: UIcolor? { willSet { if let newValue = newValue { elasticShape.fillcolor = newValue.CGcolor super.backgroundcolor = UIcolor.clearcolor() } }}<div class="se-prevIEw-section-delimiter"></div>
在设置属性之前,willSet 方法被调用。在这里检查 newValue 是否非空,然后后设置 shape layer 的 fillcolor 为用户设置的颜色。然后调用父类 backgroundcolor 属性的 setter 方法,设置它的背景色为透明。
编译运行,你会看到一个可爱的d性动画。成功了!:]
最后的修改有一点不知道你发现了没有,text fIEld 的 placeholder 文本距离左边框实在是太近了。你不觉得显得有点拥挤吗?你能够自己解决这个 BUG 吗?
这次我不会给你任何提示了。如果你实在解决不了,再参考下面的答案。
// Add some padding to the text and editing boundsoverrIDe func textRectForBounds(bounds: CGRect) -> CGRect { return CGRectInset(bounds,10,5)}overrIDe func editingRectForBounds(bounds: CGRect) -> CGRect { return CGRectInset(bounds,5)}<div class="se-prevIEw-section-delimiter"></div>去掉调试日志
打开 ElasticVIEw.swift,从 setupComponents 方法中删除这一句:
controlPoint.backgroundcolor = UIcolor.bluecolor()
祝贺你,大功告成了!你已经将一个标准的 text fIEld 变成了某种会不停d跳的玩意,同时还创建了一个能够用在所有控件上的定制 UIVIEw。
结束语这是最终完成项目的[下载链接](completed project)。
你拥有了一个能够独立运行的d性 text fIEld。你可以将同样的技术可以用在更多的控件身上。
你学会了如何使用视图的位置重绘自定义形状并给它添加d性效果。你可以随心所欲地使用这种技术。
接下来,你可以尝试更多的动画,为某些更复杂的形状添加更多的控制点,等等。
请浏览 easings.net;这是一个有趣的地方,介绍通过 easing 函数来实现的不同的动画效果。
当你对这些技术有点腻了,你可以看一下如何在项目中使用 BCMeshTransformView。它是 bartosz CIEchaNowski 编写的,它允许你控制视图中的每一个像素。
试想一下,如果你能将每个像素变化出不同的形状,这有多酷 :]
非常高兴你能看完这篇用 Swift 创建一个带d性的 UI 控件的教程,希望你能从中有所获益。如果有任何问题、建议或者关于 Swift 动画的想法,请留言给我。期待你的留言。
总结以上是内存溢出为你收集整理的Swift d性动画教程全部内容,希望文章能够帮你解决Swift d性动画教程所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)