细聊UIView动画中的那些参数

在上一篇文章中，我们聊了iOS中，那些使用UIView实现的简单动画。相信看过上节的博文的同学都会有这么一个疑问，上一次介绍的那么多参数，究竟有什么作用呢？那么我们今天就来聊一聊那些充满神奇效果的参数。

在这，我先把那些参数贴出来：

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);

看到这么多参数，相信大家第一反应是，这也太多了吧。其实，仔细一看，也很清楚。整个参数分成了三大块，第一块，属于常规动画设置，第二块，属于动画速度设置，第三块，属于转场动画设置。那么，我们来具体讲讲这些参数吧。

首先是常规动画设置。

    UIViewAnimationOptionLayoutSubviews            = 1 <<  0,    //动画运动过程中保证子视图跟随运动
    UIViewAnimationOptionAllowUserInteraction      = 1 <<  1,    //动画过程中运行用户交互
    UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2,    //所以视图从当前状态开始运行
    UIViewAnimationOptionRepeat                    = 1 <<  3,    //重复运行动画
    UIViewAnimationOptionAutoreverse               = 1 <<  4,    //动画运行结束后仍以动画方式回到原点
    UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5,    //忽略嵌套动画时间设置
    UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6,    //忽略嵌套动画速度设置
    UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7,    //动画过程中重绘视图(仅仅试用于转场动画)
    UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8,    //视图切换时直接隐藏旧视图，显示新视图，而不是移除(仅仅适用于转场动画)          UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9     //不继承父动画设置或动画类型

这些参数的效果跟注释的说明差不多，大家可以试试。

接下来是动画速度设置。

    UIViewAnimationOptionCurveEaseInOut            = 0 << 16,  //动画先缓慢，然后加速，类似arctanx的函数图像
    UIViewAnimationOptionCurveEaseIn               = 1 << 16,  //动画逐渐变慢,类似sort(x)函数图像
    UIViewAnimationOptionCurveEaseOut              = 2 << 16,  //动画逐渐变快，类似抛物线的右边一半的图像
    UIViewAnimationOptionCurveLinear               = 3 << 16,  //动画匀速变化，也就是线性变化

说起来感觉很高端，但是，其实几个参数都很简单的，具体要看你怎么用。

最后来说说转场动画设置

    UIViewAnimationOptionTransitionNone            = 0 << 20,<span style="white-space:pre">	</span>// 没有转场动画
    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,<span style="white-space:pre">	</span>//从左侧翻转
    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,<span style="white-space:pre">	</span>//从右侧翻转
    UIViewAnimationOptionTransitionCurlUp          = 3 << 20,<span style="white-space:pre">	</span>//从前向后翻转
    UIViewAnimationOptionTransitionCurlDown        = 4 << 20,<span style="white-space:pre">	</span>//从后向前翻转
    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,<span style="white-space:pre">	</span>//旧视图溶解显示新视图效果
    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,<span style="white-space:pre">	</span>//从上方翻转效果
    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,<span style="white-space:pre">	</span>//从底部翻转效果

这些参数主要是用在转场动画过渡中，如果你想结合多个参数的话，可以使用 | 来结合，比如，你可以结合

UIViewAnimationOptionAutoreverse | UIViewAnimationOptionCurveEaseInOut

这样就可以实现，既能动画结束时以动画形式返回原点，而且速度还能逐渐变慢。

那么，这些参数就讲到这里啦，适当的结合这些参数及上一次说的那些函数，设置好你的时间及延迟时间，还有动画结束时要做的工作，一个生动的动画就能展现在你面前。说这么多，还不如具体操作一遍，发挥你的想象，你可以做出很棒的动画效果。

最后，再给大家推荐三个网站，分别是

Dribble

Capptivate

google material design

这三个网站有着一些非常不错的动画例子，做动画的时候可以去这些网站找找灵感。

--by糖糖