運(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)酷的且具有破壞性的异雁。