運(yùn)動(dòng)

運(yùn)動(dòng)

Google - Movement
材料在與現(xiàn)實(shí)世界相似的力的作用下產(chǎn)生運(yùn)動(dòng),比如重力厚满。

屏幕表面移動(dòng)
  • 弧形向上
  • 弧形向下
進(jìn)入和移出屏幕移動(dòng)
  • 獨(dú)立運(yùn)動(dòng)
  • 相對運(yùn)動(dòng)


屏幕范圍之內(nèi)的移動(dòng)

一個(gè)元素在屏幕范圍之內(nèi)的移動(dòng)遵循自然的凹面曲線嗦明。所有的屏幕范圍之內(nèi)的移動(dòng)遵循standard運(yùn)動(dòng)曲線。

向上弧線

克服重力向上運(yùn)動(dòng)在現(xiàn)實(shí)世界中需要一個(gè)作用力禀横。元素組件在屏幕中向上移動(dòng)也需要一個(gè)相似的力们陆,并且表現(xiàn)的較費(fèi)力寒瓦,以比較緩慢的速度向上移動(dòng)。

  • 當(dāng)向上方移動(dòng)時(shí)坪仇,開始上升時(shí)坡度較緩杂腰,臨近結(jié)束時(shí)候坡度較陡。
  • 無視重力的反物理學(xué)向上移動(dòng)會(huì)顯得不自然椅文。
向下弧線

在現(xiàn)實(shí)世界中向下掉落的物體會(huì)受到重力作用產(chǎn)生加速喂很。元素組件在屏幕中向下移動(dòng)時(shí)需要表現(xiàn)出更省力,并且以較快的速度移動(dòng)雾袱。

  • 當(dāng)在對角方向上向下移動(dòng)時(shí)恤筛,開始時(shí)候坡度較陡,結(jié)束時(shí)候較緩芹橡。
  • 忽視重力拉動(dòng)的反物理學(xué)移動(dòng)會(huì)顯得不自然
非弧線移動(dòng)

當(dāng)物體在單一坐標(biāo)軸上移動(dòng)時(shí)(可以是水平或者垂直,但是不能同時(shí))不遵循弧線的移動(dòng)軌跡望伦。這些情況下移動(dòng)時(shí)簡單并且移動(dòng)速度稍微快速一些林说。

  • 單一坐標(biāo)軸的移動(dòng)保持直線。
  • 不要在單一坐標(biāo)軸移動(dòng)時(shí)使用不自然的曲線屯伞。

物體移出和移入屏幕也是單一坐標(biāo)軸的移動(dòng)

  • 線性的進(jìn)入路線容易確定明確的進(jìn)入點(diǎn)腿箩。
  • 不要讓物體移出屏幕的路線彎曲,這會(huì)使得進(jìn)入點(diǎn)復(fù)雜化劣摇。

移入和移出屏幕

獨(dú)立移動(dòng)

物體進(jìn)入和移出屏幕會(huì)被作為獨(dú)立的一個(gè)物體珠移,當(dāng)他們不影響其他屏幕上的內(nèi)容時(shí)。

進(jìn)入屏幕

物體進(jìn)入屏幕使用 deceleration曲線作為速度標(biāo)準(zhǔn)末融,這表明他們已經(jīng)在最高速度運(yùn)動(dòng)钧惧。

永久移出屏幕

物體永久的移出屏幕需要使用acceleration曲線作為速度的標(biāo)準(zhǔn),以一個(gè)稍微快速的速度移出屏幕勾习。因?yàn)樗麄儾粫?huì)再回到用戶的關(guān)注之中浓瞪。

  • 物體使用deceleration曲線進(jìn)入屏幕不影響其他位置的物體。在手機(jī)中巧婶,過渡通常是225ms乾颁。當(dāng)物體移出屏幕時(shí)使用acceleration曲線涂乌。在手機(jī)中過渡通常是195ms。
  • 不要在進(jìn)入和移出時(shí)使用standard曲線英岭。在進(jìn)入時(shí)湾盒,緩慢的加速是沒有用的,因?yàn)橛脩舻淖⒁庑枰恢敢阶罱K的靜止點(diǎn)上诅妹。在退出時(shí)候罚勾,緩慢的減速是沒用的,因?yàn)榻Y(jié)束點(diǎn)時(shí)不可見的漾唉。
