iOS开发详解之几种基础动画篇

最新推荐文章于 2023-05-12 13:41:21 发布
最新推荐文章于 2023-05-12 13:41:21 发布
阅读量610 收藏 1
点赞数 1
分类专栏： ios 常用动画 文章标签： ios 常用动画 ios ios开发 用户体验 动画
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"];
    
}





w_qiang75
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS 最全动画教程（基础）
jone741852963的专栏
05-19 4951
IOS 最全动画教程（基础）大家好，做了这么久的iOS开发，没有系统性的总结过iOS某方面的知识点，总觉得有些地方还是不太了解，查阅各种资料，加上平时开发的经验，因此准备写关于动画系列的总结。作为开发者，我希望大家能尽可能的提高自己在APP动画方面的一些体验，多玩玩一些比较好的APP，在了解iOS动画的知识后，可以试着仿写一些动画设计。本教程的前半部分，我会大概介绍下IOS动画的整体框架，分为哪几个
iOS几种动画效果的实现
热门推荐
浅浅的博客
06-19 2万+
做过一个项目，里面涉及到的动画效果比较多，在这里做个小小的总结。 直线动画效果 实现一个物体在某段时间从一个点移动到另一个点。 效果如下： 动画相关代码如下： 动画模型： @interface AnimationModel : NSObject @property(nonatomic,strong) NSArray * images; @property(nonatomic,as...
IOS 基本动画（旋转、移动、闪烁、缩放等）
u013712343的博客
05-12 995
IOS 基本动画（旋转、移动、闪烁、缩放等）
iOS 使用六种方式实现动画
liubo的博客
03-11 1383
1，UIView 动画 [UIView animateWithDuration:4 animations:^{ self.button4.frame = CGRectMake(0, 200, 100, 100); }]; 2layer transform 动画 [UIView beginAnimations:nil context:UIGraphicsGetCurrentContext()]; [UIView setAnimationCurve.
IOS开发动画总结
weixin_30332241的博客
03-24 86
iOS开发中常用的动画方式一共有两种，UIView动画效果，还有核心动画。当然，还有另外一种叫做隐式动画，后续随手会介绍隐式动画。这里主要介绍UIView动画效果和简单的核心动画的使用。 1.直接使用UIView的动画 [UIView beginAnimations:nil context:nil]; /* 使用set方法设置动画的属性 */ ...
iOS的三种动画
MeteoriteMan的博客
01-26 315
iOS有三种动画.1.头尾式动画(不重要)基本上这些动画都是调用的UIView的方法.[UIView beginAnimations:nil context:nil];//准备开始动画[UIView setAnimationDuration:5];//设置时间[UIView commitAnimations];//提交动画(真正开始做动画)alpha = 0; // 透明度 取值范围 0 - 1(...
详解iOS 计步器的几种实现方式
08-29
本篇文章主要介绍了详解iOS 计步器的几种实现方式，详细的介绍了两种可以获取计步数据的方法，有兴趣的可以了解一下
iOS开发之表视图详解
09-01
表视图是iOS开发中最重要的视图，它以列表的形式展示数据。本篇文章详细的介绍了表视图的几种用法，有需要的小伙伴可以了解一下。
iOS应用程序之间的几种跳转情况详解
01-05
在iOS开发的过程中，我们经常会遇到比如需要从一个应用程序A跳转到另一个应用程序B的场景。这就需要我们掌握iOS应用程序之间的相互跳转知识。下面我们就常用到的几种跳转情况进行介绍。 一、跳转到另一个程序的主...
详解IOS点击空白处隐藏键盘的几种方法介绍
01-20
iOS开发中经常要用到输入框，默认情况下点击输入框就会弹出键盘，但是必须要实现输入框return的委托方法才能取消键盘的显示，对于用户体验来说很不友好，我们可以实现点击键盘以外的空白区域来将键盘隐藏，以下我...
iOS通过代理逆向传值的方式详解
01-05
在iOS开发中，常见的几种逆向传值方式，有代理（delegate）、通知(NSNotification)，block等等，本文就给大家分析下，如何理解和快速上手代理模式，并以一个简单的逆向传值为案例，看看代理模式是不是很难。...
iOS的几种动画
08-02
都是用animation写的几种动画效果,比如淡入淡出,延时滑动,点击颤抖等,所有动画写在一个登陆页面上.简单,实用
iOS六种动画效果的实现
06-21
demo实现了iOS中6种动画效果的实现。 直线动画效果、爆炸点赞动画效果、心跳（放大缩小）动画效果、上下浮动效果、图片序列gif效果和直线+Gif效果。 博客地址为：https://blog.csdn.net/aaaaazq/article/details/80736594
iOS 文字动画(每个字逐个显示)
01-16
基于两种思维方式的文字动画: 1.将每个字按照给定的时间逐个绘制; 2.在label上添加一个挡板
iOS 基本动画
12-07
移动，旋转，缩放，组合等ios的基本动画，代码不是我写的，网上别人的。
IOS中的几种动画的实现方式
anywhereIOS的博客
04-11 5792
在我们开发中,经常会遇到一些需要动画特效的展示,下面来总结一些开发中常见的动画实现方式 第一,序列帧动画,通过大量的UIImage来展示动画效果,网络请求等待加载动画效果 核心代码: //创建可变数组,存放UIImage对象 NSMutableArray *imageArray = [NSMutableArray array]; for (int i; i<= 39; i
iOS有几种动画，各自是什么？
weixin_34054866的博客
04-09 330
2019独角兽企业重金招聘Python工程师标准>>> ...
iOS中各种动画分类
xhl916235259的博客
09-29 618
在iOS中核心动画分为几类：基础动画(CABasicAnimation)、关键帧动画(CAKeyframeAnimation)、动画组(CAAnimationGroup)、转场动画(CATransition)  CAAnimation：核心动画的基础类，不能直接使用，负责动画运行时间、速度的控制，本身实现了CAMediaTiming协议。    CAPropertyAnimation： 属性
iOS开发之DeviceCheck框架的应用
最新发布
06-13
在iOS开发中，DeviceCheck框架可以用于以下几个方面： 1. 防止恶意用户多次注册或访问：开发人员可以使用DeviceCheck框架来验证设备是否已经注册或访问过某个服务或应用程序，从而防止恶意用户多次注册或访问。 2....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值