在上一篇文章中,我们聊了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糖糖