动画基础--基于Core Animation(1)

1.简介

  上一篇文章[New learn]动画-基于UIView了解到了一些直接由UIView这个在UIKIT提供的类中提供的一些动画方法。

使用UIView的动画特性已经能够满足我们很多的需求,它是对于Core Animation的底层方法做了了高级抽象,使得我们开发动画更加便捷,但是便捷的另外一边就失去了Core Animation框架的

完整性和灵活性。当然除了这些UIView还提供了很多用户交互上的功能如相应用户点击等。

  那么我们什么时候回正真要去操作更加底层的Core Animation框架呢?当UIVIew提供的动画功能无法满足需求的时候,如:阴影效果,非矩形范围,多线性动画等。

2.Calayer类-图层

  在使用UIKIT的UIView(视图)去选择线程控件或者自定义View然后呈现在屏幕上,其实我们真正的在屏幕上锁看到的一切都是图层的内容,视图是指对图层做了一下包装以此提供用户交互相应和Core Animation的高级接口。

  每一个UIView都有一个Calayer,也就是所谓的backing layer。UIView负责创建这个图层,并将子视图的图层add到其图层上,所以基于这一点UIView和Calayer两者具有相同的平行的层级关系,一一对应,当然有UIVew必定有Calayer,Calayer可以脱离于UIView而独立创建,如下图:

  

3.使用图层  

    //  创建图层
    CALayer *blueLayer = [CALayer layer];

    blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    blueLayer.backgroundColor = [UIColor blueColor].CGColor;

    //将图层加载到backing layer上
    [self.view.layer addSublayer:blueLayer];

上述例子中我们创建了一个图层并将此图层加载到了视图的backing layer上。

  

4.可动画参数

  如同视图一样,并不是所有的属性都具有动画效果,一帮常用的课动画的属性如下:

              

  举例:

  

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //  创建图层
    blueLayer = [CALayer layer];

    blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    blueLayer.backgroundColor = [UIColor blueColor].CGColor;

    //将图层加载到backing layer上
    [self.view.layer addSublayer:blueLayer];

}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    blueLayer.backgroundColor = [UIColor redColor].CGColor;

    self.view.layer.backgroundColor = [UIColor redColor].CGColor;
}

结果:

  rootview的backing layer直接由无色变为红色,中间没有过度。

  新建的图层则由蓝色变为红色,中间有一个短暂的过度,并不是直接变成红色。

原因:

  对于UIView的backing layer来说隐式动画已经被禁止,既对于支持隐式动画的属性的值的修改也不会带来动画效果。

  而对于新建的图层则会产生动画效果除非我们将隐式动画关闭。

对策:

  backing layer有UIView生成,我们并不能去控制,也不需要去控制,我们只要在其上add上新建的图层即可。

5.图层几何学

  5.1 布局

  视图有frame,bounds,center,对应的图层也有frame,bounds,position。

  事实上视图对于上述属性的改变都是在改变其backing layer的对应属性。

  一般的frame的高宽都是和bounds的高宽是一致的。

                      

  但是当发生旋转等变化后就不一致了,frame代表整个轴对齐的矩形区域。

                     

  5.2 锚点:anchorPoint

  关于锚点的理解可以参考:[Think] position与anchorPoint关系

  图层或者视图都会以锚点为旋转中心点:

  测试中我们新建了一个灰色的UIView:

  以中心点旋转:

-(void) anchorPointRotateCenter
{
    myView.transform = CGAffineTransformRotate(myView.transform, 1.0);
}

结果:

                              

  将锚点设定到左上角:

-(void) anchorPointRotateLeftUp
{
    myView.layer.anchorPoint = CGPointMake(0.0f, 0.0f);
     myView.transform = CGAffineTransformRotate(myView.transform, 1.0);

}

结果:

 

  5.3 坐标系

  

  5.3.1 Z坐标轴

  屏幕是平面的,所以x轴和Y轴的存在可以很好理解,其实对于3D变化来说还存在Z轴概念。Z轴的概念只在图层这一个级别存在,视图中只有二维的x和y轴。

  zPosition和anchorPointZ以为这图层能够随着垂直于屏幕指向观察者的方向上下移动。

  一般地在屏幕上都是后画上去的视图或者图层会覆盖先先画上去的视图或者图层。但是我们可以通过zPosition来改变这种覆盖顺序。

  需要强调一点的是,通过zPosition虽然能够改变显示顺序,但是不该表hit-testing顺序,还是会按照后画上去的view先得到处理事件响应。

  例子:

下面的例子中新增了两个view,蓝色和红色,蓝色加入到rootview,这样最终效果上来说,红色会覆盖住他们重复的区域。

-(void)drawZpositionTestView
{
    blueView = [[BlueView alloc]initWithFrame:CGRectMake(200.0f, 50.0f, 100.0f, 100.0f)];
    redView = [[RedView alloc]initWithFrame:CGRectMake(200.0f, 120.0f, 100.0f, 100.0f)];

    [self.view addSubview:blueView];
    [self.view addSubview:redView];
}

           

  当点击重复区域的时候,会触发定义在红色view中的touch时间:

2016-04-30 14:56:59.464 TestCoreAnimation[914:27800] I am red view!  

  此后我们该表蓝色view的layer的zposition值,这样就导致蓝色区域将在前。  

