iOS 動(dòng)畫十:Layer Keyframe Animations and Struct Properties

Layer 上的 Keyframe 動(dòng)畫與 UIView 上的關(guān)鍵幀動(dòng)畫有些不同洋腮。UIView 關(guān)鍵幀動(dòng)畫是將獨(dú)立的簡(jiǎn)單動(dòng)畫組合在一起的一種簡(jiǎn)單方法夏哭。它們可以使不同的視圖和屬性產(chǎn)生動(dòng)畫效果,動(dòng)畫可以重疊珠十,或者中間有空隙。

相反,CAKeyframeAnimation 允許我們對(duì)給定 Layer 上的單個(gè)屬性進(jìn)行動(dòng)畫處理谜洽。我們可以定義動(dòng)畫的不同關(guān)鍵點(diǎn),但是動(dòng)畫不能有任何間隙或重疊吴叶。

keyframe animations

通過(guò)使用 fromValue 和 toValue阐虚,Core Animation 在指定的持續(xù)時(shí)間內(nèi)逐步修改這些值之間的特定層屬性。

比如蚌卤,當(dāng)旋轉(zhuǎn)一個(gè) layer 45°实束、-45°(或π/ 4和-π/ 4),我們只需要指定這兩個(gè)值逊彭,層會(huì)渲染 π/ 4 和 -π/ 4 之間的所有中間值來(lái)完成動(dòng)畫咸灿。

keyframe animations

CAKeyframeAnimation 使用 array of values 來(lái)動(dòng)畫,而不是由 fromValue 到 toValue 那樣動(dòng)畫侮叮。array 中的值的是動(dòng)畫的關(guān)鍵值避矢。除此,我們還需要提供動(dòng)畫應(yīng)該到達(dá)每個(gè)值的關(guān)鍵點(diǎn)的時(shí)間囊榜。

上面的動(dòng)畫审胸,layer 從 45° 旋轉(zhuǎn)到 -45° ,但這次有兩個(gè)不同的階段:首先,前三分之二時(shí)間里它從 45° 旋轉(zhuǎn)到 22°卸勺,剩下的時(shí)間里砂沛,它從 22° 旋轉(zhuǎn)到 -45°。

Animating struct values

Struct instances 是 Swift 中的一等公民曙求,在語(yǔ)法上碍庵,處理類和結(jié)構(gòu)體之間沒有什么區(qū)別。

然而悟狱,Core Animation 是構(gòu)建在 C 上的 Objective-C 框架静浴,這意味著結(jié)構(gòu)體的處理方式非常不同。Objective-C api 喜歡處理對(duì)象挤渐,所以結(jié)構(gòu)體需要一些特殊的處理苹享。

這就是為什么將諸如 color 或 number 的 layer 屬性進(jìn)行動(dòng)畫是相對(duì)容易的,但是對(duì)諸如 CGPoint 這樣的結(jié)構(gòu)體屬性進(jìn)行動(dòng)畫并不那么容易的原因挣菲。

CALayer 的許多可動(dòng)畫屬性都具有 struct 值富稻,包括 CGPoint 類型的 position掷邦、CATransform3D 類型的 transform 以及 CGRect 類型的 bounds 。為了幫助管理椭赋,Cocoa 包含 NSValue 類抚岗,它可以將一個(gè) struct 值 “裝箱” 或 “包裝” 成為對(duì)象。

NSValue 附帶了許多方便的初始化方法哪怔,我們可以將它們用于需要裝箱的每個(gè)結(jié)構(gòu)體宣蔚,例如如下初始化方法:

init(cgPoint: CGPoint)
init(cgSize: CGSize) 
init(cgRect rect: CGRect) 
init(caTransform3D: CATransform3D)

“boxes in” or “wraps” “裝箱” 或 “包裝”使用示例:

let move = CABasicAnimation(keyPath: "position") 
move.duration = 1.0 
move.fromValue = NSValue(cgPoint: CGPoint(x: 100.0, y: 100.0)) 
move.toValue = NSValue(cgPoint: CGPoint(x: 200.0, y: 200.0))
Intermediate keyframe animations
let balloon = CALayer() 
balloon.contents = UIImage(named: "balloon")!.cgImage 
balloon.frame = CGRect(x: -50.0, y: 0.0, width:50.0, height: 65.0) view.layer.insertSublayer(balloon, below: username.layer)

如果我們想要在屏幕上顯示一個(gè)圖像,但不需要使用 UIView 的一些特性(比如自動(dòng)布局約束认境、附加手勢(shì)識(shí)別器等等)胚委,那么我們可以使用一個(gè) CALayer 添加圖像,如上面的代碼示例叉信。

flight.values = [ 
  CGPoint(x: -50.0, y: 0.0),
  CGPoint(x: view.frame.width + 50.0, y: 160.0), 
  CGPoint(x: -50.0, y: loginButton.center.y) 
].map { NSValue(cgPoint: $0) } // 使用map將一個(gè)點(diǎn)數(shù)組巧妙地轉(zhuǎn)換成一個(gè)以nsvalue形式框起來(lái)的點(diǎn)數(shù)組
flight.keyTimes = [0.0, 0.5, 1.0]

使用 map 將一個(gè) CGPoint 數(shù)組巧妙地轉(zhuǎn)換成一個(gè)以 NSValue 形式框起來(lái)的點(diǎn)數(shù)組亩冬。

動(dòng)畫最后效果:


demo下載

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市硼身,隨后出現(xiàn)的幾起案子硅急,更是在濱河造成了極大的恐慌,老刑警劉巖佳遂,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件营袜,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡丑罪,警方通過(guò)查閱死者的電腦和手機(jī)荚板,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)吩屹,“玉大人跪另,你說(shuō)我怎么就攤上這事∷盥停” “怎么了罚斗?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)宅楞。 經(jīng)常有香客問我,道長(zhǎng)袱吆,這世上最難降的妖魔是什么厌衙? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮绞绒,結(jié)果婚禮上婶希,老公的妹妹穿的比我還像新娘。我一直安慰自己蓬衡,他們只是感情好喻杈,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布彤枢。 她就那樣靜靜地躺著,像睡著了一般筒饰。 火紅的嫁衣襯著肌膚如雪缴啡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天瓷们,我揣著相機(jī)與錄音业栅,去河邊找鬼。 笑死谬晕,一個(gè)胖子當(dāng)著我的面吹牛碘裕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播攒钳,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼帮孔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了不撑?” 一聲冷哼從身側(cè)響起文兢,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎燎孟,沒想到半個(gè)月后禽作,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡揩页,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年旷偿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片爆侣。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡萍程,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出兔仰,到底是詐尸還是另有隱情茫负,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布乎赴,位于F島的核電站忍法,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏榕吼。R本人自食惡果不足惜饿序,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望羹蚣。 院中可真熱鬧原探,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至型型,卻和暖如春段审,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背输莺。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工戚哎, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嫂用。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓型凳,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親嘱函。 傳聞我的和親對(duì)象是個(gè)殘疾皇子甘畅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

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