iOS程序猿之iOS动画基础

关注

原创最新推荐文章于 2026-05-24 10:51:26 发布 694 阅读 AI 写同款· GEO 优化 ›

iOS开发 ----- UIViewController转场动画 UIViewController的转场动画1. 自从开始看UI,就一直有个问题,就是类似微信的那个页面切换的效果怎么实现,也就是这个效果想过ScrollerView,但这样的话,会增大VC之间的耦合度,导致管理起来很混乱,在加上tableView的话,分分钟不想写的节奏啊,于是乎开始爬各种博客,终于,找到了目前认为最完美的解决方案,这样写的话,可以完美的实现这样的效果,且VC之间的耦合度时最低的 D 阅读详情

iOS 中的动画是指一些视图上的过渡效果,合理利用动画能提高用户体验!

第一类: UIView 动画

UIView动画影响的属性有:

frame: 视图框架
center: 视图的位置
alpha: 视图的透明度
bounds: 视图的大小
transform: 视图的装换
backgroundColor: 背景色

UIView动画块的用法:(特点:全是类方法调用,结构上类似与自动释放池,开始与结束之间的部分是动画改变的部分)

UIView动画的几种设置方法:

动画的开始

    // 参数1:标识符(名字)
    // 参数2:携带的参数
    [UIView beginAnimations:@"UIView" context:nil];

动画持续时间:

    // 设置时间, 在多少秒钟完结动画
    [UIView setAnimationDuration:3];

动画开始前延时:

    // 设置动画延迟, 延迟多少秒开始
    [UIView setAnimationDelay:0];

动画的速度曲线

    // 设置速度曲线
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn]

动画的反转

    // 设置反转
    [UIView setAnimationRepeatAutoreverses:YES];

动画的循环次数

    // 设置循环执行
    [UIView setAnimationRepeatCount:1];

设置动画的代理

    // 设置代理
    [UIView setAnimationDelegate:self];

动画开始的代理方法

    [UIView setAnimationWillStartSelector:@selector(willStart)];

动画结束的代理方法

    [UIView setAnimationWillStartSelector:@selector(willStart)];

动画从当前状态继续执行

    // 设置持续执行动画
    [UIView setAnimationBeginsFromCurrentState:YES];

动画提交

    // 3.动画提交
    [UIView commitAnimations];

UIView 动画的两种 block方法:

普通的 block 方法

    [UIView animateWithDuration:1 animations:^{
        // 执行的动画
        _imageView.center = CGPointMake(200, 400);
    }];

较常用的 block 方法(该 block 写动画结束后改做的事)

    // 参数3:该 block 写动画结束后改做的事
    [UIView animateWithDuration:1 animations:^{
        // 如果设置了反转属性,那么在动画结束后不用在另行添加动画效果了
        [UIView setAnimationRepeatAutoreverses:YES];
        // 这里写执行的动画
        
    } completion:^(BOOL finished) {
        // 上面动画结束触发(相当于 代理方法中的完成动画的方法)
        // 还可以继续添加其他的动画
        [UIView animateWithDuration:1 animations:^{
        } completion:^(BOOL finished) {

        }];

    }];

几种CGAffineTransform2D仿射变换

平移

#pragma mark - 平移(2D仿射变换方法)
     
    // 参数3:该 block 写动画结束后改做的事
    [UIView animateWithDuration:1 animations:^{
        // 如果设置了反转属性,那么在动画结束后不用在另行添加动画效果了
        [UIView setAnimationRepeatAutoreverses:YES];
        // 执行的动画
        
        // 平移(2D仿射变换方法)
        // transform 形变属性
        // 参数1:填要形变的 View
        self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 100, 0);
        
    } completion:^(BOOL finished) {
        // 上面动画结束触发(相当于 代理方法中的完成动画的方法)
        // 复原位置
        self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -100, 0);

        
    }];

缩放

#pragma mark - 缩放(2D仿射变换方法)

    [UIView animateWithDuration:1 animations:^{
        
        // 反转
        [UIView setAnimationRepeatAutoreverses:YES];
        
        // 缩放(2D仿射变换方法)
        // 参数2/3 是缩放的比例
        self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 2, 2);
        
    } completion:^(BOOL finished) {
        self.imageView.transform = _transform;
    }];

旋转

#pragma mark - 旋转(2D仿射变换方法)
    
    // 需求:
    // 点击按钮,开始旋转,再点停止转动
    
    [UIView animateWithDuration:0.1 animations:^{
        // 旋转
        // 参数二:旋转角度
        self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_2);
    } completion:^(BOOL finished) {
        // 结束时调用旋转方法
        [self rotateAnimation];
    }];
    
  
    _isRuning = !_isRuning;
}