-(void)drawZpositionTestView
{
    blueView = [[BlueView alloc]initWithFrame:CGRectMake(200.0f, 50.0f, 100.0f, 100.0f)];
    redView = [[RedView alloc]initWithFrame:CGRectMake(200.0f, 120.0f, 100.0f, 100.0f)];

    [self.view addSubview:blueView];
    [self.view addSubview:redView];

    // 修改zposition值,越大越靠前(越靠近观察者)
    blueView.layer.zPosition = 1.0;
}

            

  测试点击重合区域,点击事件依然由红色view处理,也就是说zposition不影响hit-testing的传递顺序。

2016-04-30 15:03:22.700 TestCoreAnimation[1006:31606] I am red view!

  

  5.3.2 坐标系的转换

和视图一样,图层在图层树当中也是相对于父图层按层级关系放置,一个图层的position依赖于它父图层的bounds,如果父图层发生了移动,它的所有子图层也会跟着移动。这样对于放置图层会更加方便,因为你可以通过移动根图层来将它的子图层作为一个整体来移动,但是有时候你需要知道一个图层的绝对位置,或者是相对于另一个图层的位置,而不是它当前父图层的位置。 CALayer给不同坐标系之间的图层转换提供了一些工具类方法:

- (CGPoint)convertPoint:(CGPoint)point fromLayer:(CALayer *)layer;
- (CGPoint)convertPoint:(CGPoint)point toLayer:(CALayer *)layer;
- (CGRect)convertRect:(CGRect)rect fromLayer:(CALayer *)layer;
- (CGRect)convertRect:(CGRect)rect toLayer:(CALayer *)layer;

  

  

   

时间: 2024-10-13 00:05:22

动画基础--基于Core Animation(1)的相关文章

动画基础--基于Core Animation(2)

参考:https://zsisme.gitbooks.io/ios-/content/ 前面的文章动画基础--基于Core Animation(1)提到了图层的基本概念以及可动画参数几何学等知识. 本片文章将继续探讨更加深入的动画知识. 6.视觉效果 圆角 圆角设定可以让原本死板的直角视图更加美观和谐:> -(void)radiusView { radiusView = [[UIView alloc]initWithFrame:CGRectMake(100.0f, 50.0f, 100.0f,

动画基础--基于Core Animation(3)

参考:https://zsisme.gitbooks.io/ios-/content/ 前面的文章动画基础--基于Core Animation(1),动画基础--基于Core Animation(2)提到了图层的基本概念以及可动画参数几何学等知识. 本片文章将继续探讨更加深入的动画知识. 前面已经两篇文章已经就图层的概念和几何学和效果表现,变换等左列介绍. 在前面的两篇文章中大部分采用了视图自带的backing 图层进行讲解,本身这个图层是禁止动画效果的.所以在前面的文章中很少看到明显的 动画,

核心动画编程指南Core Animation Programming Guide - iOS

1 有关核心动画 1.1 概览 1.1.1 Core Animation 管理应用的内容 核心是 layer objects, 1.1.2 更改 layer 触发动画 Like views, layer objects have a bounds rectangle, a position onscreen, an opacity, a transform, and many other visually-oriented properties that can be modified. 更改这

Expression Blend实例中文教程(7) - 动画基础快速入门Animation

通过前面文章学习,已经对Blend的开发界面,以及控件有了初步的认识.本文将讲述Blend的一个核心功能,动画设计.大家也许注意到,从开篇到现在,所有的文章都是属于快速入门,是因为这些文章,都是我曾经学习的经验和工作中使用到的经验总结出来的.在我个人认为,掌握了这些核心功能也就等于掌握了Blend的开发方法.在以后开发项目中使用Blend开发工具,这些知识应该足够用了.当然,特殊项目也需要特殊对待,如果您在项目开发中,有新的Blend开发经验,希望您能够毫不吝啬的分享,在这里,我表示深深的谢意.

iOS开发-核心动画高级编程Core Animation系列(转)

iOS-Core-Animation-Advanced-Techniques 转 GitHub译文 iOS核心动画高级编程全集 iOS-核心动画高级编程/1-图层树 iOS-核心动画高级编程/2-寄宿图 iOS-核心动画高级编程/3-图层几何学 iOS-核心动画高级编程/4-视觉效果 iOS-核心动画高级编程/5-变换 iOS-核心动画高级编程/6-专有图层 iOS-核心动画高级编程/7-隐式动画 iOS-核心动画高级编程/8-显示动画 iOS-核心动画高级编程/9-图层时间 iOS-核心动画高

iOS Core Animation Advanced Techniques(六): 基于定时器的动画和性能调优

基于定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速来增强现实感的东西,那么如果想更加真实地模拟 物理交互或者实时根据用户输入修改动画改怎么办呢?在这一章中,我们将继续探索一种能够允许我们精确地控制一帧一帧展示的基于定时器的动画. 定时帧 动画看起来是用来显示一段连续的运动过程,但实际上当在固定位置上展示像素的时候并不能做到这一点.一般来说这种显

转 iOS Core Animation 动画 入门学习(一)基础

iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514 在iOS中,每个view中都自动配置了一个layer,我们不能人为新建,而在Mac OS中,view默认是没有

iOS Core Animation Advanced Techniques(四):隐式动画和显式动画

隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画师Core Animation库一个非常显著的特性.这一章我们来看看它是怎么做到的.具体来说,我们先来讨论框架自动完成的隐式动画(除非你明确禁用了这个功能). 事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在.

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

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