Swift d性动画教程

Swift d性动画教程,第1张

概述原文:How To Create an Elastic Animation with Swift 作者:Daniel Tavares 译者:kmyhy 每个优雅的 iOS app 都会有一些定制的元素,定制的 UI、定制动画等等。定制、定制、定制,重要的事情重复三遍。 如果你想让自己的 app 与众不同,你肯定在某些独一无二的特性上花了大量的时间,正是这些特性让你的 app 闪闪发光。 在本文中,

原文: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性动画教程所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1071256.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存