基于属性的动画

基于属性的动画是指在动画执行过程中随时间改变的是layer层的一些单一属性,比如positionbackground color以及bounds等。本文主要阐述的是核心动画的抽象属性动画以及为layer属性所提供的基本的以及关键帧动画。

Property-Based Abstraction

CAPropertyAnimationCAAnimation的一个为layer的某个属性提供特定动画的一个子类。基于属性的动画支持那些能够被数学插入属性值的一些熟悉的动画效果,包括:

  • 整数和小数
  • CGRect, CGPoint, CGSizeCGAffineTransform结构体
  • CATransform3D结构体
  • CGColor以及CGImage

像所有的动画一样,属性动画必须要是某一个特定layer的动画。这个需要被执行动画的layer属性是通过key-value键值对的方式来访问。例如,需要对一个layer的x坐标执行动画,需要通过key path“position.x”来定义一个动画,并且将这个动画赋值给这个layer。
你不需要直接创建一个CAPropertyAnimation对象实例,而是需要创建一个CABasicAnimation或者CAKeyframeAnimation的实例对象。

Basic Animations

CABasicAnimation动画类为layer属性提供了基本的、单关键帧动画,可以构建一个CABasicAnimation实例对象,并通过* animationWithKeyPath:方法来定义layer所需要执行动画的属性。
图1表示的是layer的position属性从
(74.0,74.0)(566.0,406.0),并且父层的bounds属性为 (0.0,0.0,640.0,480.0)*。

3second.png

配置基础动画的插入值

通过CABasicAnimationfromValue、* byValuetoValue属性来确定被插入的值。虽然都是可选项,但是至少有两个值应该是非空的,也就是(non-nil*)的。

这几个属性的使用方法通常有以下几种:

  • fromValue以及toValue都是非空的,那么插入的值就是介于这两者之间的。
  • fromValue以及byValue是非空的,那么插入的值就是介于fromValue以及(fromValue+byValue)之间的。
  • byValuetoValue是非空的,那么插入的值就介于(toValue-byValue)以及toValue之间的。
  • fromValue是非空的,那么插入的值就介于fromValue和当前值的中间。
  • toValue是非空的,那么插入的值就在keyPath的当前值和toValue之间
  • byValue非空,随时间变化的值在keyPath对应的当前值以及该值加上byValue之后的值中间
  • 所有的属性都nil

基础动画的例子

该段代码能够实现和图1一样的效果

CABasicAnimation *theAnimation;
 
// create the animation object, specifying the position property as the key path
// the key path is relative to the target animation object (in this case a CALayer)
theAnimation=[CABasicAnimation animationWithKeyPath:@"position"];
 
// set the fromValue and toValue to the appropriate points
theAnimation.fromValue=[NSValue valueWithPoint:NSMakePoint(74.0,74.0)];
theAnimation.toValue=[NSValue valueWithPoint:NSMakePoint(566.0,406.0)];
 
// set the duration to 3.0 seconds
theAnimation.duration=3.0;
 
// set a custom timing function
theAnimation.timingFunction=[CAMediaTimingFunction functionWithControlPoints:0.25f :0.1f :0.25f :1.0f];

关键帧动画——Keyframe Animations

CAKeyframeAnimation与基础动画相似,支持关键帧动画。但是,它是可以为执行动画的目标对象的某个属性设置一组数值来表述该属性值随动画进行的变化。

图2 表述了一个layer的position属性的使用CGPathRef的5秒钟的关键帧动画

5second.png

关键帧动画的值

关键帧动画通常是以以下两种方式来使用:通过pathCore Graphics path)属性或者是一组Values属性

Core Graphics通常用来执行layer层的anchorPoint或者position动画,也就是说,执行的是CGPoints属性动画。路径中的每一个点都定义了确定关键帧动画的一部分以及插入的点(除了moveto点),但是如果拥有了一个确定的path路径的话,那么这个values属性值就会被忽略。
默认情况下,layer会按照设定的旋转方式进行旋转执行,设定旋转方式rotationMode为* kCAAnimationRotateAuto或者 kCAAnimationRotateAutoReverse会使layer依照路径轨迹进行旋转。
提供一系列的
values*属性值供layer的不同类型属性执行动画。例如:

  • 一组CGImage对象并且设置动画的关键路径为layercontent属性,将会使layer按照给定的图片执行动画。
  • 一组CGRects对象并且设置动画关键路径为layerframe属性,会使layer的内容在给定的矩形范围内重复执行。
  • 一组CATransform3D矩阵,并且设定动画关键路径为transform属性。

Keyframe Timing and Pacing Extensions

关键帧动画要比基本动画拥有更加复杂的时间以及执行节奏模型。
忽略继承的timingFunction属性,可以传一组数值给CAMediaTimingFunction。每个时间函数都描述了关键帧随动画执行的变化。
虽然CAKeyframeAnimation拥有duration属性,但是可以通过keyTimes属性来细微的调整动画的执行时机。
keyTimes属性定义了动画执行范围内关键帧的一系列NSNumber对象。每个值都是介于0.0~1.0之间的。所有keyTimes元素定义了关键帧的值在整个动画持续时间内百分比。每一个元素都不能比之前的元素小。
keyTimes的值基于calculationMode属性的值:

  • 如果calculationMode设置为kCAAnimationLinear,那么第一个和最后一个元素必须分别为0.01.0
  • 如果calculationMode设置为kCAAnimationDiscrete,那么第一个元素必须是0.0
  • 如果calculationMode设置为kCAAnimationPaced,那么keyTimes属性的值就没有作用了。

关键帧动画例子

下面的这段代码会形成和图2一样的动画效果。

// create a CGPath that implements two arcs (a bounce)
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,74.0,74.0);
CGPathAddCurveToPoint(thePath,NULL,74.0,500.0,
                                   320.0,500.0,
                                   320.0,74.0);
CGPathAddCurveToPoint(thePath,NULL,320.0,500.0,
                                   566.0,500.0,
                                   566.0,74.0);
 
CAKeyframeAnimation * theAnimation;
 
// create the animation object, specifying the position property as the key path
// the key path is relative to the target animation object (in this case a CALayer)
theAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
theAnimation.path=thePath;
 
// set the duration to 5.0 seconds
theAnimation.duration=5.0;
 
 
// release the path
CFRelease(thePath);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容