之一:CABasicAnimation - 基本动画
嗷呜嗷呜嗷呜
// 将视图作为属性方便后面执行多个不同动画
_myView = [[UIView alloc] init];
_myView.layer.position = CGPointMake(, );
_myView.layer.bounds = CGRectMake(, , , );
_myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:_myView];
[_myView release];
平移动画(1)
// 创建一个CABasicAnimation类型的动画对象并对CALayer的position属性执行动画
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"]; // 动画持续1.5s
anim.duration = 1.5; // position属性值从(50, 80)渐变到(300, 350)
anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(, )];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(, )]; // 设置动画的代理
anim.delegate = self; // 保持动画执行后的状态
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards; // 添加动画对象到myView的图层上
[_myView.layer addAnimation:anim forKey:@"translate"];
- 上面实现了平移动画
- 想要实现不同的效果,最关键的地方就是第2行CABasicAnimation对象的初始化方法中keyPath的设定。必须是CALayer的某项属性。
- 第8、9行这里的属性接收的是id类型的参数所以不能直接使用CGPoint这种结构体类型,而是要先包装成NSValue对象后再使用。
注意:可以尝试将第9行的toValue换成byValue 区别:前者是到指定的位置,后者是在当前的位置上增加多少。
- 默认情况下,动画执行完毕后,动画会自动从CALayer上移除,CALayer又会回到原来的状态。为了保持动画执行后的状态,可以加入第15、16行代码
fillMode的作用就是决定当前对象过了非active时间段的行为。比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.
kCAFillModeRemoved 默认值 也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态. - 第19行后面的@"translate"只是给动画对象起了个名称,也可以直接给个nil,但是为方便以后可以调用CALayer的removeAnimationForKey:方法根据动画名称来移除相应的动画
- 第12行后面的self是视图控制器。代理需要实现的方法:
#pragma mark -----动画开始-----
- (void)animationDidStart:(CAAnimation *)anim {
NSLog(@"动画开始了");
} #pragma mark -----动画结束-----
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
// 查看一下动画执行完毕后的position值
NSString *string = NSStringFromCGPoint(_myView.layer.position);
NSLog(@"动画结束了,position:%@", string);
}
运行后发现, 在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。
// 移除动画
[_myView.layer removeAnimationForKey:@"translate"]
平移动画(2)
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
anim.duration = ; CATransform3D form = CATransform3DMakeTranslation(, , );
anim.toValue = [NSValue valueWithCATransform3D:form]; [_myView.layer addAnimation:anim forKey:nil];
- 通过CALayer的transform属性实现平移动画,layer会从自己的初始位置平移到(350, 350)位置
- 通过transform(KVC)的方式来进行设置,可以简单实现3D效果的平移、缩放、旋转效果。
- 可查看API文档搜索CABasicAnimation animationWithKeyPath Types
缩放动画(1)
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];
anim.duration = ; anim.toValue = [NSValue valueWithCGRect:CGRectMake(, , , )]; [_myView.layer addAnimation:anim forKey:nil];
通过CALayer的bounds属性实现缩放动画,layer会从原来的尺寸(100x100)变为30x30
缩放动画(2)
CABasicAnimation *anim = [CABasicAnimation
animationWithKeyPath:@"transform"];
anim.duration = 1.5; // 动画持续1.5s // CALayer的宽度从0.5倍变为2倍
// CALayer的高度从0.5倍变为1.5倍
anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, )];
anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(, 1.5, )]; [_myView.layer addAnimation:anim forKey:nil];
旋转动画
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
anim.duration = 1.5; // 绕着(1, 1, 0)这个向量轴顺时针旋转45°
anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, , , )]; [_myView.layer addAnimation:anim forKey:nil];
提示:如果要仅需要图形以2D的方式旋转,只要把CATransform3DMakeRotation在z方向上的值改为1即可。
anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 1, 1, 0)];
- 通过以上可以发现其实可以不用设置fromValue,只设置了toValue
- CABasicAnimation虽然能够做很多基本的动画效果,但是有个局限性,只能让CALayer的属性从某个值渐变到另一个值,仅仅是在2个值之间渐变
之一:CABasicAnimation - 基本动画的更多相关文章
- 核心动画基础动画(CABasicAnimation)关键帧动画
1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATran ...
- IOS第18天(5,CABasicAnimation基本动画)
******* #import "HMViewController.h" @interface HMViewController () @property (nonatomic, ...
- Swift - 使用CABasicAnimation实现动画效果
1,CABasicAnimation类只有三个属性: fromValue:开始值 toValue:结束值 Duration:动画的时间 2,通过animationWithKeyPath键值对的方式设置 ...
- CABasicAnimation 基本动画
几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...
- CABasicAnimation 基本动画 分类: ios技术 2015-07-16 17:10 132人阅读 评论(0) 收藏
几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...
- Core Animation之CABasicAnimation(基础动画)
#import "ViewController.h" @interface ViewController () @property(nonatomic,strong)UIButto ...
- CABasicAnimation 划线动画
CGFloat animateDuration = ; UIBezierPath *bezierPath = [[UIBezierPath alloc] init]; CGPoint centerFr ...
- CABasicAnimation添加动画离开屏幕就动画停止的问题
解决方法: animation.removedOnCompletion = NO;
- iOS开发CABasicAnimation动画理解
1.CALayer简介 CALayer是个与UIView很类似的概念,同样有backgroundColor.frame等相似的属性,我们可以将UIView看做一种特殊的CALayer.但实际上UIVi ...
随机推荐
- 优秀工具推荐:超实用的 CSS 库,样板和框架
当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间.在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效. 您可能感兴趣的相关文章 精 ...
- Windows Azure Traffic Manager (6) 使用Traffic Manager,实现本地应用+云端应用的高可用
<Windows Azure Platform 系列文章目录> 注意:本文介绍的是使用国内由世纪互联运维的Azure China服务. 以前的Traffic Manager,背后的Serv ...
- Elasticsearch入门必备——ES中的字段类型以及常用属性
使用Elasticsearch时,了解字段的概念,是必不可少的.毕竟无论是es还是传统的数据库,都无法弱化字段的类型. 背景知识 在Es中,字段的类型很关键: 在索引的时候,如果字段第一次出现,会自动 ...
- LeetCode - Balanced Binary Tree
题目: Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced bin ...
- C#生成验证码
生成验证码的类: using System; using System.Collections.Generic; using System.Drawing; using System.Text; na ...
- 优化Angular应用的性能
MVVM框架的性能,其实就取决于几个因素: 监控的个数 数据变更检测与绑定的方式 索引的性能 数据的大小 数据的结构 我们要优化Angular项目的性能,也需要从这几个方面入手. 1. 减少监控值的个 ...
- Mysql高并发优化
一.数据库结构的设计 1.数据行的长度不要超过8020字节,如果超过这个长度的话在物理页中这条数据会占用两行从而造成存储碎片,降低查询效率. 2.能够用数字类型的字段尽量选择数字类型而不用字符串类型的 ...
- Topshelf + ServiceModelEx + Nlog 从头构建WCF
前言 Topshelf可以很方便的构建windows service,而且在本地开发时也可以构建Console宿主,因此很方便WCF的开发. ServiceModelEx则提供了很多便利的方法来配置w ...
- LeetCode124:Binary Tree Maximum Path Sum
题目: Given a binary tree, find the maximum path sum. The path may start and end at any node in the tr ...
- GNOME on Arch Linux
Arch Linux上Gnome桌面截图欣赏: 相比而言,Debian的壁纸一直好像格调不够啊: