运动

运动

Google - Movement
材料在与现实世界相似的力的作用下产生运动,比如重力。

屏幕表面移动
  • 弧形向上
  • 弧形向下
进入和移出屏幕移动
  • 独立运动
  • 相对运动


屏幕范围之内的移动

一个元素在屏幕范围之内的移动遵循自然的凹面曲线。所有的屏幕范围之内的移动遵循standard运动曲线。

向上弧线

克服重力向上运动在现实世界中需要一个作用力。元素组件在屏幕中向上移动也需要一个相似的力,并且表现的较费力,以比较缓慢的速度向上移动。

  • 当向上方移动时,开始上升时坡度较缓,临近结束时候坡度较陡。
  • 无视重力的反物理学向上移动会显得不自然。
向下弧线

在现实世界中向下掉落的物体会受到重力作用产生加速。元素组件在屏幕中向下移动时需要表现出更省力,并且以较快的速度移动。

  • 当在对角方向上向下移动时,开始时候坡度较陡,结束时候较缓。
  • 忽视重力拉动的反物理学移动会显得不自然
非弧线移动

当物体在单一坐标轴上移动时(可以是水平或者垂直,但是不能同时)不遵循弧线的移动轨迹。这些情况下移动时简单并且移动速度稍微快速一些。

  • 单一坐标轴的移动保持直线。
  • 不要在单一坐标轴移动时使用不自然的曲线。

物体移出和移入屏幕也是单一坐标轴的移动

  • 线性的进入路线容易确定明确的进入点。
  • 不要让物体移出屏幕的路线弯曲,这会使得进入点复杂化。

移入和移出屏幕

独立移动

物体进入和移出屏幕会被作为独立的一个物体,当他们不影响其他屏幕上的内容时。

进入屏幕

物体进入屏幕使用 deceleration曲线作为速度标准,这表明他们已经在最高速度运动。

永久移出屏幕

物体永久的移出屏幕需要使用acceleration曲线作为速度的标准,以一个稍微快速的速度移出屏幕。因为他们不会再回到用户的关注之中。

  • 物体使用deceleration曲线进入屏幕不影响其他位置的物体。在手机中,过渡通常是225ms。当物体移出屏幕时使用acceleration曲线。在手机中过渡通常是195ms。
  • 不要在进入和移出时使用standard曲线。在进入时,缓慢的加速是没有用的,因为用户的注意需要被指引到最终的静止点上。在退出时候,缓慢的减速是没用的,因为结束点时不可见的。
临时移出屏幕

物体临时的引出屏幕需要使用sharp曲线,因为他们可能在任何时候再次回到屏幕中,所以必须出现在附近触手可及的地方。

  • 物体临时移出屏幕使用sharp曲线,因为他们可能从他们移出的点再次回到屏幕中。当他们返回时,同样使用deceleration曲线。在手机中,过渡动画通常是300ms。
  • 物体临时移出屏幕不要使用acceleration曲线,不要让他们从不同于移出点的位置返回到屏幕中。如果他们返回到屏幕中,使用deceleration曲线。
相对运动

进入和移出屏幕的物体也会使得其他屏幕上的物体按照相同的平滑曲线运动,使得他们能保持最小的距离并且交距离的移动会比较抢眼。
standard曲线通常用于:同时有物体移出屏幕边界并且有物体在屏幕之内移动。这个曲线对比其他独立运动的曲线有更长的持续时间。

  • 由于屏幕上的floating action button会被移入到屏幕的卡片影响位置,所以standard曲线被用在这种情况下的FAB和card两个物体,以此保持一个动画开始和结束的平滑效果。在手机中,过渡通常是300ms。
  • 使用deceleration和acceleration曲线来向上和向下移动时,会导致屏幕上的FAB突然的向上运动和突然的向下运动。这样的运动时严酷的且具有破坏性的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,387评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,845评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,091评论 0 246
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,308评论 0 214
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,662评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,795评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,008评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,743评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,466评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,687评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,181评论 1 262
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,531评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,177评论 3 239
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,126评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,902评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,862评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,734评论 2 274

推荐阅读更多精彩内容