spring动画－iOS－备

Posted 2020-06-19 qigemingnan

最后停止在终点：

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

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

Spring动画

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

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

 

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

 

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

 

1. UIView.animateWithDuration(1, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .AllowUserInteraction, animations: {  
2.      self.loginButton.center.y -= 30  
3.      self.loginButton.alpha = 1  
4. }, 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事件，在该方法中添加如下代码：

 

 

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

 

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

                                        

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

 

 

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

 

编译运行看一下效果：

                                        

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

 

说法二：

 

 

Spring Animation 是一种特殊的动画曲线，自从 ios 7 开始被广泛应用在系统动画中。

下图中演示的系统自带的动画效果，都使用了 Spring Animation：

  

事实上，从 iOS 7 起几乎所有的系统动画都用的是 Spring Animation，包括 App 文件夹打开/关闭效果、键盘弹出效果、UISwitch 控件的开关效果、不同 View Controller 之间的 Push 动画、Modal 出现和消失的动画、Siri 的出现和消失动画，等等。下图为 Spring Animation 和普通的动画的运动曲线的对比：

为了更加直观，我做了一组演示图，从左至右分别列出了 Spring Animation, Ease-Out Animation 和 Linear Animation 的动画效果：

可以看到，和系统自带的 ease-out 效果相比，Spring Animation 前期速度增加得更快，在动画时间一定的前提下，给人感觉更加快速、干净。

Spring Animation API

自 iOS 8 开始，Apple 公开了 Spring Animation 的 API，开发者也可以使用简单的代码创建这类动画效果了：

+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay
     usingSpringWithDamping:(CGFloat)dampingRatio
      initialSpringVelocity:(CGFloat)velocity
                    options:(UIViewAnimationOptions)options
                 animations:(void (^)(void))animations
                 completion:(void (^)(BOOL finished))completion

该方法是UIView的类方法。

Spring Animation 的 API 和一般动画相比多了两个参数，分别是usingSpringWithDamping和initialSpringVelocity。

usingSpringWithDamping 参数

usingSpringWithDamping的范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显。下图演示了在initialSpringVelocity为0.0f的情况下，usingSpringWithDamping分别取0.2f，0.5f和1.0f的情况。

initialSpringVelocity 参数

initialSpringVelocity则表示初始的速度，数值越大一开始移动越快。下图演示了在usingSpringWithDamping为1.0f时，initialSpringVelocity分别取5.0f，15.0f和25.0f的情况。值得注意的是，初始速度取值较高而时间较短时，也会出现反弹情况。

使用

Spring Animation 是线性动画或 ease-out 动画的理想替代品。由于 iOS 本身大量使用的就是 Spring Animation，用户已经习惯了这种动画效果，因此使用它能使 App 让人感觉更加自然，用 Apple 的话说就是「instantly familiar」。此外，Spring Animation 不只能对位置使用，它适用于所有可被添加动画效果的属性。

 

 

感谢分享