您的位置:首页 > 其它

CALayer 简易动画

2016-02-18 21:43 387 查看
1.CALayer是低级组件,像是铺在一个内容固定对象上的一个片,非常灵活的支持在一个对象上显示内容,可在屏幕上弯曲或扭曲内容。

在MVC设计模式中,视图是V对象,层是M对象。层封装了布局,时序,可视的属性并且提供用于显示的内容,但是显示却不是层的职责。

每个UIView都有一个根层,它控制着内容最终被显示在屏幕上的方式。

单个层可以有很多子层。子层可以在最终屏幕渲染的时候被管理和缝合在一起。

访问层:

CALayer*layer=myView.layer;

[myView.layeraddSublayer:myView2.layer];

2.大小和位置

Layer的frame属性和windows,view的frame相似。

myView.layer.frame=rect;

myView.layer.position=centerPoint;

3.管理层

[myView.layerinsertSublayer:layer1atIndex:1];

[myView.layerinsertSublayer:layer1below:layer2];

[myView.layerinsertSublayer:layer1above:layer2];

[layer1removeFromSuperlayer];

[layer1replaceSublayer:layer2with:layer3];

layer1.layer.hidden=YES;

4.渲染

对层的更新可以不必立即显示给用户。当所有的层都准备好从画时,调用setNeedsDisplay。

[layer1setNeedsDisplay];

[layer1setNeedsDisplayInRect:rect];

5.动画

(1)隐式动画

层的许多可视属性的改变可以产生隐式的动画效果,这些属性都默认地与一个动画相关联。通过简单地设置可视的属性值,层会由当前值到被设置的值产生渐变的动画效果。例如设置层的隐藏属性为真,将触发一个逐渐消失的动画效果。

(2)显式动画

显式的动画不改变层的属性。

所有的核心动画类都由抽象类CAAnimation继承而来。CAAnimation采用CAMediaTiming协议和CAAction协议。

CAMediaTiming协议规定了动画的持续时间,速度及重复次数。

CAAction协议规定了在响应由层触发的动作时,开始一个动画的标准方式。

当一个层被应用动画的时候,一个CATransition或CAAnimation对象附在层上。然后调用QuartzCore产生一个新线程,接管动画中所有的图像处理。开发者仅仅需要在增加一个理想的动画来加强层变换的效果。

下面的例子代码创建一个变换:

CATransition*animation=[[CATransitionalloc]init];

animation.duration=1.0;

animation.timingFunction=[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseIn];

animation.type=kCATransitionPush;

animation.subtype=kCATransitionFromRight;

目前,iPhone的SDK提供了有限的变换类型可以由用户创建。更多的变换如页扭曲和缩放变换,是被QuartzCore框架支持的,但只限于使用在苹果公司自己的应用程序上面。

可以通过创建一个CABasicAnimation对象来创建一个动画。下面创建了一个360度旋转层的动画:

CABasicAnimation*animation=[CABasicAnimationanimationWithKeyPath:@"transform"];

animation.toValue=[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.1415,0,0,1.0)];

animation.duration=2;

animation.cumulative=YES;

animation.repeatCount=2;

[layer1addAnimation:animationforKey:@"animation"];

其中,animationWithKeyPath的参数值是CALayer的一些属性的名称字符串。可搜索animationWithKeyPath,在左侧中找相关解释文档。

或者在AnimationTypesandTimingProgrammingGuide

7.变形

QuartzCore的渲染能力,使二维图像可以被自由操纵,就好像它是三维。图像可以在一个三维坐标系中以任意角度被旋转,缩放和倾斜。更高级的有苹果的CoverFlow技术。

iPhone的支持缩放,旋转,仿射,翻转(translation)的转变,等等。这本书只提供了对层变换的一个介绍。

要在一个层中添加一个3D或仿射变换,可以分别设置层的transform或affineTransform属性

layer1.transform=CATransform3DMakeScale(-1.0,-1.0,1.0);

layer1.affineTransform=CGAffineTransformMakeRotation(45.0);

允许多变换在多层面上同时发生。QuartzCore框架使用CATransform3D对象来进行变换。这个对象应用在view的层的上面,来执行弯曲和层的其它操作,从而实现一个理想的3D效果。当它被提交给用户的时候,程序将继续把它当作一个2D对象。

下面的例子创建了一个变换,旋转层:

CATransform3DmyTransform=CATransform3DMakeRotation(angle,x,y,z);

该CATransform3DMakeRotation函数创建了一个转变,将在三维轴坐标系以任意弧度旋转层。x-y-z轴的有个确定的范围(介于-1和+1之间)

要水平(垂直)旋转45度,您可以使用下面的代码:

myTransform=CATransform3DMakeRotation(0.78,1.0,0.0,0.0);

