《Motion Design for iOS》（三十七）

现在，让我们从上到下动画屏幕上的其他元素。每个都需要比前一个开始得稍微慢一点。同时我想要控制app启动后动画开始的时间，来看看我如何管理。

CGFloat initialDelay = 1.0f;
CGFloat stutter = 0.3f;

// 动画箭头图片
[UIView animateWithDuration:2.1 delay:initialDelay
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[arrowView setFrame:CGRectMake(0, 0, windowWidth, 45)];
} completion:NULL];

// 动画Ministry of Fun文字
[UIView animateWithDuration:2.1 delay:initialDelay + (1 * stutter)
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[ministryView setFrame:CGRectMake(0, 57, windowWidth, 28)];
} completion:NULL];

我设置了两个

CGFloat

变量，一个initialDelay值来存储延迟时间，一个stutter来存储每个动画之间细微的延迟。这个数字对我们动画效果整体的感觉和流动感都非常重要。动画之间太长的延时会让他们觉得不连贯，太短就不足以形成我们想要构建的波浪效果。

回到代码：第一个动画的delay属性就是initialDelay变量的值，因为这是来到屏幕上的第一个动画。第二个动画block的delay值为initialDelay+（1*stutter）。这表示它会等待开始的延迟时间，然后会等待stutter值乘以1的时间。接下来的所有动画都会遵循这个公式作为延时，并且每次都会加1倍stutter。这可以确保他们的动画之间都是同样的延时。

这里是现在看起来的样子。



我觉得这个看起来不错。老实说，只动画两个元素很难看出波浪效果是不是好的，因为你无法获取一个整体的真实感受，除非动画一系列的元素。所以让我们动画屏幕上的其他元素。

[UIView animateWithDuration:2.1 delay:initialDelay + (2 * stutter)
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[addButton setFrame:CGRectMake(0, 102, windowWidth, 45)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (3 * stutter)
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[firstRow setFrame:CGRectMake(0, 170, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (4 * stutter)
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[secondRow setFrame:CGRectMake(0, 170+80, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (5 * stutter)
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[thirdRow setFrame:CGRectMake(0, 170+160, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (6 * stutter)
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[fourthRow setFrame:CGRectMake(0, 170+240, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (7 * stutter)
usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
[fifthRow setFrame:CGRectMake(0, 170+320, windowWidth, 80)];
} completion:NULL];

现在我们动画了所有的元素到位置上了，让我们看看效果。



对我来说感觉还不太对。动画的延时还是有点太长了，破坏了想要的波浪感。看起来一点也没有流动感。让我们降低延时，把stutter变量的值从0.3降为0.15来看看效果。



很接近了，但我认为我们可以再缩小一点点延迟时间来让它更有天然的流动感，就像每个元素都牵引了下一个。让我们将stutter变量降为0.6。



现在我们有些成果了。我认为它看起来很棒并且有非常好的波浪动作。让我们和Jakub原始的动作做一些比较。



看起来我们匹配得很接近！所以从这个例子中学到了什么呢？

基于block的

UIView

动画方法中的弹簧的damping值是一个抽象值，对获取一个好的感觉并没有什么用。这就是为什么我喜欢用真实的弹簧动作（不需要设置持续时间的），比如JSWSpringAnimation提供的那种。

当实现一个像这个一样内置的动画时，调整动画之间的延时是得到一个好的波浪形动作的关键点。

查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS

版权所有：http://blog.csdn.net/cloudox_