动画(一)UIView Animation

UIView Animation 是UIKit 框架中,针对UIView 动画做的封装。

一、 首先看 UIView(UIViewAnimation) 类别

1、主要方法:

+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void*)context;  // 事务开始,标记开始添加动画内容,可以填写id 与上下文,与commitAnimations成对出现,中间可以嵌套beginAnimations/commitAnimations组合。

+ (void)commitAnimations;                                                //事务提交,标示动画启动,顶层动画是提交

2、常见方法:

需要设置在beginAnimations/commitAnimations之间或者动画的block里,

+ (void)setAnimationDelegate:(nullableid)delegate;                          // 设置动画的代理

+ (void)setAnimationWillStartSelector:(nullable SEL)selector;                // 设置动画即将开始的监听方法

+ (void)setAnimationDidStopSelector:(nullable SEL)selector;                  // 设置动画结束的监听方法

+ (void)setAnimationDuration:(NSTimeInterval)duration;              // 设置动画时间,默认0.2秒

+ (void)setAnimationDelay:(NSTimeInterval)delay;                    // 设置动画延时时间 默认0秒

+ (void)setAnimationStartDate:(NSDate*)startDate;                  // 设置动画开始时间,默认是当前时间

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;              // 动画的节奏控制 默认淡入淡出

动画的节奏效果:

typedef NS_ENUM(NSInteger, UIViewAnimationCurve) {

UIViewAnimationCurveEaseInOut, //淡入淡出

UIViewAnimationCurveEaseIn,    //开始慢

UIViewAnimationCurveEaseOut,  //结束慢

UIViewAnimationCurveLinear    //线性的

};

+ (void)setAnimationRepeatCount:(float)repeatCount;                //动画的重复次数

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;    //如果设置为YES,代表动画每次重复执行的效果会跟上一次相反

+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;  // 如果设置为YES那么当动画在运行过程中,当前视图的位置将会作为新的动画的开始状态。如果设置为NO,当前动画结束前新动画将使用视图最后状态的位置作为开始状态。

+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView*)view cache:(BOOL)cache;  // 设置视图view的过渡效果; transition指定过渡类型;参数cache,如果是YES,那么在开始和结束图片视图渲染一次并在动画中创建帧,否则视图将会在每一帧都渲染。例如缓存,你不需要在视图转变中不停的更新,你只需要等到转换完成再去更新视图。

动画效果:

typedef NS_ENUM(NSInteger, UIViewAnimationTransition) {

UIViewAnimationTransitionNone,          没有动画效果

UIViewAnimationTransitionFlipFromLeft,  从左向右旋转翻页

UIViewAnimationTransitionFlipFromRight, 从右向左旋转翻页

UIViewAnimationTransitionCurlUp,        卷曲翻页,从下往上

UIViewAnimationTransitionCurlDown,      卷曲翻页,从上往下

};

+ (void)setAnimationsEnabled:(BOOL)enabled;     //设置是否激活动画,如果是YES那就激活动画,否则NO。默认是YES

+ (BOOL)areAnimationsEnabled;   //返回一个布尔值表示动画是否结束。如果动画结束返回YES,否则NO。

