iOS动画简介

在iOS上实现动画效果,基本都是在一段给定的时间内完成状态的连续变化,包括背景色、Frame大小、位移、旋转、透明度、缩放等。

老的动画实现形式:

iOS 4.0之前,苹果提供的是类似于数据库中的事务编程的模式:

例如实现一个view的淡入效果,可以通过设置view的alpha实现(alpha = 1是全透明):

    [UIView beginAnimations:nil context: nil];

    [UIView setAnimationDuration:1.0];    //动画的时长是1s
    [UIView setAnimationDelay:0.0];  //不延时执行
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationStopped)];//动画完成后执行一些操作
    self.view.alpha = 0.0;//最终的alpha为0,不透明
    self.view.frame = CGRectMake(10, 10, 50, 50);//最终的frame

    [UIView commitAnimations];//提交动画

实现了一个1s中的动画,将view的透明度设为不透明,frame设为(10,10,50,50)。

beginAnimations标识开始动画,然后设置动画的各种属性,最后通过commitAnimations提交动画,之后系统接管该动画并执行。

Block动画实现形式:

iOS4.0之后,苹果提供了一组重载函数,实现了以block的形式执行动画:

(void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
(void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
(void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
(void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

比如下面这样:

+ (void)fadeIn: (UIView *)view andAnimationDuration: (float) duration{
    [view setAlpha:0.0];
    NSLog(@"begin animation");
    [UIView animateWithDuration:duration animations:^{
        [view setAlpha:1.0];
        NSLog(@"in animation block");
    } completion:^(BOOL finished) {
        NSLog(@"completion animation");
    }];
    NSLog(@"exit fadeIn");
}

通过参数duration、delay、options等分别设置动画的时间、延时、执行选项。

在block animations中实现动画的主体,在block completion中实现动画完成后需要执行的逻辑。之所以有completion,是给我们一个在动画跑完成后执行一些逻辑的入口(老的动画方式通过setAnimationDidStopSelector实现)。

假如你想在动画执行完成后做一些事情,那么把代码放在NSLog(@"in animation block")和NSLog(@"exit
fadeIn")是有本质区别的。因为我们把动画组装好后就交给操作系统了,会立刻走到NSLog(@"exit fadeIn"),并不会阻塞主线程流程。

completion block会有一个BOOL类型参数,用来告知动画是否真的执行完成了。这个参数的意义在于我们可以在completion中判断之前的动画是否真的执行完了,因为动画是有可能被取消的(可以通过[view.layer removeAllAnimations]取消动画),但无论是否取消,系统都会调用completion告知动画执行结束(想象扔手雷的场景,在与地面发生碰撞时手雷飞行的动画结束,接下来要执行爆炸的动画,但如果手雷飞行时被人接住,那么就需要取消飞行动画,至于后面是否爆炸......)。甚至如果我们设置了动画执行的时间duration是0时,completion也会被调用(虽然duration是0,但仍是异步的,系统会在下一个消息循环的开始时立刻调用completion),此时BOOL参数仍然是YES。

前面说到提交动画给系统后,动画并不会阻塞主线程,但有时候我们希望在动画结束前不要有其他逻辑进来,这可以通过在提交动画后执行消息循环轮询变量状态实现:

+ (void)fadeIn: (UIView *)view andAnimationDuration: (float) duration andWait:(BOOL) wait{
    __block BOOL done = wait; //wait =  YES wait to finish animation
    [view setAlpha:0.0];
    [UIView animateWithDuration:duration animations:^{
        [view setAlpha:1.0];
    } completion:^(BOOL finished) {
        done = NO;
    }];
    // wait for animation to finish
    while (done == YES)
        [[NSRunLoop currentRunLoop] runUntilDate:[NSDate dateWithTimeIntervalSinceNow:0.01]];
}

常见的动画实现:

缩放--改变view.transform

view.transform = CGAffineTransformMakeScale(0, 0);
    [UIView animateWithDuration:duration animations:^{
        view.transform = CGAffineTransformIdentity;

    } completion:^(BOOL finished) {
    }];

淡入淡出--改变view.alpha

[view setAlpha:0.0];
    [UIView animateWithDuration:duration animations:^{
        [view setAlpha:1.0];
    } completion:^(BOOL finished) {
    }];

位置移动--改变view.center

[UIView animateWithDuration:duration animations:^{
        view.center = CGPointMake(view.center.x - length, view.center.y);

    } completion:^(BOOL finished) {
    }];

旋转--改变view.transform

[UIView animateWithDuration:duration animations:^{
        view.transform = CGAffineTransformMakeRotation(degreesToRadians(angle));
    } completion:^(BOOL finished) {
    }];

动画嵌套:

在一个动画执行完成后继续执行动画,甚至执行多个动画形成动画链:

这个带回弹的气泡弹出动画通过串行的3个改变view缩放值的动画实现,在completion中继续一个新的动画。

self.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
    __unsafe_unretained NearbyGroupMapAnnotationView* reself = self;
    [UIView animateWithDuration:0.3/1.5 animations:^{
        reself.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3/2 animations:^{
            reself.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3/2 animations:^{
                reself.transform = CGAffineTransformIdentity;
            }];
        }];
    }];

首先将view缩放到正常状态的0.001倍作为初始态,

动画1:开始将view放到到1.1倍

动画2:将view缩小到0.9倍

动画3:将view回复正常大小

减速动画

(void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

这个函数可以通过下面两个很有意思的参数实现类似弹簧的效果(带加速度):

usingSpringWithDamping:(CGFloat)dampingRatio
initialSpringVelocity:(CGFloat)velocity

上图中有两个动画效果,一个是平稳的减速停止,一个是减速后带有回弹(类似碰撞)。

usingSpringWithDamping标识了弹簧的强度,介于0~1之间为1时,动画将会平滑且没有上下摆动的减速到他的最终状态,当该值小于1时,动画的摆动会越来越厉害。

initialSpringVelocity用来标识view开始收到弹簧作用力时的速度介于0~1之间,假设整个动画将移动100,当取1时,表示速度为100/1s。initialSpringVelocity越小速度越小。

其实,不用上面这个复杂的方法,通过串行多个相反方向的位移动画,(分别控制他们的动画时间模拟加速度),也可以实现回弹的效果。

时间: 2024-10-13 15:13:21

iOS动画简介的相关文章

IOS开发核心动画篇---核心动画简介

iOS开发UI篇—核心动画简介 一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation是跨平台的,可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.不阻塞主线程,可以理解为在执行动画的时候还能点击(按钮). 要注意的是,Core Animation是直接作用

iOS开发UI篇—核心动画简介

iOS开发UI篇—核心动画简介 一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation是跨平台的,可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.不阻塞主线程,可以理解为在执行动画的时候还能点击(按钮). 要注意的是,Core Animation是直接作用

猫猫学IOS(三十八)UI之核心动画简介

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 核心动画(简介) Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操

iOS动画开发之一——UIViewAnimation动画的使用

iOS动画开发之一--UIViewAnimation动画的使用 一.简介 一款APP的成功与否,除了完善的功能外,用户体验也占有极大的比重,动画的合理运用,可以很好的增强用户体验.iOS开发中,常用的动画处理有UIView动画编程和核心动画编程,其中UIView动画使用简便,开发中应用十分广泛.这篇博客,主要讨论UIView的动画使用. 二.UIView动画的几个方法 + (void)animateWithDuration:(NSTimeInterval)duration animations:

简析iOS动画原理及实现——Core Animation

本文转载至 http://www.tuicool.com/articles/e2qaYjA 原文  https://tech.imdada.cn/2016/06/21/ios-core-animation/ 主题 Core Animation 背景 随着达达业务的扩大,越来越多的人开始使用达达客户端,参加到众包物流的行业中.达达客户端分为iOS平台和安卓平台. APP开发也从快速迭代的粗旷性开发转向高可复用,提升用户提现的精细化方向发展.iOS动画交互良好,使用广泛,良好的用户体验离不开流畅的界

IOS动画(Core Animation)总结 (参考多方文章)

一.简介 iOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加

核心动画简介

核心动画简介 一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation是跨平台的,可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.不阻塞主线程,可以理解为在执行动画的时候还能点击(按钮). 要注意的是,Core Animation是直接作用在CALayer上

iOS动画(Core Animation)使用

一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加

iOS动画大全

一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide.Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速