iOS動(dòng)畫學(xué)習(xí) 一(做一個(gè)帶秒蒲拉、分肃拜、時(shí)針的時(shí)鐘)

因?yàn)橹绊?xiàng)目中接觸到很少動(dòng)畫,前幾天面試遇到有人問到關(guān)于動(dòng)畫的東西雌团,所以打算系統(tǒng)的學(xué)習(xí)一下動(dòng)畫燃领,在此記錄一下催促自己學(xué)習(xí)。



下邊開始今天的學(xué)習(xí)內(nèi)容锦援。

做之前先看一下要怎么做猛蔽,看一下這個(gè)圖片步驟。

我們?cè)O(shè)計(jì)好這些步驟灵寺,就可以開始做了:

* 第一步:創(chuàng)建layer

//創(chuàng)建layer? ?

CALayer *layer = [[CALayer alloc]init];? ?

layer.bounds = CGRectMake(0, 0, 200, 200);? ?

//? ? position:默認(rèn)情況下相當(dāng)于UIView的center? ?

layer.position = self.view.center;

//? ? CALayer的內(nèi)容曼库。可以設(shè)置為圖片略板,但是需要橋接毁枯。橋接不需要自己額外設(shè)置,編譯后編譯器會(huì)自動(dòng)提示叮称,讓Xcode自動(dòng)幫我們橋接就可以啦? ?

layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"clock.jpeg"].CGImage);? ?

//添加到view的layer上? ? [self.view.layer addSublayer:layer];

* 第二步 設(shè)置秒种玛、分藐鹤、時(shí)

秒針、時(shí)針設(shè)置都是一樣相同赂韵,所以只貼出了一個(gè)秒針的創(chuàng)建方法?

//? ? 設(shè)置秒針? ?

secondHand = [[UIView alloc]init];? ?

secondHand.backgroundColor = [UIColor orangeColor];? ?

secondHand.bounds = CGRectMake(0, 0, 1.2, 60);? ?

secondHand.center = self.view.center;?? ?

//? ? 錨點(diǎn)有X娱节、Y組成。錨點(diǎn)的數(shù)值范圍就是0~1右锨。0表示在最左邊或者最上邊括堤,1表示在最右邊或者最下邊。有點(diǎn)模糊是不绍移?再來張圖就更清楚了:?? ?? ?

//修改錨點(diǎn)? ?

secondHand.layer.anchorPoint = CGPointMake(0.5, 1);? ??

[self.view addSubview:secondHand];

* 創(chuàng)建CADisplayLink進(jìn)行每秒刷新悄窃,進(jìn)入秒針走動(dòng)動(dòng)畫(我們一開始想到的辦法就是用定時(shí)器,每一秒鐘刷新一次秒針蹂窖。但是使用了定時(shí)器之后轧抗,有一個(gè)問題。發(fā)現(xiàn)秒針比電腦上的稍微慢一點(diǎn)瞬测。是因?yàn)樗⑿骂l率和電腦不一樣横媚。)

NStimer與CADisplayLink的區(qū)別

*NSTimer占用系統(tǒng)資源較多

*NSTimer使用完后,一定要銷毀月趟,把它設(shè)置成nil灯蝴。

*CADisplayLink本來就在進(jìn)程中,每秒進(jìn)行60次孝宗。

*核心動(dòng)畫的時(shí)候穷躁,最好使用CADisplayLink

//? ? 使用CADisplayLink來刷新時(shí)鐘。

? ? //? ? 創(chuàng)建CADisplayLink

? ? CADisplayLink*link = [CADisplayLinkdisplayLinkWithTarget:selfselector:@selector(clockRunning)];

? ? //? ? 將創(chuàng)建的CADisplayLink加入到主線程中

[linkaddToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

* 進(jìn)入每秒動(dòng)畫因妇,并獲取到當(dāng)前時(shí)間

//獲取本地時(shí)區(qū)

NSTimeZone *tZone = [NSTimeZone localTimeZone];

//? ? 獲取日歷

NSCalendar*calendar = [NSCalendarcurrentCalendar];

//獲取系統(tǒng)當(dāng)前時(shí)間

NSDate*currentDate = [NSDatedate];

//設(shè)置日歷的時(shí)區(qū)

[calendarsetTimeZone:tZone];

//取出當(dāng)前的時(shí)分秒

NSDateComponents *currentTime = [calendar components:NSCalendarUnitSecond|NSCalendarUnitMinute|NSCalendarUnitHour|NSCalendarUnitTimeZone fromDate:currentDate];

*? **下邊就是進(jìn)入到這篇最核心的地方问潭,根據(jù)當(dāng)前時(shí)間計(jì)算時(shí)分秒針弧度,然后讓自己設(shè)置的View進(jìn)行形變**

//? ? CGAffineTransform是一個(gè)用于處理形變的類,其可以改變控件的平移婚被、縮放狡忙、旋轉(zhuǎn)等,其坐標(biāo)系統(tǒng)采用的是二維坐標(biāo)系,即向右為x軸正方向,向下為y軸正方向

? ? CGFloatangle = (M_PI*2/60) * currentTime.second;

? ? secondHand.transform = CGAffineTransformMakeRotation(angle);

? ? CGFloatminuteAngle = (M_PI*2/60) * currentTime.minute;

? ? minuteHand.transform = CGAffineTransformMakeRotation(minuteAngle);

? ? CGFloathourAngle = (M_PI*2/12) * currentTime.hour;

? ? hourHand.transform = CGAffineTransformMakeRotation(hourAngle);

但是這上邊發(fā)現(xiàn)表已經(jīng)可以走了,但是有個(gè)問題址芯,當(dāng)秒針走動(dòng)一圈的時(shí)候灾茁,到最后時(shí)針才會(huì)走動(dòng)一下,我們想讓他每秒都會(huì)走谷炸,怎么做呢北专?

我們只需把下邊的分鐘、時(shí)轉(zhuǎn)換成秒進(jìn)行角度轉(zhuǎn)換就可以了淑廊;

?CGFloatangle = (M_PI*2/60) * currentTime.second;

secondHand.transform = CGAffineTransformMakeRotation(angle);

CGFloatminuteAngle = (M_PI*2/60/60) * (currentTime.minute *60+ currentTime.second);

minuteHand.transform = CGAffineTransformMakeRotation(minuteAngle);

CGFloathourAngle = (M_PI*2/60/60/12) * (currentTime.hour*60*60+currentTime.minute*60+currentTime.second);

//? ? CGFloat hourAccurate = (M_PI * 2 / 12) * currentTime.second / 60 / 60;

hourHand.transform = CGAffineTransformMakeRotation(hourAngle);

到這里我們就把這個(gè)時(shí)鐘最好了!

看下效果:


時(shí)鐘

結(jié)束L嘏亍<境汀录粱!

參考文章:http://www.reibang.com/p/3a96cc95da5c

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市画拾,隨后出現(xiàn)的幾起案子啥繁,更是在濱河造成了極大的恐慌,老刑警劉巖青抛,帶你破解...
    沈念sama閱讀 212,454評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件旗闽,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蜜另,警方通過查閱死者的電腦和手機(jī)适室,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來举瑰,“玉大人捣辆,你說我怎么就攤上這事〈搜福” “怎么了汽畴?”我有些...
    開封第一講書人閱讀 157,921評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長耸序。 經(jīng)常有香客問我忍些,道長,這世上最難降的妖魔是什么坎怪? 我笑而不...
    開封第一講書人閱讀 56,648評(píng)論 1 284
  • 正文 為了忘掉前任罢坝,我火速辦了婚禮,結(jié)果婚禮上芋忿,老公的妹妹穿的比我還像新娘炸客。我一直安慰自己,他們只是感情好戈钢,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評(píng)論 6 386
  • 文/花漫 我一把揭開白布痹仙。 她就那樣靜靜地躺著,像睡著了一般殉了。 火紅的嫁衣襯著肌膚如雪开仰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評(píng)論 1 291
  • 那天薪铜,我揣著相機(jī)與錄音众弓,去河邊找鬼。 笑死隔箍,一個(gè)胖子當(dāng)著我的面吹牛谓娃,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蜒滩,決...
    沈念sama閱讀 39,090評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼滨达,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼奶稠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起捡遍,我...
    開封第一講書人閱讀 37,817評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤锌订,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后画株,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辆飘,經(jīng)...
    沈念sama閱讀 44,275評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評(píng)論 2 327
  • 正文 我和宋清朗相戀三年谓传,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蜈项。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,724評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡良拼,死狀恐怖战得,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情庸推,我是刑警寧澤常侦,帶...
    沈念sama閱讀 34,409評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站贬媒,受9級(jí)特大地震影響聋亡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜际乘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評(píng)論 3 316
  • 文/蒙蒙 一坡倔、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧脖含,春花似錦罪塔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至关拒,卻和暖如春佃蚜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背着绊。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評(píng)論 1 266
  • 我被黑心中介騙來泰國打工谐算, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人归露。 一個(gè)月前我還...
    沈念sama閱讀 46,503評(píng)論 2 361
  • 正文 我出身青樓洲脂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親剧包。 傳聞我的和親對(duì)象是個(gè)殘疾皇子恐锦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評(píng)論 2 350

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