在每个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糖糖