iOS9 Day-by-Day :: Day 9 :: UIKit Dynamics

原文地址

這是一個(gè)系列文章亡笑,查看更多請(qǐng)移步目錄頁(yè)

UIKit Dynamics 在 iOS 7 中首次被介紹的屈溉,可以讓開發(fā)者通過簡(jiǎn)單的方式宵统,給應(yīng)用界面添加模擬物理世界的交互動(dòng)畫窿给。iOS 9 中又加入了一些大的改進(jìn),我們將在本文中查看一些抚芦。

Non-Rectangular Collision Bounds

在 iOS 9 之前倍谜,UIKitDynamics 的 collision bounds 只能是長(zhǎng)方形。這讓一些并非是完美的長(zhǎng)方形的碰撞效果看起來有些古怪叉抡。iOS 9 中支持三種 collision bounds 分別是 Rectangle(長(zhǎng)方形), Ellipse(橢圓形) 和 Path(路徑)尔崔。Path 可以是任意路徑,只要是逆時(shí)針的褥民,并且不是交叉在一起的季春。一個(gè)警告是,path 必須是凸面的不能使凹面的消返。

為了提供一個(gè)自定義的collision bounds 载弄,你可以子定義一個(gè) UIView 的子類。

code 1

如果你有個(gè)自定義的視圖有一個(gè)自定義的bounds撵颊,你同樣可以這么做宇攻。

UIFieldBehavior

在 iOS 9 之前,只有一種 gravity behaviour(重力感應(yīng))類型的 behaviour秦驯。開發(fā)者也無法擴(kuò)展或者自定義其他類型尺碰。

現(xiàn)在挣棕,UIKit Dynamics 包含了更多的 behaviours.

Linear Gravity

Radial Gravity

Noise

Custom

這些 behaviours 都有一些屬性可以用來設(shè)置不同的效果译隘,并且可以簡(jiǎn)單的添加和使用。

Building a UIFieldBehavior & Non-Rectangular Collision Bounds Example

我們來用創(chuàng)建一個(gè)例子洛心,把這兩個(gè)特性都融合進(jìn)來固耘。它有幾個(gè)視圖(一個(gè)橢圓和一個(gè)正方形)添加了一些碰撞邏輯和一些噪音的 UIFieldBehavior。

result 1

要使用 UIKit Dynamics,首先要?jiǎng)?chuàng)建一個(gè) UIDynamicAnimator词身。在 viewDidLoad方法中厅目,為你的變量創(chuàng)建一個(gè)引用。

code 2

現(xiàn)在你需要添加一些視圖法严,他們將會(huì)動(dòng)起來损敷。

code 3

這是我們給view 添加的兩個(gè)基本的behaviors。

code 4

第一個(gè) behaviors, 我們添加了一個(gè)重力感應(yīng)模型深啤。

code 5

接下來我們添加了一個(gè) UIFieldBehavior拗馒。使用noiseFieldWithSmoothness方法進(jìn)行了初始化。我們把方形和橢圓形添加到了behavior中溯街,然后給 animator 添加了 field behavior诱桂。

code 6

我們接著創(chuàng)建了一個(gè) UICollisionBehavior洋丐。這會(huì)阻止兩個(gè)元素在碰撞時(shí)疊加,并增加了物理模型的動(dòng)畫效果挥等。我們使用setTranslatesReferenceBoundsIntoBoundaryWithInsets友绝,給視圖添加了一個(gè)邊緣的設(shè)置。如果不設(shè)置這個(gè)盒子的話肝劲,剛才的重力感應(yīng)動(dòng)畫會(huì)把方形和橢圓形的視圖掉進(jìn)屏幕以下迁客,而回不來。(我們就看不到碰撞了)

說到重力感應(yīng)辞槐,我們需要確保他的方向始終是朝下的哲泊,也就是實(shí)際的物理世界中的方向。為了做到這點(diǎn)催蝗,我們需要使用 CoreMotion framework切威。創(chuàng)建一個(gè)CMMotionManager 變量。

code 7

我們?cè)O(shè)置一個(gè)變量作為類的屬性丙号,是因?yàn)槲覀兪冀K需要用到它先朦。否則的話,CMMotionManager 會(huì)因?yàn)楸会尫诺舳鵁o法更新犬缨。當(dāng)我們發(fā)現(xiàn)設(shè)備的方向發(fā)生變化喳魏,為們?cè)O(shè)置重力感應(yīng)模型的 gravityDirection 屬性來,讓重力的方向始終向下怀薛。

code 8

注意刺彩,我們這個(gè)例子只支持了 portrait一種模式,如果你希望支持全部的方向的話枝恋,你可以自己添加一些計(jì)算代碼创倔。