臨時(shí)移出屏幕

物體臨時(shí)的引出屏幕需要使用sharp曲線荧库,因?yàn)樗麄兛赡茉谌魏螘r(shí)候再次回到屏幕中,所以必須出現(xiàn)在附近觸手可及的地方赵刑。

  • 物體臨時(shí)移出屏幕使用sharp曲線分衫,因?yàn)樗麄兛赡軓乃麄円瞥龅狞c(diǎn)再次回到屏幕中。當(dāng)他們返回時(shí)般此,同樣使用deceleration曲線蚪战。在手機(jī)中,過渡動(dòng)畫通常是300ms铐懊。
  • 物體臨時(shí)移出屏幕不要使用acceleration曲線邀桑,不要讓他們從不同于移出點(diǎn)的位置返回到屏幕中。如果他們返回到屏幕中科乎,使用deceleration曲線壁畸。
相對運(yùn)動(dòng)

進(jìn)入和移出屏幕的物體也會(huì)使得其他屏幕上的物體按照相同的平滑曲線運(yùn)動(dòng),使得他們能保持最小的距離并且交距離的移動(dòng)會(huì)比較搶眼茅茂。
standard曲線通常用于:同時(shí)有物體移出屏幕邊界并且有物體在屏幕之內(nèi)移動(dòng)捏萍。這個(gè)曲線對比其他獨(dú)立運(yùn)動(dòng)的曲線有更長的持續(xù)時(shí)間。

  • 由于屏幕上的floating action button會(huì)被移入到屏幕的卡片影響位置空闲,所以standard曲線被用在這種情況下的FAB和card兩個(gè)物體令杈,以此保持一個(gè)動(dòng)畫開始和結(jié)束的平滑效果。在手機(jī)中碴倾,過渡通常是300ms逗噩。
  • 使用deceleration和acceleration曲線來向上和向下移動(dòng)時(shí),會(huì)導(dǎo)致屏幕上的FAB突然的向上運(yùn)動(dòng)和突然的向下運(yùn)動(dòng)跌榔。這樣的運(yùn)動(dòng)時(shí)嚴(yán)酷的且具有破壞性的异雁。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市矫户,隨后出現(xiàn)的幾起案子片迅,更是在濱河造成了極大的恐慌,老刑警劉巖皆辽,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柑蛇,死亡現(xiàn)場離奇詭異芥挣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)耻台,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進(jìn)店門空免,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人盆耽,你說我怎么就攤上這事蹋砚。” “怎么了摄杂?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵坝咐,是天一觀的道長。 經(jīng)常有香客問我析恢,道長墨坚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任映挂,我火速辦了婚禮泽篮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘柑船。我一直安慰自己帽撑,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布鞍时。 她就那樣靜靜地躺著亏拉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逆巍。 梳的紋絲不亂的頭發(fā)上专筷,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天,我揣著相機(jī)與錄音蒸苇,去河邊找鬼。 笑死吮旅,一個(gè)胖子當(dāng)著我的面吹牛溪烤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播庇勃,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼檬嘀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了责嚷?” 一聲冷哼從身側(cè)響起鸳兽,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎罕拂,沒想到半個(gè)月后揍异,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體全陨,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年衷掷,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了辱姨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,015評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡戚嗅,死狀恐怖雨涛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情懦胞,我是刑警寧澤替久,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站躏尉,受9級特大地震影響蚯根,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜醇份,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一稼锅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧僚纷,春花似錦矩距、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至痊臭,卻和暖如春哮肚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背广匙。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工允趟, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鸦致。 一個(gè)月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓潮剪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親分唾。 傳聞我的和親對象是個(gè)殘疾皇子抗碰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評論 2 355

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