// 循环转
- (void)rotateAnimation
{
    if (_isRuning == YES) {
        [UIView animateWithDuration:0.1 animations:^{
            // 旋转
            // 参数二:旋转角度
            self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_2);
            // 给旋转的初值
            self.isRuning = YES;
        } completion:^(BOOL finished) {
            // 结束时调用旋转方法
            [self rotateAnimation];
        }];
    }
}

实现两个视图控制器的界面动画跳转

需要创建一个控制器,把要实现跳转的两个控制器的 self.view 添加到这个控制器上

#import "RootViewController.h"
#import "SecondViewController.h"
#import "ThirdViewController.h"

@interface RootViewController ()

// 声明两个控制器
@property (nonatomic, retain) SecondViewController *secondVC;
@property (nonatomic, retain) ThirdViewController *thirdVC;
// 声明一个状态标识,标识显示哪个 View
@property (nonatomic, assign) BOOL isShowSecondVC;

@end

@implementation RootViewController

- (void)dealloc
{
    [_secondVC release];
    [_thirdVC release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor yellowColor];
    
    [self addChildViews];
    [self addButtonItem];
}

// 添加控制器并显示视图
- (void)addChildViews
{
    // 创建 thirdVC
    self.thirdVC = [[ThirdViewController alloc] init];
    // 把该控制器添加到 rootVC的子控制器
    <span style="color:#FF0000;">[self addChildViewController:self.thirdVC];</span>
    // 把 secondVC.view 显示出来
    <span style="color:#FF0000;">[self.view addSubview:self.thirdVC.view];</span>
    [_thirdVC release];
    
    // 创建控制器
    self.secondVC = [[SecondViewController alloc] init];
    // 把该控制器添加到 rootVC的子控制器
    <span style="color:#FF0000;">[self addChildViewController:self.secondVC];</span>
    // 把 secondVC.view 显示出来
    <span style="color:#FF0000;">[self.view addSubview:self.secondVC.view];</span>
    [_secondVC release];
    
    // 给标识一个初值
    self.isShowSecondVC = YES;
}

// 添加按钮
- (void)addButtonItem
{
    UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithTitle:@"跳转" style:UIBarButtonItemStylePlain target:self action:@selector(actionButton:)];
    self.navigationItem.leftBarButtonItem = button;
    [button release];
}

// 实现视图切换
- (void)actionButton:(UIBarButtonItem *)button
{
    if (_isShowSecondVC == YES) {
        
        <span style="color:#FF0000;">[UIView transitionFromView:self.secondVC.view toView:self.thirdVC.view duration:1 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
        }];</span>
    } else {
        // 切换过来
        // UIView 切换动画
        <span style="color:#FF0000;">[UIView transitionFromView:self.thirdVC.view toView:self.secondVC.view duration:1 options:UIViewAnimationOptionTransitionFlipFromRight completion:^(BOOL finished) {
        }];</span>
    }
    
    // 更改标识符状态
    _isShowSecondVC = !_isShowSecondVC;
    
}

CALayer 的基本属性

// 创建视图
- (void)addSubViews
{
    self.myView = [[UIView alloc] initWithFrame:CGRectMake(100, 150, 100, 100)];
    self.myView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:self.myView];
    [_myView release];
    
    
    // layer 是负责显示图层的
    // 要更改看到的形状,需要更改 layer
    
    // 设置圆角
    // 变圆的先决条件必须是长宽相同
    self.myView.layer.cornerRadius = self.myView.frame.size.width / 2;
    // 设置阴影的颜色
    // CGColorRef 是涂层绘制的颜色
    self.myView.layer.shadowColor = [UIColor yellowColor].CGColor;
    // 设置阴影的显示范围
    self.myView.layer.shadowOffset = CGSizeMake(10, 10);
    // 阴影透明度
    self.myView.layer.shadowOpacity = 1;
    // 模糊程度
    self.myView.layer.shadowRadius = 50;
    // 设置边框
    self.myView.layer.borderWidth = 5;
    // 设置边框的颜色
    self.myView.layer.borderColor = [UIColor redColor].CGColor;

layer 层动画

CAPropertyAnimation 是一个抽象类
CABasicAnimation 基础动画, 能实现类似:更改大小,旋转等动画
CAKeyframeAnimation 主要能实现类似按轨迹移动, 位置, 执行一组动画(背景颜色)

几种常用的 layer 层动画

旋转

