您的位置:首页 > 产品设计 > UI/UE

细聊UIView动画中的那些参数

2015-11-28 22:50 344 查看
在上一篇文章中,我们聊了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糖糖
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: