Date 2025-04-06 14:47:25
Material design 动态效应受到现实世界中力和重力的影响。
屏幕上物体在两点之间的运动是沿着自然和凹陷的弧线运动的。标准曲线可用于屏幕上的所有运动。
弧线向上移动
在现实世界中,物体向上移动需要克服重力。元素在屏幕上向上移动也需要克服加速和缓慢向上移动。
正确:当物体向上对角移动时,平缓开始上升,并在最后急剧停止。
错误:不要违反物理定律:当物体向上移动时,忽略重力是不自然的。
弧线向下移动
在现实世界中,物体的下降会受到重力的加速。在屏幕上,物体应该向下移动得更快。
正确:当物体向下对角移动时,下降开始急剧下降,然后平缓停止。
错误:不要违反物理定律:向下运动时不要忘记向下的重力。
非弧线运动
当物体沿水平轴或垂直轴移动时,请不要让物体沿弧移动。这些运动是最简单的,物体可以以更快的速度移动。
正确:保持单轴直线运动。
错误:在水平或垂直方向上,不要让物体沿着不自然的弧线移动。
物体进入或退出屏幕时,也应沿单轴移动。
正确:物体沿直线进入屏幕,可以清楚地看到进入点。
错误:进入和离开屏幕时不要沿着弧线,这会让人们不知道进入点在哪里。
独立运动
作为一个独立的元素,物体进入和退出屏幕不会影响屏幕上其他元素的位置。
进入屏幕
物体以减速曲线(见持续时间和缓动篇)进入屏幕,以最大速度进入,然后慢慢减速。
正确:浮动按钮的运动会受到从下面进入的卡片的影响。浮动按钮和卡片应采用标准曲线运动,以保持动画的平稳开始和停止。在移动设备上,该动画持续约300ms。
错误:使用加速或减速曲线向上和向下移动浮动按钮会给人一种非常突然的向上或向下移动的感觉。这种动态效果是不可接受的,经验是被破坏的。
材料设计下的物体可以生动地展示:叠加、分割、改变形状和大小。
当物体改变形状和大小时,宽度和高度的运动曲线是不对称的。这种变化是根据物体附近的内部或外部元素来改变的。
所有的变化都可以在屏幕上看到,比如下面的例子,使用标准曲线(见持续时间和缓动篇)。
宽和高的变化
当物体扩大或缩小时,使用对称或非对成的宽度变化。
非对称变化
这意味着宽度和高度以不同的速度变化。对于多个物体或位置的变化,使用不对称的变化是完美的。
非对称变化
扩大物体:先改变宽度,再改变高度。缩小物体:先改变高度,再改变宽度。
对称变化是指宽度和高度以相同的速度变化。适用于沿单轴运动的单个元素。
对称变化
这种同时改变宽度和高度、减少动画细节的方法非常适合简单的形状变化。这种变化的持续时间略短于不对称变化。
当一组物体的扩展不同步时,内容(如文本或图像)的部分变化以恒定的比例进行,以防止不自然的拉伸。请参考动态效果的组合。
一些特殊内容(如全屏宽度图像)的变化以恒定的比例进行,容器(如更大的卡片)的变化沿着运动曲线不同步进行。
可以同步扩展含有出血内容(如超过出血线的图像)的容器。
径向变化是用户触摸点产生的对称环形可视化效果。通常用于圆形物体,使圆形成其他形状。
正确:径向变化应用于圆形物体,使圆形物体成方形,或在触摸点创建新物体。
错误:径向变化不应用于两个方形物体之间的变化。
错误:高宽的扩展不应不同步(中间会变成椭圆)。
错误:不要径向改变复杂的形状。
变形的中心点可以是物体变化前或物体变化后的位置。
在扩张过程中,浮动按钮沿着向下的弧线移动,最终变成卡片。
变换的中心点保持在浮动按钮的中心点,扩展幅度不大。
合并
在材料设计中,物体可以与其他物体合并,也可以分为许多块。当两个物体相互接近时,边缘相遇并重叠,最终合二为一。
分割
物体分成多个碎片,然后碎片开始分离运动。
阴影
分割物体的阴影不会受到其他分割物体的影响。