iOS 动画篇----UIView动画

最新推荐文章于 2024-07-11 20:41:07 发布

LOLITA0164

最新推荐文章于 2024-07-11 20:41:07 发布

阅读量1.8w

点赞数 1

分类专栏： iOS_基础篇文章标签： ios 动画

iOS_基础篇专栏收录该内容

53 篇文章 1 订阅

订阅专栏

一、UIView动画介绍

UIView动画实质上是对Core Animation的封装，提供简洁的动画接口。

我们可以同过UIView的动画类别来改变控件的frame、bounds、transform、alpha等等，使用界面看起来跟流畅优雅，增加用户交互上等体验。

二、UIView 类方法动画

1、方法解析：

// 动画开始。animationID：动画标识、context：附加参数在设置了代理的情况下，此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情况下，我们设置为nil即可。
+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context; 
// 提交动画。动画的相关设置必须在开始设置动画和结束动画之间，否则无效
+ (void)commitAnimations;  
// 设置动画的代理
+ (void)setAnimationDelegate:(nullable id)delegate; 
// 动画开始触发的方法
+ (void)setAnimationWillStartSelector:(nullable SEL)selector; 
// 动画结束触发的方法
+ (void)setAnimationDidStopSelector:(nullable SEL)selector;  
// 动画持续时间
+ (void)setAnimationDuration:(NSTimeInterval)duration; 
// 动画执行前的延迟时间
+ (void)setAnimationDelay:(NSTimeInterval)delay;
// 动画开始的日期
+ (void)setAnimationStartDate:(NSDate *)startDate;
// 动画的速率类型，有四种类型
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;  
// 动画重复的次数
+ (void)setAnimationRepeatCount:(float)repeatCount; 
// 动画是否继续执行相反的动画
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;
// 是否从当前状态开始播放动画
+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; 
// 是否禁用动画效果（对象属性依然会被改变，只是没有动画效果）
+ (void)setAnimationsEnabled:(BOOL)enabled;  
// 设置视图的过渡效果
/*
第一个参数：UIViewAnimationTransition的枚举值如下
          UIViewAnimationTransitionNone,              //不使用动画
          UIViewAnimationTransitionFlipFromLeft,      //从左向右旋转翻页
          UIViewAnimationTransitionFlipFromRight,     //从右向左旋转翻页
          UIViewAnimationTransitionCurlUp,            //从下往上卷曲翻页
          UIViewAnimationTransitionCurlDown,          //从上往下卷曲翻页
     第二个参数：需要过渡效果的View
     第三个参数：是否使用视图缓存，YES：视图在开始和结束时渲染一次；NO：视图在每一帧都渲染
*/
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;

2、使用示例，以frame为例

// 说明需要执行动画
[UIView beginAnimations:nil context:nil];
// 设置动画时间
[UIView setAnimationDuration:1.0];
// 设置速度
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
// 设置动画代理
[UIView setAnimationDelegate:self];
// 动画开始执行某个函数
[UIView setAnimationWillStartSelector:@selector(aniStart)];
// 动画结束执行某个函数
[UIView setAnimationDidStopSelector:@selector(aniStop)];
// 设置动画延迟执行
// [UIView setAnimationDelay:1.0];
// 重复次数
// [UIView setAnimationRepeatCount:2.0];
// 是否反方向执行动画
// [UIView setAnimationRepeatAutoreverses:YES];
// 相关属性设置                     
self.testView.transform = CGAffineTransformMakeScale(1.2, 2.0);
// 提交动画
[UIView commitAnimations];

----------

-(void)aniStart{
    NSLog(@"动画开始了");
}

-(void)aniStop{
    NSLog(@"动画结束了");
    NSLog(@"testView改变后的frame为：%@",NSStringFromCGRect(self.testView.frame));
}

三、UIview Block动画

iOS4.0以后，增加了Block动画块，提供更简洁的方式来实现动画。

方法解析

1、基础动画

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

[UIView animateWithDuration:(NSTimeInterval) // 动画执行时间
                          delay:(NSTimeInterval) // 延迟时间
                        options:UIViewAnimationOptions)  // 动画的效果
                     animations:^{
                         // 你的code
                     } completion:^(BOOL finished) {
                         // 动画执行完成
                     }];

UIViewAnimationOptions的枚举值如下，可组合使用：

UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction      //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画 UIViewAnimationOptionRepeat                    //无限重复执行动画
UIViewAnimationOptionAutoreverse               //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套动画的曲线设置 UIViewAnimationOptionAllowAnimatedContent      //转场：进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews   //转场：移除（添加和移除图层的）动画效果
UIViewAnimationOptionOverrideInheritedOptions  //不继承父动画设置

UIViewAnimationOptionCurveEaseInOut            //时间曲线，慢进慢出（默认值）
UIViewAnimationOptionCurveEaseIn               //时间曲线，慢进
UIViewAnimationOptionCurveEaseOut              //时间曲线，慢出
UIViewAnimationOptionCurveLinear               //时间曲线，匀速

UIViewAnimationOptionTransitionNone            //转场，不使用动画
UIViewAnimationOptionTransitionFlipFromLeft    //转场，从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight   //转场，从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp          //转场，下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown        //转场，从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve   //转场，交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop     //转场，从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom  //转场，从下向上旋转翻页

b、带有动画完成回调的Block动画

// delay = 0.0, options = 0
[UIView animateWithDuration:(NSTimeInterval)  //动画持续时间
                  animations:^{
                     //执行的动画
                 } completion:^(BOOL finished) {
                    //动画执行完毕后的操作
                 }];

c、最简洁的Block动画：只包含时间和动画

// delay = 0.0, options = 0, completion = NULL
[UIView animateWithDuration:(NSTimeInterval)  //动画持续时间
                  animations:^{
                      //执行的动画
                }];

简单使用

// 缩放控件的frame
[UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    self.testView.transform = CGAffineTransformMakeScale(0.8, 1.5);
} completion:^(BOOL finished) {
    NSLog(@"frame动画--执行完毕!!");
}];

2、Spring动画（iOS7.0后新增Spring动画）

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

简单使用

/ 弹簧式动画块
[UIView animateWithDuration:2.0 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseOut animations:^{
    self.testView.y = self.testView.y+100;
} completion:^(BOOL finished) {
    DSLog(@"弹簧式动画--执行完毕!!");
}];

3、Keyframes动画（iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧）

[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
                                delay:(NSTimeInterval)//动画延迟执行的时间
                              options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
                           animations:^{
                             //执行的关键帧动画
                         }
                           completion:^(BOOL finished) {
                             //动画执行完毕后的操作
                        }];

UIViewKeyframeAnimationOptions的枚举值如下，可组合使用：

UIViewAnimationOptionLayoutSubviews           //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction     //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState    //从当前状态开始动画
UIViewAnimationOptionRepeat                   //无限重复执行动画
UIViewAnimationOptionAutoreverse              //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewKeyframeAnimationOptionCalculationModeLinear     //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced      //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic      //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀

增加关键帧的方法：

[UIView addKeyframeWithRelativeStartTime:(double)//动画开始的时间（占总时间的比例）
                         relativeDuration:(double) //动画持续时间（占总时间的比例）
                               animations:^{
                             //执行的动画
                         }];

简单使用，改变颜色

// 关键帧动画
[UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
    self.centerShow.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
        }];
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
    self.centerShow.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
        }];
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
    self.centerShow.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
        }];
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
    self.centerShow.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
        }];
} completion:^(BOOL finished) {
        NSLog(@"动画结束");
}];

4、转场动画

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

[UIView transitionFromView:(nonnull UIView *)
                     toView:(nonnull UIView *)
                   duration:(NSTimeInterval)
                    options:(UIViewAnimationOptions)
                 completion:^(BOOL finished) {
                     //动画执行完毕后的操作
                 }];

在该动画过程中，fromView 会从父视图中移除，并将 toView 添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）。
调用该方法相当于执行下面两句代码：

[fromView.superview addSubview:toView];
[fromView removeFromSuperview];

b、单个视图的过渡效果

[UIView transitionWithView:(nonnull UIView *)
                   duration:(NSTimeInterval)
                    options:(UIViewAnimationOptions)
                 animations:^{
                     //执行的动画
                 }
                 completion:^(BOOL finished) {
                     //动画执行完毕后的操作
                 }];

简单使用

// 单个视图的过渡效果
[UIView transitionWithView:self.centerShow duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        self.centerShow.image = [UIImage imageNamed:@"Service"];
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];

----------

// 从旧视图转到新视图的动画效果
UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.centerShow.frame];
    newCenterShow.image = [UIImage imageNamed:@"Service"];
    [UIView transitionFromView:self.centerShow toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];

四、转载地址

1、iOS动画篇：UIView动画

LOLITA0164

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS 动画篇----UIView动画

一、UIView动画介绍UIView动画实质上是对Core Animation的封装，提供简洁的动画接口。我们可以同过UIView的动画类别来改变控件的frame、bounds、transform、alpha等等，使用界面看起来跟流畅优雅，增加用户交互上等体验。二、UIView 类方法动画1、方法解析：// 动画开始。animationID：动画标识、context：附加参数在设置了代理的情况下，此
复制链接

扫一扫