IOS开发--IOS动画基础篇

作为一个IOS开发者,你肯定会遇到很多需求,比如。。。动画
一些简单的动画比如:放大、缩小、动画直线位移·······
一些稍微复杂的动画比如:抖动、动画曲线位移······
一些动画的组合:放大位移,放大连续位移等等······
现在就给大家讲一下一些动画的用法

Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架。Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果。Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速图形渲染的速度。不会加重CPU的负担而影响程序的运行速度。(非常重要)因为往往画图往往会加重CPU的负担,但如果交给GPU处理的话,无疑会很好的解决这个问题,所以很推荐这个方法

Core Animation类的继承关系图

开发的常用属性

duration : 动画的持续时间
beginTime : 动画的开始时间
repeatCount : 动画的重复次数
autoreverses : 执行的动画按照原动画返回执行
timingFunction : 控制动画的显示节奏系统提供五种值选择,分别是:

  • kCAMediaTimingFunctionLinear 线性动画
  • kCAMediaTimingFunctionEaseIn 先慢后快(慢进快出)
  • kCAMediaTimingFunctionEaseOut 先块后慢(快进慢出)
  • kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
  • kCAMediaTimingFunctionDefault 默认,也属于中间比较快

delegate : 动画代理。能够检测动画的执行和结束。

代理执行的开始和结束动画动作:
(CAAnimationDelegate)
 - (void)animationDidStart:(CAAnimation *)anim;
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

IOS动画的调用方式

  1. 第一种:UIView 代码块调用
  • UIKit动画API使用起来十分简单与方便,他避免了Core Animation的复杂性,虽然事实上UIKit动画API的底层使用的也是Core Animation。(UIView的方法很多,这篇文章主要会介绍基础的用法 Core Animation 这个简单举个例子,UI View会在接下来的文章里详细讲述)
    _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
    [UIView animateWithDuration:1.0f animations:^{
        _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
    } completion:^(BOOL finished) {
        _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
    }];
  1. 第二种:使用Core Animation中的类
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    anima.duration = 1.0f;
    [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

基础动画(CABaseAnimation)

    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    anima.duration = 1.0f;
    //anima.fillMode = kCAFillModeForwards;
    //anima.removedOnCompletion = NO;
    [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

变换位移动画(CAKeyframeAnimation)

CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值(fromValue)变换成另一个数值(toValue),而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。

  CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
    anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
   [_demoView.layer addAnimation:anima forKey:@"pathAnimation"];

组和动画(CAAnimationGroup)

   CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
    anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];

    //缩放动画
    CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anima2.fromValue = [NSNumber numberWithFloat:0.8f];
    anima2.toValue = [NSNumber numberWithFloat:2.0f];

    //旋转动画
    CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    anima3.toValue = [NSNumber numberWithFloat:M_PI*4];

    //组动画
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil];
    groupAnimation.duration = 4.0f;

    [_demoView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];

很好这些基础的动画之后,我们就可以组装一些比较复杂的动画了

但是接下来我要说的就是一些和动画无关,但是和我们有关的了,首先我要提一个问题,如果运行动画之后,我们对该动画的视图进行操作,那么我们操作的视图位置,是视图运行动画之前的位置,还是视图运行动画之后的位置?

带着这个疑问我么讲述下面的问题

首先先讲一个知识点

  • Core Animation是直接作用在CALayer上的,并非UIView

CALayer与UIView的关系

在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView。

其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层:

在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层。

 @property(nonatomic,readonly,retain) CALayer *layer;

当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示。

换句话说,UIView本身不具备显示的功能,是它内部的层才有显示功能。

因此,通过调节CALayer对象,可以很方便的调整UIView的一些外观属性。

讲到这里一些‘鸡畜’比较好的同学可能就知道了,事件是作用于UIView层上的,而我们改变的是视图上边的CALayer,所以很自然的我们操作的视图位置还是之前的位置。不过由这个问题我们将会下篇文章将要讲述的内容,UIView与CAlayer的详细讲解。

你可能感兴趣的:(IOS开发--IOS动画基础篇)