iOS动画——基础动画UIView Animation

。。。。没有好的开头,那就直接开始

iOS动画

这篇文章我肯可以只看红框圈的,基础动画即可,核心动画将在iOS动画——核心动画Core Animation中提到

UIView Animation

  1. UIView(UIViewAnimation)

主要使用下面两个方法设置

+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;
+ (void)commitAnimations; 

具体使用看Demo

#pragma mark -- UIViewAnimation
- (void)startAnimation {
    [UIView beginAnimations:@"UIViewAnimation" context:(__bridge void * _Nullable)(self)];
    [UIView setAnimationDuration:2.0];
    [UIView setAnimationDelay:0.0];
    [UIView setAnimationRepeatCount:2];
    [UIView setAnimationRepeatAutoreverses:YES];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    [UIView setAnimationDelegate:self];
    self.redView.center = CGPointMake(300, 300);
    [UIView commitAnimations];
}

参数的使用

//    duration : 动画运行时间
+ (void)setAnimationDuration:(NSTimeInterval)duration;
//     delay : 动画开始到执行的时间间隔
+ (void)setAnimationDelay:(NSTimeInterval)delay;   
/* UIViewAnimationCurve 表示动画的变化规律:
     UIViewAnimationCurveEaseInOut: 开始和结束时较慢
     UIViewAnimationCurveEase: 开始时较慢
     UIViewAnimationCurveEaseOut: 结束时较慢
     UIViewAnimationCurveLinear: 整个过程匀速进行
*/
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;              
//    repeatCount:动画重复次数
+ (void)setAnimationRepeatCount:(float)repeatCount;    
//    Autoreverse 执行动画回路,前提是设置动画无限重复
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 
  1. UIView(UIViewAnimationWithBlocks)

主要使用接口

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

使用见Demo

#pragma mark -- UIViewAnimationWithBlocks
- (void)animationWithBlocks {
//    duration持续时间,delay延迟时间,UIViewAnimationOptions枚举项和completion动画结束的回调
#if 0
    [UIView animateWithDuration:2.0 animations:^{
        self.redView.center = CGPointMake(300, 300);
    }];
#elif 0
    [UIView animateWithDuration:2.0 animations:^{
        self.redView.center = CGPointMake(300, 300);
    } completion:^(BOOL finished) {
        self.redView.center = CGPointMake(300, 500);
    }];
#elif 0
    [UIView animateWithDuration:3.0
                          delay:2.0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
        self.redView.center = CGPointMake(300, 300);
    } completion:^(BOOL finished) {
        self.redView.center = CGPointMake(300, 500);
    }];
#elif 1
//    springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。
//    initialSpringVelocity:视图在动画开始时的速度,>= 0。
    [UIView animateWithDuration:3.0
                          delay:1.0
         usingSpringWithDamping:0.2
          initialSpringVelocity:10
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         self.redView.center = CGPointMake(300, 300);
                     } completion:nil];
#endif
}

参数解释

duration :持续时间
delay :延迟时间
UIViewAnimationOptions :枚举项
{
- 动画效果相关
UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 
UIViewAnimationOptionRepeat //动画无限重复 
UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 
UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线 
UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照 
UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果 
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
- 时间函数曲线相关
UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快 
UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快 
UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢 
UIViewAnimationOptionCurveLinear //时间曲线函数,匀速
- 转场动画相关
UIViewAnimationOptionTransitionNone //无转场动画 
UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转 
UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转 
UIViewAnimationOptionTransitionCurlUp //上卷转场 
UIViewAnimationOptionTransitionCurlDown //下卷转场 
UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失 
UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转 
UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
}
completion :动画结束的回调
springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。
initialSpringVelocity:视图在动画开始时的速度,>= 0。

还有两个转场动画,

view: 需要转换的视图
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
fromView: 开始的视图
toView:转换后的视图
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
  1. UIView (UIViewKeyframeAnimations)

关键帧动画

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0); 

Demo

#pragma mark -- UIViewKeyframeAnimations
- (void)viewKeyframeAnimations {
#if 0
    [UIView animateKeyframesWithDuration:3.0
                                   delay:1.0
                                 options:UIViewKeyframeAnimationOptionLayoutSubviews
                              animations:^{
                                  self.redView.center = CGPointMake(300, 300);
                              } completion:nil];
#elif 1
    [UIView animateKeyframesWithDuration:3.0
                                   delay:1.0
                                 options:UIViewKeyframeAnimationOptionLayoutSubviews
                              animations:^{
                                  [UIView addKeyframeWithRelativeStartTime:0.8
                                                          relativeDuration:0.2
                                                                animations:^{
                                                                    self.redView.center = CGPointMake(300, 500);
                                                                }];
                              } completion:nil];
#endif
}

参数说明

duration: 持续时间
delay: 等待时间
relativeStartTime:是相对起始时间,表示该关键帧开始执行的时刻在整个动画持续时间中的百分比,取值范围是[0-1]
relativeDuration:是相对持续时间,表示该关键帧占整个动画持续时间的百分比,取值范围也是[0-1]
UIViewKeyframeAnimationOptions:枚举
{
UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。 
UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 
UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画 
UIViewKeyframeAnimationOptionRepeat //动画无限重复 
UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 
UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 
UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的�选项 关键帧动画独有 
UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。 
UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。 
UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。 
UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些.. 
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
}

特别的两个

+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0);
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray<__kindof UIView *> *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

网上查阅资料:
1.删除视图上的子视图 animation这个枚举只有一个删除值...
views操作的view 这会让那个视图变模糊、收缩和褪色, 之后再给它发送 removeFromSuperview 方法。
2.在动画block中不执行动画的代码.

    {
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
        view.backgroundColor = [UIColor orangeColor];
        UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
        [view addSubview:view_1];
        view_1.backgroundColor = [UIColor redColor]; [self.view addSubview:view];
        [UIView animateKeyframesWithDuration:3
                                       delay:3
                                     options:UIViewKeyframeAnimationOptionRepeat|UIViewKeyframeAnimationOptionAutoreverse
                                  animations:^{
                                      view.frame = CGRectMake(100, 100, 50, 50);
                                      [UIView performWithoutAnimation:^{
                                          view.backgroundColor = [UIColor blueColor];
                                      }];
                                  } completion:^(BOOL finished) {
                                      
                                  }];
        [UIView performSystemAnimation:UISystemAnimationDelete
                               onViews:@[view_1]
                               options:0
                            animations:^{
                                view_1.alpha = 0;
                            }
                            completion:^(BOOL finished) {
                            }];
        
    }

Demo 地址

Core Animation

后续。。。iOS动画——核心动画Core Animation

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

推荐阅读更多精彩内容