UIView动画

UIView动画是对CoreAnimation的封装,提供简介的动画借口。

UIView动画可以设置的属性:

  1. frame 大小变化
  2. bounds 拉伸变化
  3. center 中心位置
  4. transform 旋转
  5. alpha 透明度
  6. backgroundColor 背景颜色
  7. contentStretch 拉伸内容
1、 UIView的Block动画

1.1、简单的Block动画

[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
animations:^{
//执行的动画
}];

[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
animations:^{
//执行的动画
}completion:^(BOOLfinished){
//动画执行完毕后的操作
}];

1.2 、可设置延迟时间和过渡效果的Block动画

[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
options:(UIViewAnimationOptions)//动画的过渡效果
animations:^{
//执行的动画
}completion:^(BOOLfinished){
//动画执行完毕后的操作
}];
UIViewAnimationOptions的枚举值如下,可组合使用:

UIViewAnimationOptionLayoutSubviews//进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction//进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState//从当前状态开始动画
UIViewAnimationOptionRepeat//无限重复执行动画
UIViewAnimationOptionAutoreverse//执行动画回路
UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve//忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent//转场:进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews//转场:移除(添加和移除图层的)动画效果
UIViewAnimationOptionOverrideInheritedOptions//不继承父动画设置
UIViewAnimationOptionCurveEaseInOut//时间曲线,慢进慢出(默认值)
UIViewAnimationOptionCurveEaseIn//时间曲线,慢进
UIViewAnimationOptionCurveEaseOut//时间曲线,慢出
UIViewAnimationOptionCurveLinear//时间曲线,匀速
UIViewAnimationOptionTransitionNone//转场,不使用动画
UIViewAnimationOptionTransitionFlipFromLeft//转场,从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight//转场,从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp//转场,下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown//转场,从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve//转场,交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop//转场,从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom//转场,从下向上旋转翻页

1.3、Spring动画

[UIView  animateWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
usingSpringWithDamping:(CGFloat)//震动效果,范围0~1,数值越小震动效果越明显
initialSpringVelocity:(CGFloat)//初始速度,数值越大初始速度越快
options:(UIViewAnimationOptions)//动画的过渡效果
animations:^{
//执行的动画
}
completion:^(BOOLfinished){
//动画执行完毕后的操作
}];

1.4、Keyframes动画

[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
animations:^{
//执行的关键帧动画
}
completion:^(BOOLfinished){
//动画执行完毕后的操作
}];
UIViewKeyframeAnimationOptions的枚举值如下,可组合使用:

UIViewAnimationOptionLayoutSubviews//进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction//进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState//从当前状态开始动画
UIViewAnimationOptionRepeat//无限重复执行动画
UIViewAnimationOptionAutoreverse//执行动画回路
UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions//不继承父动画设置
UIViewKeyframeAnimationOptionCalculationModeLinear//运算模式:连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete//运算模式:离散
UIViewKeyframeAnimationOptionCalculationModePaced//运算模式:均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic//运算模式:平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced//运算模式:平滑均匀

1.6 转场动画

1.6.1 从旧视图转到新视图的动画效果

//在该动画过程中,fromView会从父视图中移除,并讲toView添加到父视图中,注意转场动画的作用对象是父视图(过渡效果体现在父视图上)。
[UIView transitionFromView:(nonnullUIView*)
toView:(nonnullUIView*)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOLfinished){
//动画执行完毕后的操作
}];

1.6.2单个视图的过渡效果

[UIViewtransitionWithView:(nonnullUIView*)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//执行的动画
}
completion:^(BOOLfinished){
//动画执行完毕后的操作
}];
2. UIView的类方法动画
[UIView beginAnimations:(nullableNSString*)context:(nullablevoid*)];                                         //开始动画

第一个参数:动画标识
第二个参数:附加参数,在设置了代理的情况下,此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情况下,我们设置为nil即可。

[UIView commitAnimations];                      //动画结束

动画参数的设置方法

//动画持续时间
[UIViewsetAnimationDuration:(NSTimeInterval)];
//动画的代理对象
[UIViewsetAnimationDelegate:(nullableid)];
//设置动画将开始时代理对象执行的SEL
[UIViewsetAnimationWillStartSelector:(nullableSEL)];
//设置动画结束时代理对象执行的SEL
[UIViewsetAnimationDidStopSelector:(nullableSEL)];
//设置动画延迟执行的时间
[UIViewsetAnimationDelay:(NSTimeInterval)];
//设置动画的重复次数
[UIViewsetAnimationRepeatCount:(float)];
//设置动画的曲线
[UIViewsetAnimationCurve:(UIViewAnimationCurve)];
UIViewAnimationCurve的枚举值如下:
UIViewAnimationCurveEaseInOut,//慢进慢出(默认值)
UIViewAnimationCurveEaseIn,//慢进
UIViewAnimationCurveEaseOut,//慢出
UIViewAnimationCurveLinear//匀速
//设置是否从当前状态开始播放动画
[UIViewsetAnimationBeginsFromCurrentState:YES];
//当为YES时:动画将从上一个动画所在的状态开始播放
//当为NO时:动画将从上一个动画所指定的最终状态开始播放(此时上一个动画马上结束)
//设置动画是否继续执行相反的动画
[UIViewsetAnimationRepeatAutoreverses:(BOOL)];
//是否禁用动画效果(对象属性依然会被改变,只是没有动画效果)
[UIViewsetAnimationsEnabled:(BOOL)];
//设置视图的过渡效果
[UIViewsetAnimationTransition:(UIViewAnimationTransition)forView:(nonnullUIView*)cache:(BOOL)];

第一个参数:UIViewAnimationTransition的枚举值如下
UIViewAnimationTransitionNone,//不使用动画
UIViewAnimationTransitionFlipFromLeft,//从左向右旋转翻页
UIViewAnimationTransitionFlipFromRight,//从右向左旋转翻页
UIViewAnimationTransitionCurlUp,//从下往上卷曲翻页
UIViewAnimationTransitionCurlDown,//从上往下卷曲翻页
第二个参数:需要过渡效果的View
第三个参数:是否使用视图缓存,YES:视图在开始和结束时渲染一次;NO:视图在每一帧都渲染


属性变化动画(以frame变化为例)实例

[UIView beginAnimations:@"FrameAni"context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAni:)];
[UIView setAnimationDidStopSelector:@selector(stopAni:)];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
self.cartCenter.frame=self.centerShow.frame;
[UIView commitAnimations];

转场效果动画(以Flip效果为例)

[UIView beginAnimations:@"FlipAni"context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAni:)];
[UIView setAnimationDidStopSelector:@selector(stopAni:)];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeftforView:self.centerShowcache:YES];
self.centerShow.image=[UIImageimageNamed:@"service"];
[UIView commitAnimations];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • UIView动画简介 UIView动画实质上是对Core Animation的封装,提供简洁的动画接口。 UIVi...
    zhaihongxia阅读 816评论 0 0
  • iOS的动画效果一直都很棒很,给人的感觉就是很炫酷很流畅,起到增强用户体验的作用。在APP开发中实现动画效果有很多...
    白水灬煮一切阅读 291评论 0 1
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    被吹落的风阅读 1,545评论 1 2
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,076评论 1 23
  • 在开发工作中,我们会碰到大量的需要表现力的地方,那么动画便成为了我们开发过程中必不可少的知识点。 那么,首先我们从...
    穿山甲救蛇精阅读 2,572评论 2 15