码迷,mamicode.com
首页 > 移动开发 > 详细

iOS开发-高级UI-动画

时间:2015-08-03 16:33:09      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

一、隐式动画
*每个UIView的内部都默认关联着一个CALayer,我们可以称这个Layer为RootLayer(根层),这个自动创建的CALayer不存在隐式动画。
*所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画。
*什么是隐式动画?
当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果。
而这些属性称为Animatable Properties(可动画属性)

*列举几个常见的Animatable Properties:
bounds:设置CALayer的宽高。修改这个属性会产生缩放动画
backgroundColor:设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position:设置CALayer的位置。修改这个属性会产生平移动画

关闭隐式动画
[CATransaction begin];
[CATransaction setDisableActions:YES];
[CATransaction commit];

二、自定义Layer(不要求掌握,知道即可)
1.新建一个类NJLayer,在其实现文件中重写drawInContext:方法
//在该方法中在layer上绘制图形
//注意CALayer中的drawInContext:方法不会自动调用
//只能自己通过setNeedDisplay方法调用
-(void)drawInContext:(CGContextRef)ctx
{

//1.绘制图形
CGContextAddEllipseInRect(ctx,CGRectMake(0,0,100,100));

// [[UIColor redColor] set]; //注意不能用UIKit框架中的类

CGContextSetRGBFillColor(ctx,1,0,0,1);
//2.渲染图形
CGContextFillPath(ctx);
}

2.在控制器实现文件中
//1.创建自定义Layer
NJLayer *myLayer = [NJLayer layer];

myLayer.bounds = CGRectMake(0,0,100,100);
myLayer.anchorPoint = CGPointZero;
myLayer.backgroundColor = [UIColor greenColor].CGColor;

//1.1.手动调用CALayer中的setNeedDisplay方法绘制图形
[myLayer setNeedDisplay];
//2.将自定义Layer添加到控制器的view的layer上
[self.view.layer addSublayer:myLayer];

第二种自定义Layer的方法(利用代理,懒人方法)
1.在控制器实现文件的viewDidLoad中
//1.创建自定义Layer
CALayer *myLayer = [CALayer layer];

myLayer.bounds = CGRectMake(0,0,100,100);
myLayer.anchorPoint = CGPointZero;
myLayer.backgroundColor = [UIColor greenColor].CGColor;

myLayer.delegate = self;(无需遵守协议)

//2.将自定义Layer添加到控制器的view的layer上
[self.view.layer addSublayer:myLayer];

2.//通过代理自定义Layer
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
//1.绘制图形
CGContextAddEllipseInRect(ctx,CGRectMake(0,0,100,100));
CGContextSetRGBFillColor(ctx,1,0,0,1);
//2.渲染图形
CGContextFillPath(ctx);
}

3.在viewDidLoad中
//1.创建自定义Layer
CALayer *myLayer = [CALayer layer];

myLayer.bounds = CGRectMake(0,0,100,100);
myLayer.anchorPoint = CGPointZero;
myLayer.backgroundColor = [UIColor greenColor].CGColor;

myLayer.delegate = self;(无需遵守协议)

//1.1.手动调用CALayer中的setNeedDisplay方法绘制图形
[myLayer setNeedDisplay];

//2.将自定义Layer添加到控制器的view的layer上
[self.view.layer addSublayer:myLayer];

 

三、核心动画-基础动画
核心动画(简介)
*Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常绚丽的动画效果,而且往往是事半功倍。也就是说,使用少量的代码就可以实现非常强大的功能。
*Core Animation可以用在Mac OS X和iOS平台
*Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程
*要注意的是,Core Animation是直接作用在CALayer上的,并非UIView。

Core Animation的使用步骤
1.初始化一个CAAnimation对象,并设置一些动画相关属性
2.通过调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中,这样就能开始执行动画了。
3.通过调用CALayer的removeAnimation:ForKey:方法可以停止CALayer中的动画

CAAnimation继承结构
技术分享

实际运用(移动)
1.在控制器实现文件的类扩展中
@property(nonatomic,strong)CALayer *myLayer;

2.在控制器实现文件的viewDidLoad中
{
//1.创建layer
CALayer *myLayer = [CALayer layer];
myLayer.bounds = CGRectMake(0,0,100,100);

myLayer.anchorPoint = CGPointZero;
myLayer.position= CGPointMake(100,100);
myLayer.backgroundColor = [UIColor greenColor].CGColor;
//2.将自定义Layer添加到控制器的view的layer上
[self.view.layer addSublayer:myLayer];

self.myLayer = myLayer; //将创建的这个myLayer赋值给控制器的myLayer属性
}

3.在touchesBegan:withEvent:方法中
{
//1.创建核心动画
CABasicAnimation *anima = [CABasicAnimation animation];
//1.1.告诉系统要执行什么样的动画
anima.keyPath = @"position";
//设置通过动画将layer从哪(因为需要传入id对象,所以将CGPoint包装成对象。)
//如果不设置这个”从哪“,则会从当前位置开始移动
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0,0)];

//到哪(到指定的位置)
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(200,300)];

//在当前位置的基础上增加多少
//anima.byValue = [NSValue valueWithCGPoint:CGPointMake(200,300)];

//1.2.设置动画执行完毕之后不删除动画
anima.removedOnCompletion = NO;
//1.3.设置保存动画的最新状态
anima.fillMode = kCAFillModeForwards;
//1.4.设置动画时间
anima.duration = 2;
//2.添加核心动画到Layer
[self.myLayer addAnimation:anima forKey:nil];
}

实际运用(放大)
在touchesBegan:withEvent:方法中
{
//1.创建核心动画
CABasicAnimation *anima = [CABasicAnimation animation];
//1.1.设置动画类型
anima.keyPath = @"bounds";

//1.2.设置动画执行完毕之后不删除动画
anima.removedOnCompletion = NO;
//1.3.设置保存动画的最新状态
anima.fillMode = kCAFillModeForwards;
//1.4.设置动画时间
anima.duration = 1;

//1.5.修改动画
anima.toValue = [NSValue valueWithCGPoint:CGRectMake(0,0,200,200)];
//2.添加核心动画到Layer
[self.myLayer addAnimation:anima forKey:nil];
}

实际运用(旋转)
在touchesBegan:withEvent:方法中
{
//1.创建核心动画
CABasicAnimation *anima = [CABasicAnimation animation];
//1.1.设置动画类型
anima.keyPath = @"transform";

//1.2.设置动画执行完毕之后不删除动画
anima.removedOnCompletion = NO;
//1.3.设置保存动画的最新状态
anima.fillMode = kCAFillModeForwards;
//1.4.设置动画时间
anima.duration = 1;

//1.5.修改动画
anima.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI_4,1,1,0)];
//2.添加核心动画到Layer
[self.myLayer addAnimation:anima forKey:nil];
}

另一种方法
在touchesBegan:withEvent:方法中
{
//1.创建核心动画
CABasicAnimation *anima = [CABasicAnimation animation];
//1.1.设置动画类型
anima.keyPath = @"transform.scale.x";//x方向扩大1.5倍

//1.2.设置动画执行完毕之后不删除动画
anima.removedOnCompletion = NO;
//1.3.设置保存动画的最新状态
anima.fillMode = kCAFillModeForwards;
//1.4.设置动画时间
anima.duration = 1;

//1.5.修改动画
anima.toValue = @(1.5);
//2.添加核心动画到Layer
[self.myLayer addAnimation:anima forKey:nil];
}

四、关键帧动画

iOS开发-高级UI-动画

标签:

原文地址:http://www.cnblogs.com/marshall-yin/p/4699244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!