IOS 动画案例

据说每个大神都有自己一个装X的博客,珍重声明,本人不喜欢装X!

而既然IOS开发者账号还没交钱,不能弄出安装包什么的下载,只能以这种方式展示案例了!

IOS动画

APP需要好的想法、设计、功能、优化、界面等等,好的动画是让APP用户体验加分的利器

iOS有很多动画技术,API主要分布在两个库中,一个是UIKit,另一个是CoreAnimation。UIKit其实是基于CoreAnimation的封装,Core Animation是iOS与OS X平台上负责图形渲染与动画的基础设施。Core Animation可以动画视图和其他的可视元素。渣渣表示我先暂时学习UIKit中常用API的使用,然后再去了解底层的实现。

Core Animation编程指南

UIKit动画

UIKit主要API散落在UIView+UIViewAnimationWithBlocks和UIView+UIViewKeyframeAnimations两个分类

主要API:

@interfaceUIView(UIViewAnimationWithBlocks)

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void(^)(void))animations

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void(^)(BOOL finished))completion

+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray *)views options:(UIViewAnimationOptions)options animations:(void(^)(void))parallelAnimations completion:(void(^)(BOOL finished))completion

@end

@interfaceUIView (UIViewKeyframeAnimations)

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion

+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void(^)(void))animations NS_AVAILABLE_IOS(7_0);

@end

一、简单动画

前面四个API接口相似,功能也差不多,不过带的参数不一样,用于创建常用的动画,参数列表如下

参数说明

duration持续时间

delay延时时间开始

options动画选项(下面详细解释)

animations动画block

completion动画结束后的回调

options大体上可以分为三类,分为动画属性,动画线性关系,和动画转场效果。

动画属性:

UIViewAnimationOptionLayoutSubviews                  在AutoLayout下,如果修改AutoLayout,那么子视图也会跟着一起变化

UIViewAnimationOptionAllowUserInteraction          在动画时,允许用户交互,比如按钮在运动者还可以点击

UIViewAnimationOptionBeginFromCurrentState      从当前状态开始动画

UIViewAnimationOptionRepeat                               重复动画

UIViewAnimationOptionAutoreverse                       动画执行完毕自动翻转

UIViewAnimationOptionOverrideInheritedDuration 忽略外层动画嵌套的执行时间

UIViewAnimationOptionOverrideInheritedCurve      忽略外层动画线性关系

动画线性关系

UIViewAnimationOptionShowHideTransitionViews  用显隐的方式替代添加移除图层的动画效果

UIViewAnimationOptionOverrideInheritedOptions  忽略嵌套继承的�选项

UIViewAnimationOptionCurveEaseInOut                 时间曲线函数,由慢到快

UIViewAnimationOptionCurveEaseIn                       时间曲线函数,由慢到特别快

UIViewAnimationOptionCurveEaSEOut                    时间曲线函数,由快到慢

UIViewAnimationOptionCurveLinear                       时间曲线函数,匀速

动画转场效果

UIViewAnimationOptionTransitionNone                 无转场动画

UIViewAnimationOptionTransitionFlipFromLeft      转场从左翻转

UIViewAnimationOptionTransitionFlipFromRight    转场从右翻转

UIViewAnimationOptionTransitionCurlUp              上卷转场

UIViewAnimationOptionTransitionCurlDown         下卷转场

UIViewAnimationOptionTransitionCrossDissolve   转场交叉消失

UIViewAnimationOptionTransitionFlipFromTop     转场从上翻转

UIViewAnimationOptionTransitionFlipFromBottom转场从下翻转


IOS 动画案例_第1张图片

二、转场动画

转场动画的API如下,是为了控制视图的跳转而使用的

[UIView transitionWithView:subView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{

[subView addSubview:testView];

} completion:^(BOOL finished) {

}];

运行这段代码可以看到视图被翻转过来的时候添加了testView在上面。

[UIView transitionFromView:subView toView:testView duration:1.0options:UIViewAnimationOptionTransitionFlipFromLeft completion:nil];

这个方法可以控制一个控制器中的视图切换。

三、关键帧动画:

[UIView animateKeyframesWithDuration:2delay:0options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{

[UIView addKeyframeWithRelativeStartTime:0relativeDuration:0.25animations:^{

CGRect frame=testView.frame;

frame.origin.y+=100*flag;

testView.frame=frame;

}];

[UIView addKeyframeWithRelativeStartTime:0.25relativeDuration:0.25animations:^{

CGRect frame=testView.frame;

frame.origin.y-=100*flag;

testView.frame=frame;

}];

[UIView addKeyframeWithRelativeStartTime:0.5relativeDuration:0.5animations:^{

CGRect frame=testView.frame;

frame.origin.y+=200*flag;

testView.frame=frame;

}];

} completion:^(BOOL finished) {

btn.hidden=YES;

}];

可以看到,关键帧动画我们很方便的可以控制动画的整个过程,addKeyframeWithRelativeStartTime:是添加关键帧方

法,参数startTime是一个在0~1之间的数字,表示开始时间占总时间的%多少,比如上例中的第一帧就是0,第二针就是25%也就是在0.5秒开

始。relativeDuration和开始时间一样,是运行时间占整个时间的百分比。


IOS 动画案例_第2张图片

四、弹簧动画

[UIView animateWithDuration:0.5delay:1.0usingSpringWithDamping:1initialSpringVelocity:0.1options:UIViewAnimationOptionAutoreverse animations:^{

CGRect frame=testView.frame;

frame.origin.y+=100*flag;

testView.frame=frame;

} completion:^(BOOL finished) {

btn.hidden=YES;

}];

弹簧动画的阻尼值,也就是相当于摩擦力的大小,该属性的值从0.0到1.0之间,越靠近0,阻尼越小,弹动的幅度越大,反之阻尼越大,弹动的幅度越小,如果大道一定程度,会出现弹不动的情况。

弹簧动画的速率,或者说是动力。值越小弹簧的动力越小,弹簧拉伸的幅度越小,反之动力越大,弹簧拉伸的幅度越大。这里需要注意的是,如果设置为0,表示忽略该属性,由动画持续时间和阻尼计算动画的效果。


IOS 动画案例_第3张图片

你可能感兴趣的:(IOS 动画案例)