ios 动画基础

转载 2013年12月03日 11:04:39

所有核心动画的动画类都是从 CAAnimation类继承而来


        CAAnimation 实现了 CAMediaTiming协议,提供了动画的持续时间,速度,和重复计数


        CAAnimation 也实现了 CAAction协议。该协议为图层触发一个动画动作提供了提供 标准化响应


        CATransition 提供了一个图层变化的过渡效果,它能影响图层的整个内容。 动画进行的时候淡入淡出(fade)、推(push)、显露(reveal)图层的内容。这些过渡效果可以扩展到你自己定制的Core Image 滤镜


        CAAnimationGroup 允许一系列动画效果组合在一起,并行显示动画


        CAPropertyAnimation是一个抽象的子类,它支持动画的显示图层的关键路径中指定的属性


        CABasicAnimation 简单的为图层的属性提供修改。


        CAKeyframeAnimation支持关键帧动画,你可以指定的图层属性的关键路径动画,包括动画的每个阶段的价值,以及关键帧时间和计时功能的一系列值。在 动画运行是,每个值被特定的插入值替代



        核心动画的 CAConstraint 类 是一个布局管理器,它可以指定子图层类限制于你指定的约束集合。每个约束(CAConstraint类的实例封装)描述层的几何属性(左,右,顶部或底部的边缘或水平或垂直中心)的关系,关系到其同级之一的几何属性层或superlayer


        核心动画的图层和 Cocoa 的视图在很大程度上没有一定的相似性,但是他们两者最大的区别是,图层不会直接渲染到屏幕上


        试图的position坐标和anchorPoint有关


        sublayerTransform属性指定的矩阵只会影响图层的子图层,而不会对 图层本身产生影响


        transform 属性指定的矩阵结合图层的anchorPoint属性作用于图层和图层的子图层上 面


        旋转的单位采用弧度(radians),而不是角度(degress)。以下两个函数,你可以在 弧度和角度之间切换


  1. <span style="font-size:18px;">CGFloat DegreesToRadians(CGFloat degrees) {returndegrees * M_PI / 180;};  
  2.   
  3. CGFloat RadiansToDegrees(CGFloat radians) {returnradians * 180 / M_PI;};</span>  



无法正常运行:

        替换的办法是,你必须通过 setValue:forKeyPath:或者valueForKeyPath:方法,具体如下:


  1. <span style="font-size:18px;">myLayer.transform.rotation.x=0;  
  2.   
  3. [myLayer setValue:[NSNumber numberWithInt:0]forKeyPath:@"transform.rotation.x"];</span>  


        如果一个图层的属性 needsDisplayOnBoundsChange被设置为YES 的时候,当图层的bounds属性改变的时候,图层的内容将会被重新缓存起来。默认情况下图层的needsDisplayOnBoundsChange属性值为NO。


给CALayer提供内容

        1。包含图片内容的 CGImageRef来显式的设置图层的contents 的属性。

        2。指定一个委托,它提供或者重绘内容。

        3。继承 CALayer 类重载显示的函数


创建一个委托类实

        displayLayer:或 drawLayer:inContext:


  1. <span style="font-size:18px;">- (void)displayLayer:(CALayer *)theLayer  
  2.   
  3. {  
  4.   
  5.     // check the value of the layer's state key  
  6.   
  7.     if ([[theLayer valueForKey:@"state"] boolValue])  
  8.   
  9.     {  
  10.   
  11.         // display the yes image  
  12.   
  13.         theLayer.contents=[someHelperObjectloadStateYesImage];  
  14.   
  15.     }  
  16.   
  17.     else {  
  18.   
  19.         // display the no image  
  20.   
  21.         theLayer.contents=[someHelperObjectloadStateNoImage];  
  22.   
  23.     }  
  24.   
  25. }</span>  



        如果你必须重绘图层的内容,而不是通过加载图片,那你需要实现drawLayer:inContext:方法。通过委托可以决定哪些内容是需要的并使用CGContextRef来重绘内容。


        实例重新缓存其内容,可以通过发送以下任何一个方法setNeedsDisplay或setNeedsDisplayInRect:的消息,亦或者设置图层的needsDisplaOnBoundsChange属性为 YES


        CALayer 的属性 contentsGravity允许你在图层的边界内容修改图层的contents图片的位置或者伸缩值。默认情况下,内容的图像完全填充层的边界,忽视自然的图像 宽高比contentsGravity属性值:


        CABasicAnimation提供了在图层的属性值间简单的插入。CAKeyframeAnimation提供支持关键帧动画。你指定动画的一个图层属性的关键路径,一个表示在动画的每个阶段的价值的数组,还有一个关键帧时间的数组和时间函数。 


        CATransition提供了一个影响整个图层的内容过渡效果。在动画显示过程中采用淡出(fade)、推出(push)、显露(reveal)图层的内容。常用的过渡效果可以通过提供你自己定制的核心图像滤镜来扩展


  1. <span style="font-size:18px;">CABasicAnimation *_basicAnimation= [CABasicAnimation animationWithKeyPath:@"opacity"];  
  2.   
  3.    _basicAnimation.duration=3.0;  
  4.   
  5.    _basicAnimation.repeatCount=2;  
  6.   
  7.    _basicAnimation.autoreverses=YES;  
  8.   
  9.    _basicAnimation.fromValue=[NSNumber numberWithFloat:1.0];  
  10.   
  11.    _basicAnimation.toValue=[NSNumber numberWithFloat:0.0];  
  12.   
  13.     [self.m_imageViewBg.layeraddAnimation:_basicAnimation forKey:@"animateOpacity"];</span>  



我们可以通过animationWithKeyPath键值对的方式来改变动画

        animationWithKeyPath的值:

        transform.scale= 比例轉換

        transform.scale.x =闊的比例轉換

        transform.scale.y =高的比例轉換

        transform.rotation.z =平面圖的旋轉

        opacity = 透明度

        margin

        zPosition

        backgroundColor

        cornerRadius

        borderWidth

        bounds

        contents

        contentsRect

        cornerRadius

        frame

        hidden

        mask

        masksToBounds

        opacity

        position

        shadowColor

        shadowOffset

        shadowOpacity

        shadowRadius


  1. <span style="font-size:18px;">  
  2. [self. ui_View.layerremoveAllAnimations];  
  3.   
  4.      
  5.   
  6.    CABasicAnimation *pulse= [CABasicAnimation animationWithKeyPath:@"transform.scale"];  
  7.   
  8.    pulse.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];  
  9.   
  10.    pulse.duration = 0.5 + (rand() % 10) * 0.05;  
  11.   
  12.    pulse.repeatCount = 1;  
  13.   
  14.    pulse.autoreverses = YES;  
  15.   
  16.    pulse.fromValue =[NSNumber numberWithFloat:.8];  
  17.   
  18.    pulse.toValue =[NSNumber numberWithFloat:1.2];  
  19.   
  20.    [self.ui_View.layer addAnimation:pulseforKey:nil];  
  21.   
  22. // bounds  
  23.   
  24.    
  25.   
  26. CABasicAnimation *anim = [CABasicAnimationanimationWithKeyPath:@"bounds"];  
  27.   
  28.    anim.duration = 1.f;  
  29.   
  30.    anim.fromValue =[NSValue valueWithCGRect:CGRectMake(0,0,10,10)];  
  31.   
  32.    anim.toValue =[NSValue valueWithCGRect:CGRectMake(10,10,200,200)];  
  33.   
  34.    anim.byValue  = [NSValuevalueWithCGRect:self. ui_View.bounds];   
  35.   
  36. //    anim.toValue= (id)[UIColor redColor].CGColor;  
  37.   
  38. //   anim.fromValue =  (id)[UIColorblackColor].CGColor;  
  39.   
  40.      
  41.   
  42.    anim.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  43.   
  44.    anim.repeatCount = 1;  
  45.   
  46.    anim.autoreverses = YES;  
  47.   
  48.      
  49.   
  50.    [ui_View.layeraddAnimation:anim forKey:nil];  
  51.   
  52. //cornerRadius  
  53.   
  54.    
  55.   
  56.    CABasicAnimation*anim2 = [CABasicAnimationanimationWithKeyPath:@"cornerRadius"];  
  57.   
  58.    anim2.duration = 1.f;  
  59.   
  60.    anim2.fromValue =[NSNumber numberWithFloat:0.f];  
  61.   
  62.    anim2.toValue =[NSNumber numberWithFloat:20.f];  
  63.   
  64.    anim2.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  65.   
  66.    anim2.repeatCount = CGFLOAT_MAX;  
  67.   
  68.    anim2.autoreverses = YES;  
  69.   
  70.      
  71.   
  72.    [ui_View.layeraddAnimation:anim2 forKey:@"cornerRadius"];  
  73.   
  74. //contents  
  75.   
  76.    
  77.   
  78. CABasicAnimation *anim = [CABasicAnimationanimationWithKeyPath:@"contents"];  
  79.   
  80.    anim.duration = 1.f;  
  81.   
  82.    anim.fromValue =(id)[UIImageimageNamed:@"1.jpg"].CGImage;  
  83.   
  84.    anim.toValue =(id)[UIImageimageNamed:@"2.png"].CGImage;  
  85.   
  86. //   anim.byValue  = (id)[UIImageimageNamed:@"3.png"].CGImage;  
  87.   
  88. //    anim.toValue= (id)[UIColor redColor].CGColor;  
  89.   
  90. //   anim.fromValue =  (id)[UIColorblackColor].CGColor;  
  91.   
  92.      
  93.   
  94.    anim.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  95.   
  96.    anim.repeatCount = CGFLOAT_MAX;  
  97.   
  98.    anim.autoreverses = YES;  
  99.   
  100.      
  101.   
  102.    [ui_View.layeraddAnimation:anim forKey:nil];  
  103.   
  104.    
  105.   
  106. [ui_View.layersetShadowOffset:CGSizeMake(2,2)];  
  107.   
  108.    [ui_View.layersetShadowOpacity:1];  
  109.   
  110.    [ui_View.layersetShadowColor:[UIColorgrayColor].CGColor];  
  111.   
  112. //      
  113.   
  114.    CABasicAnimation *anim =[CABasicAnimation animationWithKeyPath:@"shadowColor"];  
  115.   
  116.    anim.duration = 1.f;  
  117.   
  118.    anim.toValue =(id)[UIColorredColor].CGColor;  
  119.   
  120.    anim.fromValue =  (id)[UIColorblackColor].CGColor;  
  121.   
  122.      
  123.   
  124.    anim.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  125.   
  126.    anim.repeatCount = CGFLOAT_MAX;  
  127.   
  128.    anim.autoreverses = YES;  
  129.   
  130.      
  131.   
  132.    [ui_View.layeraddAnimation:anim forKey:nil];  
  133.   
  134.      
  135.   
  136.    CABasicAnimation *_anim= [CABasicAnimation animationWithKeyPath:@"shadowOffset"];  
  137.   
  138.    _anim.duration = 1.f;  
  139.   
  140.    _anim.fromValue =[NSValue valueWithCGSize:CGSizeMake(0,0)];  
  141.   
  142.    _anim.toValue =[NSValue valueWithCGSize:CGSizeMake(3,3)];  
  143.   
  144.      
  145.   
  146.    _anim.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  147.   
  148.    _anim.repeatCount = CGFLOAT_MAX;  
  149.   
  150.    _anim.autoreverses = YES;  
  151.   
  152.      
  153.   
  154.    [ui_View.layeraddAnimation:_anim forKey:nil];  
  155.   
  156.      
  157.   
  158.      
  159.   
  160.    CABasicAnimation *_anim1= [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];  
  161.   
  162.    _anim1.duration = 1.f;  
  163.   
  164.    _anim1.fromValue =[NSNumber numberWithFloat:0.5];  
  165.   
  166.    _anim1.toValue =[NSNumber numberWithFloat:1];  
  167.   
  168.      
  169.   
  170.    _anim1.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  171.   
  172.    _anim1.repeatCount = CGFLOAT_MAX;  
  173.   
  174.    _anim1.autoreverses = YES;  
  175.   
  176.      
  177.   
  178.    [ui_View.layeraddAnimation:_anim1 forKey:nil];  
  179.   
  180.      
  181.   
  182.      
  183.   
  184.      
  185.   
  186.    CABasicAnimation *_anim2= [CABasicAnimation animationWithKeyPath:@"shadowRadius"];  
  187.   
  188.    _anim2.duration = 1.f;  
  189.   
  190.    _anim2.fromValue =[NSNumber numberWithFloat:10];  
  191.   
  192.    _anim2.toValue =[NSNumber numberWithFloat:5];  
  193.   
  194.      
  195.   
  196.    _anim2.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  197.   
  198.    _anim2.repeatCount = CGFLOAT_MAX;  
  199.   
  200.    _anim2.autoreverses = YES;  
  201.   
  202.      
  203.   
  204.    [ui_View.layeraddAnimation:_anim2 forKey:nil];</span>  



        CAScrollLayer 对象的滚动区域的范围在它的子图层里面定义。


        CAScrollLaye 不提供键盘或鼠标事件处理,也不提供可见的滚动条。


        CATextLayer可以方便的从字符串或字符串的内容创建一个图层类的内容


        CATiledLayer 允许递增的显示大而复杂的图片


        CAEAGLLayer 提供了一个OpenGLES渲染环境


        CALayer 的还扩展了 NSKeyValueCoding的非正式协议,加入默认键值和额外的结构类型的自动对象包装(CGPoint,CGSize,CGRect,CGAffineTransform和CATransform3D)的支持,并提供许多这些结构的关键路径领域的访问

iOS 最全动画教程(基础)

IOS 最全动画教程(基础)大家好,做了这么久的iOS开发,没有系统性的总结过iOS某方面的知识点,总觉得有些地方还是不太了解,查阅各种资料,加上平时开发的经验,因此准备写关于动画系列的总结。作为开发...
  • jone741852963
  • jone741852963
  • 2016年05月19日 15:11
  • 3125

iOS开发详解之几种基础动画篇

iOS 中的动画是指一些视图上的过渡效果,合理利用动画能提高用户体验! 第一类: UIView 动画 几种CGAffineTransform2D仿射变换 实现两个视图控制器的界面动画跳转 CALaye...
  • w_qiang75
  • w_qiang75
  • 2015年09月28日 11:44
  • 333

iOS ——QuartzCore核心动画框架

核心动画框架 使用核心动画需要引入的框架:#import CALayer: CoreAnimation CALayer就是UIView上的图层,很多的CALayer组成了UIView。 C...
  • ci915194561
  • ci915194561
  • 2015年11月29日 19:58
  • 1889

iOS 开发之动画篇 - 从 UIView 动画说起

毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的。 本文作为动画文集的第...
  • CloudyBird
  • CloudyBird
  • 2016年02月29日 09:39
  • 1587

iOS开发 UIBezierPath曲线动画

基础知识 使用UIBezierPath可以创建基于矢量的路径 此类是Core Graphics的封装。使用这个类可以定义简单的形状 如椭圆、矩形或者有多个直线和曲线段组成的形状等。 UIBezie...
  • ljc_563812704
  • ljc_563812704
  • 2016年12月09日 14:03
  • 522

教你实现别人家的动画3(淘宝,简书动画效果)

这篇文章我们来实现个稍微简单点的动画效果 每天在iphone上用淘宝和简书发现他们有个共同的弹出效果(ios自带的?),今天我们就来看看他们吧 好吧 我不知道怎么录屏ios手机动态gif 没关系...
  • tiankong1206
  • tiankong1206
  • 2015年04月18日 12:56
  • 3287

iOS 旋转动画的几种实现方式

第一种:使用CABasicAnimated方法这种方法是最简单的方法CABasicAnimation *animation = [CABasicAnimation animationWithKeyPa...
  • coyote1994
  • coyote1994
  • 2017年06月26日 18:29
  • 867

IOS中的几种动画的实现方式

在我们开发中,经常会遇到一些需要动画特效的展示,下面来总结一些开发中常见的动画实现方式 第一,序列帧动画,通过大量的UIImage来展示动画效果,网络请求等待加载动画效果 核心代码: //创建可...
  • anywhereIOS
  • anywhereIOS
  • 2016年04月11日 00:49
  • 3709

IOS动画库汇总

Core Animation笔记,基本的使用方法 - Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组。 awesome-io...
  • fishmai
  • fishmai
  • 2017年06月23日 09:07
  • 1346

iOS核心动画--浅析三个动画的实现

点击打开链接 http://www.jianshu.com/p/272aa1f26c62 动画和绘图是iOS开发中非常重要的部分。我们要实现一个动效,首先就是动画解析,分析...
  • wangrui13931182709
  • wangrui13931182709
  • 2016年04月19日 16:35
  • 1580
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ios 动画基础
举报原因:
原因补充:

(最多只允许输入30个字)