CAKeyframeAnimation—關(guān)鍵幀動(dòng)畫

一创泄、簡(jiǎn)介

  • 關(guān)鍵幀動(dòng)畫知染,也是CAPropertyAnimation的子類
結(jié)構(gòu)圖.png

二肋僧、與CABasicAnimation的區(qū)別

  • CABasicAnimation:

    • 只能從一個(gè)數(shù)值(fromValue)變到另一個(gè)數(shù)值(toValue)
  • CAKeyframeAnimation:

    • 會(huì)使用一個(gè)NSArray保存這些數(shù)值
  • CABasicAnimation可看做是只有2個(gè)關(guān)鍵幀的CAKeyframeAnimation關(guān)鍵幀動(dòng)畫

三、屬性說明

values 關(guān)鍵幀數(shù)組

  • 上述的NSArray對(duì)象。里面的元素稱為“關(guān)鍵幀”(keyframe)嫌吠。
  • 動(dòng)畫對(duì)象會(huì)在指定的時(shí)間(duration)內(nèi)止潘,依次顯示values數(shù)組中的每一個(gè)關(guān)鍵幀

path 路徑軌跡

  • path:可以設(shè)置一個(gè)CGPathRef、CGMutablePathRef辫诅,讓圖層按照路徑軌跡移動(dòng)凭戴。
  • path只對(duì)CALayer的anchorPoint和position起作用。
  • 注意:如果設(shè)置了path炕矮,那么values關(guān)鍵幀將被忽略

keyTimes:關(guān)鍵幀所對(duì)應(yīng)的時(shí)間點(diǎn)

  • keyTimes:可以為對(duì)應(yīng)的關(guān)鍵幀指定對(duì)應(yīng)的時(shí)間點(diǎn)么夫,其取值范圍為0到1.0
  • keyTimes中的每一個(gè)時(shí)間值都對(duì)應(yīng)values中的每一幀。如果沒有設(shè)置keyTimes肤视,各個(gè)關(guān)鍵幀的時(shí)間是平分的

四档痪、實(shí)例

  • 實(shí)例:


    關(guān)鍵幀動(dòng)畫.gif
    • 控制器的view上,1.綠色的view钢颂,橢圓路徑位移钞它;2._redLayer 抖動(dòng)動(dòng)畫
  • 代碼實(shí)現(xiàn):如下

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *greenView;

@property (nonatomic, weak) CALayer *redLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 1. 添加redLayer圖層 到view.layer上
    CALayer *layer = [CALayer layer];
    
    _redLayer = layer;
    
    layer.backgroundColor = [UIColor redColor].CGColor;
    
    layer.frame = CGRectMake(50, 50, 200, 200);
    
    [self.view.layer addSublayer:_redLayer];
}

- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{
    
    /** 2. 綠色的view拜银,橢圓路徑位移  */
    [self positionChange];
    
    /** _redLayer 抖動(dòng) 動(dòng)畫 */
     
    [self anim];
}

- (void)positionChange{
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
    anim.keyPath = @"position";
    
    anim.duration = 2;
    
    // 取消反彈
    // 告訴在動(dòng)畫結(jié)束的時(shí)候不要移除
    anim.removedOnCompletion = NO;
    // 始終保持最新的效果
    anim.fillMode = kCAFillModeForwards;
    
    // Oval 橢圓  路徑軌跡
    anim.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)].CGPath;
    
    // 將動(dòng)畫對(duì)象添加到 綠色視圖的layer上去
    [_greenView.layer addAnimation:anim forKey:nil];
}


/**
 * _redLayer 抖動(dòng)動(dòng)畫
 */
- (void)anim{
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
    anim.duration = 0.3;
    anim.keyPath = @"transform";
    NSValue *value =  [NSValue valueWithCATransform3D:CATransform3DMakeRotation((-15) / 180.0 * M_PI, 0, 0, 1)];
    NSValue *value1 =  [NSValue valueWithCATransform3D:CATransform3DMakeRotation((15) / 180.0 * M_PI, 0, 0, 1)];
    NSValue *value2 =  [NSValue valueWithCATransform3D:CATransform3DMakeRotation((-15) / 180.0 * M_PI, 0, 0, 1)];
    anim.values = @[value,value1,value2];
    
    anim.repeatCount = MAXFLOAT;
    
    [_redLayer addAnimation:anim forKey:nil];
}
@end
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末殊鞭,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子尼桶,更是在濱河造成了極大的恐慌操灿,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泵督,死亡現(xiàn)場(chǎng)離奇詭異趾盐,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)小腊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門救鲤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人秩冈,你說我怎么就攤上這事本缠。” “怎么了入问?”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵丹锹,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我芬失,道長(zhǎng)楣黍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任棱烂,我火速辦了婚禮租漂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己窜锯,他們只是感情好张肾,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锚扎,像睡著了一般吞瞪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上驾孔,一...
    開封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天芍秆,我揣著相機(jī)與錄音,去河邊找鬼翠勉。 笑死妖啥,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的对碌。 我是一名探鬼主播荆虱,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼朽们!你這毒婦竟也來了怀读?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤骑脱,失蹤者是張志新(化名)和其女友劉穎菜枷,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叁丧,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡啤誊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拥娄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚊锹。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖稚瘾,靈堂內(nèi)的尸體忽然破棺而出牡昆,到底是詐尸還是另有隱情,我是刑警寧澤孟抗,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布迁杨,位于F島的核電站,受9級(jí)特大地震影響凄硼,放射性物質(zhì)發(fā)生泄漏铅协。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一摊沉、第九天 我趴在偏房一處隱蔽的房頂上張望狐史。 院中可真熱鬧,春花似錦、人聲如沸骏全。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽姜贡。三九已至试吁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間楼咳,已是汗流浹背熄捍。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留母怜,地道東北人余耽。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像苹熏,于是被迫代替她去往敵國(guó)和親碟贾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 定義:任何動(dòng)畫要表現(xiàn)出運(yùn)動(dòng)或者變化,至少需要兩個(gè)不同的關(guān)鍵狀態(tài),而中間的狀態(tài)的變化可以通過插值計(jì)算完成,從而形成補(bǔ)...
    frankisbaby閱讀 1,471評(píng)論 0 0
  • 上一章學(xué)習(xí)的是 CABasicAnimation, 其實(shí) CABasicAnimation 和 CAKeyfram...
    高手世界閱讀 6,090評(píng)論 0 2
  • 屬性說明 values : 一個(gè)NSArray對(duì)象轨域。里面的元素稱為”關(guān)鍵幀”(keyframe),動(dòng)畫對(duì)象會(huì)在指定...
    我是七月閱讀 5,106評(píng)論 0 8
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種:UIView動(dòng)畫袱耽,核心動(dòng)畫,幀動(dòng)畫疙挺,自定義轉(zhuǎn)場(chǎng)動(dòng)畫扛邑。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,092評(píng)論 1 23
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果怜浅,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜铐然,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,485評(píng)論 6 30