iOS UIView Animation - Spring

發表於   |   分類於   |  

本文首发CSDN，如需转载请与CSDN联系。

前言

通过上一篇文章，大家应该学会了如何使用UIKit创建最基本的视图动画，包括如何指定视图某属性的起始值和结束值，以及动画持续时间、动画延迟时间、动画选项等概念。

但是目前大家实现的动画不论是位置移动还是大小改变都是以一个单一的方向在运动，比如位置从A点到B点，大小半径从1到2:

图1

在这篇文章中，大家会学到更复杂一点的动画，让视图在一次动画中的运动轨迹像弹簧一样，有多次不同方向的运动，最后停止在终点：

图2

如果给位置移动的动画添加弹簧效果，那么视图的运动轨迹应该像下图中展现的一样：

图3

这会使你的动画看起来更逼真、更真实、更贴近现实。在某些情况下带给用户更好的用户体验。那么让我们开始学习吧。

Spring动画

我们还是以上一篇文章中的登录页面为例，大家应该发现了那个呆板的登录按钮吧，我们今天就让它Q弹起来。

打开ViewController.swift，在viewWillAppear()方法的底部添加如下代码：


self.loginButton.center.y += 30
self.loginButton.alpha = 0

让登录按钮在屏幕呈现之前位置下移30，并且让它透明。然后在viewDidAppear()方法的底部添加如下代码：


UIView.animateWithDuration(1, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .AllowUserInteraction, animations: {
     self.loginButton.center.y -= 30
     self.loginButton.alpha = 1
}, completion: nil)

上述的代码大家是不是似曾相识，没错，依然是UIView的类方法，不过又多了两个参数：

  • usingSpringWithDamping：弹簧动画的阻尼值，也就是相当于摩擦力的大小，该属性的值从0.0到1.0之间，越靠近0，阻尼越小，弹动的幅度越大，反之阻尼越大，弹动的幅度越小，如果大道一定程度，会出现弹不动的情况。
  • initialSpringVelocity：弹簧动画的速率，或者说是动力。值越小弹簧的动力越小，弹簧拉伸的幅度越小，反之动力越大，弹簧拉伸的幅度越大。这里需要注意的是，如果设置为0，表示忽略该属性，由动画持续时间和阻尼计算动画的效果。

下面我们先来看看不同动力的效果：

  • 持续时间为3秒，阻尼为0.5，动力为1：
  • 持续时间为3秒，阻尼为0.5，动力为20：

当initialSpringVelocity的值为1时，登录按钮上下弹力并不是很强劲，当设置为20时，登录按钮直接冲过了密码输入框，这就是动力的效果。

然后我们再看看不同阻尼的效果：

  • 持续时间为3秒，阻尼为0.1，动力为0：
  • 持续时间为3秒，阻尼为1，动力为0：

当usingSpringWithDamping属性值为0.1时，表示阻尼很小，虽然没有动力因素的影响，但登录按钮弹动的幅度依然比较大，相当于在冰面滑行一样。当该属性为1时，表示阻尼非常大，可以看到登录按钮几乎是没有什么弹动的幅度。这就是阻尼的效果。

大家需要注意的一点是，弹簧动画并不只作用于位置的变化，它可以作用于所有动画属性的变化，比如我们在animations的闭包中除了位置的变化外，还有透明度的变化，它也同样有弹簧动画的效果，只不过它没有位置变化那么明显和贴近真实，它会表现出一闪一闪的效果：

大家可以尝试这几个属性不同值的组合，选出一个自己觉得满意的弹簧效果即可。

将动画运用到人机交互

上一节讲的弹簧动画的确可以让我们的UI变得鲜活起来，但这仅仅是看在眼里的，对于用户的操作却并没有什么响应和反馈。在这节会教大家如何让视图在用户进行点击操作时以动画的形式给予响应和反馈。

在ViewController.swift中有一个名为login()的方法，关联了登录按钮的Touch Up Inside事件，在该方法中添加如下代码：


UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: .AllowUserInteraction, animations: {
    self.loginButton.bounds.size.width += 25
}, completion: nil)

此时每当我们点击登录按钮一次，它就会变胖一些。编译运行看一下效果：

我们可以再组合一个效果，使点击登录按钮时不仅让它变胖，还有轻微的向下弹跳效果。在login()方法底部添加如下代码：


UIView.animateWithDuration(0.3, delay: 0.0, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.0, options: .AllowUserInteraction, animations: {
    self.loginButton.center.y += 10
}, completion: nil)

编译运行看一下效果：

以上只是两个简单的将动画运用到人机交互的例子，大家可以在自己的项目中将一些用户的操作加上视图的动画反馈，让你的应用鲜活起来。

结束语

这一篇文章向大家讲解了UIView的Spring动画，以及将动画运用到人机交互中，使提升应用的用户体验，大家可以多多尝试Spring动画的各个属性，以及结合上一篇文章的知识，组合出更美妙的动画效果。下一篇文章会给大家介绍UIView的Transition动画，敬请期待。

参考文献来自：iOS Animations by Tutorials
分享到：