聊聊iOS的那些小动画

在每个App中，多多少少都会存在一些动画。有些动画属于小动画，也有些属于那种较大型一些的动画。那么，这些动画都是怎么设计出来的呢？今天我们就来聊聊iOS中基于UIView的一些小动画。
说是动画，其实就是改变其一些属性值来达到想要的效果而已。当然，如果光是改变属性值，效果会很奇怪，出来的动画效果会非常的生硬，让人感觉很不舒服。那么，我们先来介绍几个函数。

   [UIView animateWithDuration:<#(NSTimeInterval)#> 
                    animations:<#^(void)animations#>];

    [UIView animateWithDuration:<#(NSTimeInterval)#> 
    animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

    [UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

    [UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> usingSpringWithDamping:<#(CGFloat)#> initialSpringVelocity:<#(CGFloat)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

这里有四个函数，都是系统自带的方法，可以看出，这些方法都属于UIView的方法，可以使用这些方法，再结合一些属性，就可以做出一些简单的动画效果咯。
我们来详细说说这些方法吧。
1.第一个方法，也就是这些方法里面，最为简单的方法。

[UIView animateWithDuration:<#(NSTimeInterval)#> 
                    animations:<#^(void)animations#>];

这个方法的第一个参数Duration，就是该方法的执行时间，第二个animations就是要执行的动画，也就是说，如果你要修改某一个属性值的话，那么代码就应该写在这块。这个函数执行之后，就会根据你写的属性改变值产生相应的动画。这也是，UIView动画中最为简单的动画实现。
2.接下来看看第二个函数：

[UIView animateWithDuration:<#(NSTimeInterval)#> 
    animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

这个函数相对于上面那个，就高端一点了，从哪里体现出来高端呢？就是最后一个参数，completion参数的作用，就是当动画执行完之后，执行completion内的代码块。到这里可能很多读者会发现，这里的几个函数，都是用block语法来实现的，因为block语法相对于原本的函数来说要简单的多，所以本文介绍的是block语法实现的动画，对非block语法的不作介绍。有兴趣的读者可以自行研究。
3.接下来说说第三个函数：

[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

这个函数相对于上面那个函数来讲，又高端了一些。delay参数是用来设置动画延迟的，比如说你前面有了一个动画，你想让当前的动画在前面那个动画之后执行，那么你就可以设置delay参数来使该动画在你设置的时间段后执行。参数options是设置该动画的效果，当我们点进去查看头文件时会发现里面是这样定义的：

typedef NS_OPTIONS(NSUInteger, UIViewAnimationOptions) {
    UIViewAnimationOptionLayoutSubviews            = 1 <<  0,
    UIViewAnimationOptionAllowUserInteraction      = 1 <<  1, // turn on user interaction while animating
    UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2, // start all views from current value, not initial value
    UIViewAnimationOptionRepeat                    = 1 <<  3, // repeat animation indefinitely
    UIViewAnimationOptionAutoreverse               = 1 <<  4, // if repeat, run animation back and forth
    UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5, // ignore nested duration
    UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6, // ignore nested curve
    UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7, // animate contents (applies to transitions only)
    UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8, // flip to/from hidden state instead of adding/removing
    UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9, // do not inherit any options or animation type

    UIViewAnimationOptionCurveEaseInOut            = 0 << 16, // default
    UIViewAnimationOptionCurveEaseIn               = 1 << 16,
    UIViewAnimationOptionCurveEaseOut              = 2 << 16,
    UIViewAnimationOptionCurveLinear               = 3 << 16,

    UIViewAnimationOptionTransitionNone            = 0 << 20, // default
    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
    UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
    UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,
} NS_ENUM_AVAILABLE_IOS(4_0);

看起来貌似很多，这里面的东西涉及了好几个函数所需要的东西。具体解释在下一次的博客中讲解。这个参数是用来设置动画的执行效果，上面的每一个对应的效果都不尽相同，要调出想要的效果，需要仔细考虑以上这些参数。
4.最后一个

[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> usingSpringWithDamping:<#(CGFloat)#> initialSpringVelocity:<#(CGFloat)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

这最后一个，当然也是压轴的咯。这个函数所产生的效果，跟上面的三个函数都不一样，可以看到，这个函数中多了usingSpringWithDamping: initialSpringVelocity:这两个参数。这两个参数是用来设置弹簧效果的，也就是物理中的弹簧振子产生的振动效果，第一个，是用来设置弹簧的弹性系数的，第二个是用来设置该物体的初速度的。用好这个函数，会产生一些非常奇特的动画效果。具体效果，需要读者自己去体会。
这里再介绍一个UIView中的动画函数

[UIView transitionWithView:<#(nonnull UIView *)#> duration:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

这个函数是用来实现那种有页面翻转的效果，可以看到，参数中有一个View，这个View就是用来实现翻转效果的View，在上面列出的那么多参数中，有属于这个函数的options参数

 UIViewAnimationOptionTransitionNone            = 0 << 20, // default
    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
    UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
    UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,

这些参数就是能够用来设置不同的翻转效果的参数。合理使用好这些参数，会达到你意想不到的效果。
关于UIView实现的动画就介绍到这里了，虽然只是介绍了这几个函数，但是这些函数组合起来使用，会有不一样的动画效果体验。那么具体的结果，就交给你们咯。

                                    --by糖糖