据说每个大神都有自己一个装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转场从下翻转
二、转场动画
转场动画的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和开始时间一样,是运行时间占整个时间的百分比。
四、弹簧动画
[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,表示忽略该属性,由动画持续时间和阻尼计算动画的效果。