+ (void)performWithoutAnimation:(void (^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0); //可以强制一些动作不使用动画,它是一个简单的封装,先检查动画当前是否启用,然后禁止动画,执行块语句,最后重新启用动画。一个需要说明的地方是,它并不会阻塞基于CoreAnimation的动画。iOS7的新方法

二、UIView(UIViewAnimationWithBlocks)主要是UIView基于block形式的基本动画

1、基本动画

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

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

上述三个方法类似,课根据需要选用合适的方法,

参数解析:

duration:动画时长

delay:动画延时时长

options:动画类型参数

animations:动画内容block

completion:动画完成后block

代码示例:

  [UIView animateWithDuration:2 //动画时长 单位为秒

                          delay:0//动画延时, 不需要延时,设0

                        options:UIViewAnimationOptionCurveEaseInOut //执行的动画选项

                     animations:^{//动画的内容

                         self.customView.transform=CGAffineTransformMakeScale(0.1,0.1);

                     }completion:^(BOOLfinished) {

                         //嵌套动画(恢复原来视图大小)

                         [UIViewanimateWithDuration:1animations:^{

                             self.customView.transform=CGAffineTransformMakeScale(1,1);

                         }];

                     }];

下边是options参数解析:

/*

1.常规动画属性设置(可以同时选择多个进行设置)

UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动。**提交动画的时候布局子控件,表示子控件将和父控件一同动画。**

UIViewAnimationOptionAllowUserInteraction:动画过程中允许用户交互。

UIViewAnimationOptionBeginFromCurrentState:所有视图从当前状态开始运行。

UIViewAnimationOptionRepeat:重复运行动画。

UIViewAnimationOptionAutoreverse :动画运行到结束点后仍然以动画方式回到初始点。**执行动画回路,前提是设置动画无限重复**

UIViewAnimationOptionOverrideInheritedDuration:忽略嵌套动画时间设置。**忽略外层动画嵌套的时间变化曲线**

UIViewAnimationOptionOverrideInheritedCurve:忽略嵌套动画速度设置。**通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照**

UIViewAnimationOptionAllowAnimatedContent:动画过程中重绘视图(注意仅仅适用于转场动画)。

UIViewAnimationOptionShowHideTransitionViews:视图切换时直接隐藏旧视图、显示新视图,而不是将旧视图从父视图移除(仅仅适用于转场动画)**用显隐的方式替代添加移除图层的动画效果**

UIViewAnimationOptionOverrideInheritedOptions :不继承父动画设置或动画类型。**忽略嵌套继承的选项**

----------------------------------------------------------------------------

2.动画速度控制(可从其中选择一个设置)时间函数曲线相关**时间曲线函数**

UIViewAnimationOptionCurveEaseInOut:动画先缓慢,然后逐渐加速。

UIViewAnimationOptionCurveEaseIn :动画逐渐变慢。

UIViewAnimationOptionCurveEaseOut:动画逐渐加速。

UIViewAnimationOptionCurveLinear :动画匀速执行,默认值。

-----------------------------------------------------------------------------

3.转场类型(仅适用于转场动画设置,可以从中选择一个进行设置,基本动画、关键帧动画不需要设置)**转场动画相关的**

UIViewAnimationOptionTransitionNone:没有转场动画效果。

UIViewAnimationOptionTransitionFlipFromLeft :从左侧翻转效果。

UIViewAnimationOptionTransitionFlipFromRight:从右侧翻转效果。

UIViewAnimationOptionTransitionCurlUp:向后翻页的动画过渡效果。

UIViewAnimationOptionTransitionCurlDown :向前翻页的动画过渡效果。

UIViewAnimationOptionTransitionCrossDissolve:旧视图溶解消失显示下一个新视图的效果。

UIViewAnimationOptionTransitionFlipFromTop :从上方翻转效果。

UIViewAnimationOptionTransitionFlipFromBottom:从底部翻转效果。

*/

2、带弹簧效果动画

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

参数:

dampingRatio: 阻尼系数 值越小弹簧效果越明显 取值0到1

velocity: 初始的速度,数值越大一开始移动越快

代码示例:

[UIView animateWithDuration:2

                          delay:0

         usingSpringWithDamping:0.1

          initialSpringVelocity:1

                        options:UIViewAnimationOptionCurveEaseIn

                     animations:^{

        self.customView.transform = CGAffineTransformMakeTranslation(0, 200);

                     }completion:^(BOOLfinished) {

        [UIView animateWithDuration:2 animations:^{

            self.customView.transform = CGAffineTransformMakeTranslation(0, 0);

        }];

    }];

3、转场动画

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

参数解析:

duration:动画的持续时间

view:需要进行转场动画的视图

options:转场动画的类型

animations:将改变视图属性的代码放在这个block中

completion:动画结束后,会自动调用这个block

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

方法调用完毕后,相当于执行了下面两句代码:

// 添加toView到父视图

[fromView.superview addSubview:toView]; 

// 把fromView从父视图中移除

[fromView removeFromSuperview];

参数解析:

duration:动画的持续时间

options:转场动画的类型

animations:将改变视图属性的代码放在这个block中

completion:动画结束后,会自动调用这个block


 [UIView transitionWithView:self.customView duration:2 options:(UIViewAnimationOptionTransitionCurlUp) animations:^{

       [self.customView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];    }completion:^(BOOLfinished) {  

 }];

三 、UIView (UIViewKeyframeAnimations) 是基于UIView形式的关键帧动画

1、方法

关键帧动画核心方法有两个,要同时使用:

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

参数解析:

duration:动画总时长

delay:动画延时时长

options:动画类型参数

animations:动画内容block

completion:动画完成后block

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

参数解析:

frameStartTime:相对于Duration所开始的时间(第0秒开始动画)

frameDuration:相对于Duration所持续的时间

animations:动画内容block

代码示例:

[UIView animateKeyframesWithDuration:6 delay:0 options:(UIViewKeyframeAnimationOptionRepeat) animations:^{

        [UIView addKeyframeWithRelativeStartTime:0.0  // 相对于6秒所开始的时间(第0秒开始动画)

                                relativeDuration:1/3.0// 相对于6秒动画的持续时间(动画持续2秒)

                                      animations:^{

                                          self.customView.backgroundColor= [UIColorcolorWithRed:RandomColorgreen:RandomColorblue:RandomColoralpha:1];

                                      }];

        [UIView addKeyframeWithRelativeStartTime:1/3.0 // 相对于6秒所开始的时间(第2秒开始动画)

                                relativeDuration:1/3.0// 相对于6秒动画的持续时间(动画持续2秒)

                                     animations:^{                                          self.customView.backgroundColor= [UIColorcolorWithRed:RandomColorgreen:RandomColorblue:RandomColoralpha:1];

                                      }];

       [UIView addKeyframeWithRelativeStartTime:2/3.0 // 相对于6秒所开始的时间(第4秒开始动画)

                                relativeDuration:1/3.0// 相对于6秒动画的持续时间(动画持续2秒)

                                     animations:^{

                                         self.customView.backgroundColor= [UIColorcolorWithRed:RandomColorgreen:RandomColorblue:RandomColoralpha:1];                                                          }];

   }completion:nil];


关于UIView Animation ,就写到这里了,附demo一份GitHub - Tony-iOS-Personal/AnimationDemo: 关于动画的总结demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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