// 旋转
- (void)xyAnimation
{
    // 创建一个基础动画
    // 注意: KeyPath 一定不要拼错
    // 要更改的是 transform.rotation.x
    // 形变属性下 弧度的点 X 轴
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    // 设置属性变化 到什么值
    // toValue 需要一个对象类型,即 NSNumber 或 NSValue
    animation.toValue = [NSNumber numberWithFloat:M_PI];
    // 设置动画时间
    animation.duration = 1;
    // 设置动画重复
    animation.repeatCount = 2;
    
    // 把设置好的动画添加到 layer上
    // 参数2:添加的动画标识
    [self.myView.layer addAnimation:animation forKey:@"transform.rotation.x"];
    
}

改变 size

// 改变 size
- (void)sizeAnimation
{
    // 更改大小的话,需要更改 bounds.size
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    // 设置改变的值
    // fromValue 初始值
    animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
    // toValue 结束值
    animation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    // 设置时间
    animation.duration = 1;
    // 添加到 layer 上
    [self.myView.layer addAnimation:animation forKey:@"bounds.size"];
}

改变颜色

// 改变颜色
- (void)changeBackGroundColor
{
    // 可以执行一组动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
    
    // 创建绘制颜色
    CGColorRef color1 = [UIColor orangeColor].CGColor;
    CGColorRef color2 = [UIColor lightGrayColor].CGColor;
    CGColorRef color3 = [UIColor greenColor].CGColor;
    CGColorRef color4 = [UIColor blueColor].CGColor;

    // 改变一组颜色
    animation.values = @[(id)color1, (id)color2, (id)color3, (id)color4];
    
    // 设置时间
    animation.duration = 2;
    // 添加到 layer 上
    [self.myView.layer addAnimation:animation forKey:@"backgroundColor"];
    
}

轨迹移动

// 轨迹移动
- (void)positionPoint
{
//    NSLog(@"%@", NSStringFromCGPoint(self.myView.layer.position));
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 创建一堆点
    NSValue *point1 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *point2 = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
    NSValue *point3 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *point4 = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    NSValue *point5 = [NSValue valueWithCGPoint:CGPointMake(100, 400)];

    // 添加点进数组
    animation.values = @[point1, point2, point3, point4, point5];
    
    // 设置时间
    animation.duration = 1;
    // 添加到 layer上
    [self.myView.layer addAnimation:animation forKey:@"position"];
}

左右晃动

// 左右晃动
- (void)positionX
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    
    CGFloat center = self.myView.layer.position.x;
    CGFloat left = center - 100;
    CGFloat right = center + 100;
    
    NSNumber *r = [NSNumber numberWithFloat:right];
    NSNumber *c = [NSNumber numberWithFloat:center];
    NSNumber *l = [NSNumber numberWithFloat:left];
    animation.values = @[r, c, l, c];
    // 设置时间
    animation.duration = 0.5;
    // 设置重复次数
    animation.repeatCount = 1000;
    // 添加到 layer上
    [self.myView.layer addAnimation:animation forKey:@"position.x"];
}

3D 旋转

#pragma mark - 3D旋转
- (void)transform3D
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    
    // 结束值
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.myView.layer.transform, M_PI, 10, 20, 20)];
    
    animation.duration = 1;
    
    [self.myView.layer addAnimation:animation forKey:@"transform"];
}

组动画

#pragma mark - 组动画
- (void)groupAnimation
{
    // 创建组动画
    CAAnimationGroup *group = [CAAnimationGroup animation];
    
//////////////////////////////////////改变颜色/////////////////////////////////////////
    // 改变颜色
    // 可以执行一组动画
    CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
    // 创建绘制颜色
    CGColorRef color1 = [UIColor orangeColor].CGColor;
    CGColorRef color2 = [UIColor lightGrayColor].CGColor;
    CGColorRef color3 = [UIColor greenColor].CGColor;
    CGColorRef color4 = [UIColor blueColor].CGColor;
    // 改变一组颜色
    animation1.values = @[(id)color1, (id)color2, (id)color3, (id)color4];
    
    
    
    
//////////////////////////////////////改变大小/////////////////////////////////////////
    
    
    // 更改大小的话,需要更改 bounds.size
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    // 设置改变的值
    // fromValue 初始值
    animation2.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
    // toValue 结束值
    animation2.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    
    // 设置组动画时间
    group.duration = 3;
    // 设置组动画执行的动画数组
    group.animations = @[animation1, animation2];
    // 添加到 layer 上
    [self.myView.layer addAnimation:group forKey:@"group"];
    
}