Ios中Animation动画的应用

1.  UIViewAnimation

1.1.  基础动画类型有

•       位置变化：在屏幕上移动视图。

•       大小变化：改变视图框架（frame）和边界。

•       改变透明度：改变视图的alpha值。

•       改变状态：隐藏或显示状态。

•       改变视图层次顺序：视图哪个前哪个后。

•       旋转：改变视图的角度。

•       背景颜色：改变背景颜色

 

1.2.  创建基础动画

 

[UIView beginAnimations:@"animationID" context:nil];

[UIView setAnimationDuration:0.5f]; //动画时长

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

//在这里写你的代码.

[UIView commitAnimations]; //提交动画

 

 

1.3.  UIViewAnimation自带效果

   UIViewAnimationTransitionFlipFromLeft              //从左向右翻转  

    UIViewAnimationTransitionFlipFromRight             //从右向左翻转  

    UIViewAnimationTransitionCurlUp                    //从下向上翻页  

UIViewAnimationTransitionCurlDown                  //从上向下翻页 

1.3.1. 使用方法

            [UIViewbeginAnimations:@"animationID" context:nil];

            [UIView setAnimationDuration:1.5f];//动画时长

           [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

           [UIView setAnimationDelegate:self];

            [UIViewsetAnimationDidStopSelector:@selector(stopAnimating:)];

           [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:myImgcache:YES]; //给视图添加过渡效果

[UIViewcommitAnimations]; //提交动画

1.4.  动画运行曲线

setAnimationCurve：

下面是一些曲线可见的。

• UIViewAnimationCurveEaseInOut.这个曲线指定了动画在开始和结束都会慢点。这个曲线是默认的

•UIViewAnimationCurveEaseIn. 这个曲线指定了动画只在开始时慢。

•UIViewAnimationCurveEaseOut. 这个曲线指定了动画只在结束时慢。

•UIViewAnimationCurveLinear. 这个曲线指定了动画是始终如一的通过。

 

2.  CaTransition Public

2.1.  创建动画

CATransition *animation = [CATransitionanimation];

//animation.delegate = self;

   animation.duration = 0.5f;

   animation.timingFunction = UIViewAnimationCurveEaseInOut;

   animation.fillMode = kCAFillModeForwards;

   animation.type = kCATransitionPush;

   animation.subtype = kCATransitionFromTop;

[self.view.layer addAnimation:animationforKey:@"animation"];

2.2.  动画效果有：

下卷：

kCATransitionMoveIn,

上卷：

kCATransitionPush,

左翻：

kCATransitionReveal,

右翻：

kCATransitionFade

 

3.  CaTransition Private

3.1.  创建动画

CATransition *animation = [CATransition animation];

animation.delegate = self;

animation.duration = 0.5f; //动画时长

animation.timingFunction = UIViewAnimationCurveEaseInOut;

animation.fillMode = kCAFillModeForwards;

animation.type = @"cube"; //过度效果

animation.subtype = @"formLeft"; //过渡方向

animation.startProgress = 0.0 //动画开始起点(在整体动画的百分比)

animation.endProgress = 1.0;  //动画停止终点(在整体动画的百分比)

animation.removedOnCompletion = NO;

[self.view.layer addAnimation:animation forKey:@"animation"];

 

3.2.  动画效果有：

,@"cube",

@"suckEffect",

@"oglFlip",

@"rippleEffect",

@"pageCurl",

@"pageUnCurl",

@"cameraIrisHollowOpen",

@"cameraIrisHollowClose"

4.  练习：下雪效果

技巧：

使用Timer 循环执行的方法：

[NSTimerscheduledTimerWithTimeInterval:(0.2) target:self

selector:@selector(ontime) userInfo:nilrepeats:YES];

代码：

-(void)ontime{

   UIImageView *view;

   view = [[UIImageView alloc] initWithImage:pic];//声明一个UIImageView对象，用来添加图片

   view.alpha = 0.5;//设置该view的alpha为0.5，半透明的

   int x = round(random()%320);//随机得到该图片的x坐标

   int y = round(random()%320);//这个是该图片移动的最后坐标x轴的

   int s = round(random()%15)+10;//这个是定义雪花图片的大小

   int sp = 1/round(random()%100)+1;//这个是速度

   view.frame = CGRectMake(x, y-250, s, s);//雪花开始的大小和位置

   [self.view addSubview:view];//添加该view

   [UIView beginAnimations:nil context:view];//开始动画

   [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];//设置动画的加速度

   

    [UIView setAnimationDuration:10*sp];//设定速度

   view.frame = CGRectMake(x, 500, s, s);//设定该雪花最后的消失坐标

   [UIView setAnimationDelegate:self];

   [UIView commitAnimations];

}

5.  Quartz 2d

5.1.  Quartz2d简介

Quartz 2D是一个二维图形绘制引擎，支持iOS环境和Mac OS X环境。我们可以使用Quartz 2D API来实现许多功能，如基本路径的绘制、透明度、描影、绘制阴影、透明层、颜色管理、反锯齿、PDF文档生成和PDF元数据访问。在需要的时候，Quartz 2D还可以借助图形硬件的功能。

5.2.  Graphics Context  

·      Graphics Context是一个数据类型(CGContextRef)，用于封装Quartz绘制图像到输出设备的信息

·      Graphics Context中的信息包括在Page中的图像的图形绘制参数和设备相关的表现形式。Quartz中所有的对象都是绘制到一个Graphics Context中。

·      CGContextRef context =UIGraphicsGetCurrentContext();

 

5.3.  绘制直线

//获取当前的context

CGContextRef context =UIGraphicsGetCurrentContext();

//设置画笔的宽度

CGContextSetLineWidth(context, 2.0);

//设置第一点的位置

CGContextMoveToPoint(context, firstTouch.x,firstTouch.y);

//设置第二点的位置

CGContextAddLineToPoint(context,lastTouch.x, lastTouch.y);

//开始绘制

CGContextStrokePath(context);

5.4.  绘制曲线

// 画贝塞尔曲线

  CGContextRef context = UIGraphicsGetCurrentContext();

   CGContextSetRGBStrokeColor(context, 255.0f, 255.0f, 255.0f, 1.0f);

    CGContextMoveToPoint(context, 100.0f,100.0f);                        // 顶点一

 CGContextSetLineWidth(context, 2.0f);

   // (200, 150) 控制点一 (50, 200) 控制点二 (100,300) 顶点二

   //CGContextAddCurveToPoint(context, 200, 150, 50, 200, 100, 300);    // 三次塞尔曲线

   // (200,100) 控制点一 (100,300) 顶点二

   CGContextAddQuadCurveToPoint(context, 200, 100, 100, 300);            // 二次塞尔曲线

 CGContextStrokePath(context);CGContextStrokePath(context);

5.5.  绘制矩形

CGContextSetRGBStrokeColor(context,

 1f,1.0f, 1.0f, 1.0f);//设置画笔颜色

CGContextSetRGBFillColor(context

, .4f, .2f, .1f, 1);//设置填充颜色

 CGContextAddRect(context,

CGRectMake(100, 100, 200, 100));

//设置矩形范围

CGContextDrawPath(context,

 kCGPathFillStroke);

5.6.  绘制圆形

CGContextSetRGBStrokeColor(context,

 1f,1.0f, 1.0f, 1.0f);//设置画笔颜色

CGContextSetRGBFillColor(context

, .4f, .2f, .1f, 1);//设置填充颜色

CGContextAddEllipseInRect(context,CGRectMake(100,200,180,180));;

//设置圆形范围

CGContextDrawPath(context,

 kCGPathFillStroke);

5.7.  绘制图像

将图片绘制到某一点：[imagedrawAtPoint:CGPointMake(0, 0)];

控制图片的大小绘制到某点：[imagedrawInRect:CGRectMake(x, y, width, height)];

5.8.  阴影

阴影有三个属性：

x偏移值，用于指定阴影相对于图片在水平方向上的偏移值。

y偏移值，用于指定阴影相对于图片在竖直方向上的偏移值。

模糊(blur)值，用于指定图像是有一个硬边

CGContextSetShadow

 

彩色阴影：Float myColorValues[] = {1, 0, 0, .6};

CGContextSetShadowWithColor(context,CGSizeMake(10, 10), 10,

CGColorCreate(CGColorSpaceCreateDeviceRGB(), myColorValues));