當(dāng)你打開應(yīng)用時(shí),你可以看到如下圖一樣的畫面焚碌。

visual station

方形視圖圍繞著橢圓移動(dòng)畦攘,但你無法看出什么門道。WWDC的session 229十电,介紹了一個(gè)方法知押,可以可視化的看到動(dòng)畫的效果。你需要添加一個(gè)橋接頭(如果是用swift寫的項(xiàng)目)鹃骂,添加以下代碼台盯。

code 9

這會(huì)暴露一些私有 API,讓UIDynamicAnimator 把debug模式打開畏线。這能讓你觀察到空間扭曲的情況静盅。在ViewController 類中,把 animator 的 debugEnable 屬性設(shè)置為 true象踊。

code 10

現(xiàn)在温亲,當(dāng)你打開應(yīng)用時(shí)棚壁,你就能夠看到 UIFieldBehavior 提供的空間扭曲了。

debug mode

你同樣能夠看到視圖碰撞時(shí),圍繞在方形和圓形上的的輪廓線栈虚。你還可以添加另外一些屬性袖外,他們并非 API 的標(biāo)注屬性,但是可以在lldb中使用魂务。比如 debugInterval 和 debugAnimationSpeed 曼验,當(dāng)你需要debug你的動(dòng)畫時(shí),他們會(huì)非常有幫助粘姜。

我們可以看到field 起了作用鬓照,可以清楚的看到碰撞的效果。如果我們想tweak更多屬性孤紧。我們可以給對(duì)象設(shè)置具體的數(shù)值豺裆。然后重啟應(yīng)用看看他的變化。我們給頁(yè)面添加三個(gè)UISlider 控制組件号显。分別控制力量臭猜,平滑度和速度。力量的組件數(shù)值范圍在0-25押蚤,其他兩個(gè)都是0-1蔑歌。

interface builder

當(dāng)你在Interface Builder中創(chuàng)建好,拖拽三個(gè)動(dòng)作事件到ViewController類揽碘。次屠,然后按下面設(shè)置,更新他們的屬性雳刺。

code 11

現(xiàn)在劫灶,運(yùn)行應(yīng)用。你可以通過控制條來設(shè)置屬性的具體值煞烫,以觀察動(dòng)畫的實(shí)際效果浑此。

result

希望這些能夠讓你快速理解 UIKit Dynamics 里UIFieldBehavior 和? non-rectangular? collision bounds APIs 是怎么工作和 debug 的累颂。我推薦你在真實(shí)的設(shè)備(而不是模擬器)中查看效果滞详,否則你看不出 motion 所帶來的效果變化。

延伸閱讀

想要了解更多關(guān)于 UIKit Dynamics 的新特性紊馏,請(qǐng)瀏覽 WWDC 2015 的 session 229 What’s New in UIKit Dynamics and Visual Effects料饥。另外,并忘了我們的 demo 項(xiàng)目文件可以在 Github 上找到朱监。

這是一個(gè)系列文章岸啡,查看更多請(qǐng)移步目錄頁(yè)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市赫编,隨后出現(xiàn)的幾起案子巡蘸,更是在濱河造成了極大的恐慌奋隶,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悦荒,死亡現(xiàn)場(chǎng)離奇詭異唯欣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)搬味,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門境氢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人碰纬,你說我怎么就攤上這事萍聊。” “怎么了悦析?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵寿桨,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我强戴,道長(zhǎng)牛隅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任酌泰,我火速辦了婚禮媒佣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘陵刹。我一直安慰自己默伍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布衰琐。 她就那樣靜靜地躺著也糊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪羡宙。 梳的紋絲不亂的頭發(fā)上狸剃,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音狗热,去河邊找鬼钞馁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛匿刮,可吹牛的內(nèi)容都是我干的僧凰。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼熟丸,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼训措!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤绩鸣,失蹤者是張志新(化名)和其女友劉穎怀大,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體呀闻,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡叉寂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了总珠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屏鳍。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖局服,靈堂內(nèi)的尸體忽然破棺而出钓瞭,到底是詐尸還是另有隱情,我是刑警寧澤淫奔,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布山涡,位于F島的核電站,受9級(jí)特大地震影響唆迁,放射性物質(zhì)發(fā)生泄漏鸭丛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一唐责、第九天 我趴在偏房一處隱蔽的房頂上張望鳞溉。 院中可真熱鬧,春花似錦鼠哥、人聲如沸熟菲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)抄罕。三九已至,卻和暖如春于颖,著一層夾襖步出監(jiān)牢的瞬間呆贿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工森渐, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留做入,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓章母,卻偏偏與公主長(zhǎng)得像母蛛,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子乳怎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

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