要在Y轴上旋转相同的值:

myTransform=CATransform3DMakeRotation(0.78,0.0,1.0,0.0);

0.78是由角度值经计算转化为弧度值。要把角度值转化为弧度值,可以使用一个简单的公式Mπ/180。例如,45π/180=45(3.1415)/180=0.7853。

myTransform=CATransform3DMakeRotation(radians(45.0),0.0,1.0,0.0);

CALayer对象提供了一个transform属性来连接转换,层将执行分配给transform属性的转换:

imageView.layer.transform=myTransform;

8.边框,圆角,阴影

设置圆角边框

someView.layer.cornerRadius=4.0f;

someView.layer.masksToBounds=YES;

//设置边框及边框颜色

someView.layer.borderWidth=0.5f;

someView.layer.borderColor=[[UIColorgrayColor]CGColor];

//添加四个边阴影

_imgvPhoto.layer.shadowColor=[UIColorblackColor].CGColor;

_imgvPhoto.layer.shadowOffset=CGSizeMake(0,0);

_imgvPhoto.layer.shadowOpacity=0.5;

_imgvPhoto.layer.shadowRadius=10.0;

_imgvPhoto.layer.masksToBounds=NO;

//添加两个边阴影

_imgvPhoto.layer.shadowColor=[UIColorblackColor].CGColor;

_imgvPhoto.layer.shadowOffset=CGSizeMake(4,4);

_imgvPhoto.layer.shadowOpacity=0.5;

_imgvPhoto.layer.shadowRadius=2.0;

说明:

①someView表示UIView及其之类;

②必须引入:#import<QuartzCore/QuartzCore.h>

9.masksToBounds

决定其子层是否只有绘制在其bounds内的部分才显示。

设置UIImage或UIView圆角、设置UIView边框的代码

/article/10723873.html

10.卷曲,半翻页

//创建CATransition对象

CATransition*animation=[CATransitionanimation];

//相关参数设置

[animationsetDelegate:self];

[animationsetDuration:1.0f];

[animationsetTimingFunction:UIViewAnimationCurveEaseInOut];

//向上卷的参数

if(!isCurl)

{

//设置动画类型为pageCurl,并只卷一半

[animationsetType:@"pageCurl"];

animation.endProgress=0.5;

}

//向下卷的参数

else

{

//设置动画类型为pageUnCurl,并从一半开始向下卷

[animationsetType:@"pageUnCurl"];

animation.startProgress=0.5;

}

//卷的过程完成后停止,并且不从层中移除动画

[animationsetFillMode:kCAFillModeForwards];

[animationsetSubtype:kCATransitionFromBottom];

[animationsetRemovedOnCompletion:NO];

isCurl=!isCurl;

//把要翻出的View提到最上面

[self.viewexchangeSubviewAtIndex:0withSubviewAtIndex:1];

//把动画添加给layer

[[self.viewlayer]addAnimation:animationforKey:@"pageCurlAnimation"];

原理是,向上翻的是最初layer的快照,卷曲层下面是实际的view。

11.让一个view沿中间的水平线,翻转消失和出现的效果

-(void)click

{

[UIViewbeginAnimations:nilcontext:nil];

[UIViewsetAnimationDuration:1];

if(!rotate)

{

CATransform3DmyTransform=CATransform3DIdentity;

myTransform.m34=0;

//沿(0,1,0)这个向量旋转30度。

myTransform=CATransform3DRotate(myTransform,M_PI/180*0,0.0001,0,0);

rotateView.layer.transform=myTransform;

}

else

{

CATransform3DmyTransform=CATransform3DIdentity;

myTransform.m34=-0.005;

//沿(0,1,0)这个向量旋转30度。

myTransform=CATransform3DRotate(myTransform,M_PI/180*90,1,0,0);

rotateView.layer.transform=myTransform;

}

[UIViewcommitAnimations];

rotate=!rotate;

}

12.

参考
http://www.yuephone.com/forum.php?mod=viewthread&action=printable&tid=75http://www.cnblogs.com/gaoxiao228/archive/2012/05/04/2483519.html
http://www.buerguo.com/archives/162

http://www.buerguo.com/archives/162

http://paste.lisp.org/display/73547

http://www.opensource.apple.com/source/CarbonHeaders/CarbonHeaders-18.1/Availability.h

__OSX_AVAILABLE_STARTING()可以同时指明这个函数开始可用时的桌面和手机os的版本号.
http://www.cocoachina.com/bbs/read.php?tid=80453



http://www.cocoachina.com/bbs/read.php?tid=80453

http://www.cocoachina.com/bbs/simple/?t87118.html

http://wenku.baidu.com/view/f478d71aa8114431b90dd870.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: