CABasicAnimation是CAPropertyAnimation的子类,使用它可以实现一些基本的动画效果,它可以让CALayer的某个属性从某个值渐变到另一个值。下面就用CABasicAnimation实现几个简单的动画。

* 先初始化一个UIView添加到控制器的view中,然后在这个UIView的layer上执行动画,下面的self是指控制器

1 _myView = [[UIView alloc] init];
2 _myView.layer.position = CGPointMake(100, 100);
3 _myView.layer.bounds = CGRectMake(0, 0, 100, 100);
4 _myView.backgroundColor = [UIColor blueColor];
5 [self.view addSubview:_myView];
6 [_myView release];

一、平移动画

实现平移动画有好几种方法,这里列举2种。

1.方法1

 1 // 说明这个动画对象要对CALayer的position属性执行动画
2 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];
3 // 动画持续1.5s
4 anim.duration = 1.5;
5
6 // position属性值从(50, 80)渐变到(300, 350)
7 anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 80)];
8 anim.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 350)];
9
10 // 设置动画的代理
11 anim.delegate = self;
12
13 // 保持动画执行后的状态
14 anim.removedOnCompletion = NO;
15 anim.fillMode = kCAFillModeForwards;
16
17 // 添加动画对象到图层上
18 [_myView.layer addAnimation:anim forKey:@"translate"];

* 第2行设置的keyPath是@"position",说明要修改的是CALayer的position属性,也就是会执行平移动画

* 注意第7、8行,这里并不是直接使用CGPoint这种结构体类型,而是要先包装成NSValue对象后再使用。这2行代码表示CALayer从位置(50, 80)移动到位置(300, 350)

* 如果将第8行的toValue换成byValue,代表CALayer从位置(50, 80)开始向右移动300、向下移动350,也就是移动到位置(350, 430)

* 默认情况下,动画执行完毕后,动画会自动从CALayer上移除,CALayer又会回到原来的状态。为了保持动画执行后的状态,可以加入第14、15行代码

* 第18行后面的@"translate"是给动画对象起个名称,以后可以调用CALayer的removeAnimationForKey:方法根据动画名称停止相应的动画

* 第11行是设置动画的代理,可以监听动画的执行过程,这里设置控制器为代理。代理需要实现的方法有:

 1 #pragma mark 动画开始
2 - (void)animationDidStart:(CAAnimation *)anim {
3 NSLog(@"动画开始了");
4 }
5
6 #pragma mark 动画结束
7 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
8 // 查看一下动画执行完毕后的position值
9 NSString *string = NSStringFromCGPoint(_myView.layer.position);
10 NSLog(@"动画结束了,position:%@", string);
11 }

打印结果为:

1 2013-04-14 23:44:26.197 CAAnimation[5995:c07] 动画开始了
2 2013-04-14 23:44:27.697 CAAnimation[5995:c07] 动画结束了,position:{100, 100}

从第2行的打印信息可以看出,实际上,动画执行完毕后,并没有真正改变CALayer的position属性的值!

2.方法2

1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
2 anim.duration = 1;
3
4 CATransform3D form = CATransform3DMakeTranslation(350, 350, 0);
5 anim.toValue = [NSValue valueWithCATransform3D:form];
6
7 [_myView.layer addAnimation:anim forKey:nil];

通过CALayer的transform属性实现平移动画,layer会从自己的初始位置平移到(350, 350)位置

二、缩放动画

实现缩放动画有好几种方法,这里列举2种。

1.方法1

1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];
2 anim.duration = 2;
3
4 anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 30, 30)];
5
6 [_myView.layer addAnimation:anim forKey:nil];

layer会从原来的尺寸(100x100)变为30x30

2.方法2

1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
2 anim.duration = 1.5; // 动画持续1.5s
3
4 // CALayer的宽度从0.5倍变为2倍
5 // CALayer的高度从0.5倍变为1.5倍
6 anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1)];
7 anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 1.5, 1)];
8
9 [_myView.layer addAnimation:anim forKey:nil];

三、旋转动画

1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
2 anim.duration = 1.5;
3
4 // 绕着(0, 0, 1)这个向量轴顺时针旋转45°
5 anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)];
6
7 [_myView.layer addAnimation:anim forKey:nil];

其实可以不用设置fromValue,这里只设置了toValue

四、其他

* 除开前面使用的position、transform属性,其实CALayer还有好多属性都可以形成动画,这些属性统称为"Animatable Properties"。在《CALayer3-层的属性》开头有介绍如何搜索这些属性

* CABasicAnimation虽然能够做很多基本的动画效果,但是有个局限性,只能让CALayer的属性从某个值渐变到另一个值,仅仅是在2个值之间渐变

 
 

Core Animation2-CABasicAnimation的更多相关文章

  1. Core Animation-2:寄宿图

    #寄宿图 >图片胜过千言万语,界面抵得上千图片  ——Ben Shneiderman 我们在第一章『图层树』中介绍了CALayer类并创建了一个简单的有蓝色背景的图层.背景颜色还好啦,但是如果它 ...

  2. 老司机带你走进Core Animation

    为什么时隔这么久我又回来了呢? 回来圈粉. 开玩笑的,前段时间ipv6被拒啊,超级悲剧的,前后弄了好久,然后需求啊什么的又超多,所以写好的东西也没有时间整理.不过既然我现在回来了,那么这将是一个井喷的 ...

  3. iOS 核心动画 Core Animation浅谈

    代码地址如下:http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVie ...

  4. CABasicAnimation的基本使用方法(移动·旋转·放大·缩小)

    出处:http://blog.csdn.net/iosevanhuang/article/details/14488239 CABasicAnimation类的使用方式就是基本的关键帧动画. 所谓关键 ...

  5. iOS动画-从UIView到Core Animation

    首先,介绍一下UIView相关的动画. UIView普通动画: [UIView beginAnimations: context:]; [UIView commitAnimations]; 动画属性设 ...

  6. ios之CABasicAnimation

    博主:最近iOS开发中用到CoreAnimation的framework来做动画效果,虽然以前也用过,但一直没有系统学习过,今天看到一篇非常详细的博文(虽然是日语,但真的写的很好),在此翻译出来供大家 ...

  7. CoreAnimation4-隐式动画和显式动画

    事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...

  8. 【转】iOS-Core-Animation-Advanced-Techniques(四)

    原文:http://www.cocoachina.com/ios/20150105/10812.html 隐式动画和显式动画 隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第 ...

  9. [iOS Animation]-CALayer 显示动画

    显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动 ...

  10. iOS核心动画高级技巧-4

    8. 显式动画 显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并 ...

随机推荐

  1. jquery方法回到顶部代码

    <style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...

  2. [转]network-manager与interfaces冲突

      [转]network-manager与interfaces冲突   http://blog.sina.com.cn/s/blog_48a45b9501010681.html   网络配置的两种方式 ...

  3. 调用webservice客户端方法 runtime modeler error: Wrapper class ××× is not found. Have you run APT to generate them?

    用wsimport生成webservice的客户端以后,调用客户端生成方法时总是出现 runtime modeler error: Wrapper class stardand.nrcms.nckin ...

  4. PB数据类型转换表

    数据类型转换表     MICROSOFT            PB(16Bit)            PB(32Bit)    Bool                      Boolean ...

  5. 桥接模式和NAT模式

    linux的目录结构 配置ip三种 模式 桥接模式 nat模式(VMnet8) 配置网关 DHCP动态分配IP设置 linux的目录结构 配置ip三种 模式 桥接模式 (1) 设置主系统的" ...

  6. VDN For PB Web实现消息推送

    利用VesnData.Net(VDN)的互联网数据驱动功能我们实现了PB连接互联网数据库的功能.在互联网开发的过程中我们往往有些消息或者数据希望即时能够通知到各个客户端,现在比较流行的一种技术就是消息 ...

  7. Valuable site on github

    https://thegrid.io/?utm_source=adwords&utm_medium=cpc&utm_campaign=thegrid-display-english&a ...

  8. MyEclipse导入jquery等文件报错的解决方案

    1.选中报错的jquery文件例如“jquery-1.8.0.min.js”. 2.右键选择 MyEclipse-->Exclude From Validation . 3.再右键选择 MyEc ...

  9. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  10. 使用Log Explorer查看和恢复数据

    由于一次意外操作,把QC数据库中的BUG表数据给删掉了.崩溃-上网找了下恢复方法,找到一款Log Explorer.下载安装使用后,发现这款软件的确不错,收藏ing.   本次的使用的Log Expl ...