多向运动(翻译)
Give your elements 轻柔、浮动的运动感,使用 Translate 控件将它们水平(X 轴)或垂直(Y 轴)移动,以像素设置起点和终点,打造来回或上下漂移的效果,非常适合吸引对关键功能的注意或为您的设计增添俏皮的触感。
- 水平浮动:使元素像缓慢移动的云一样从左向右漂移(翻译 X)。
- 垂直弹跳:为图标或徽章创建轻柔的上下弹跳(翻译为 Y)。
- 组合复杂路径:将 X 和 Y 一起用于对角线或圆形浮动路径。
缩放、旋转和计时
超越简单的上下运动。通过缩放元素来使元素呼吸。独立使用比例尺 X 和比例尺 Y 分别拉伸或压平元素的宽度和高度。添加旋转以进行缓慢、连续的旋转。这可以让您创建从轻柔脉冲的号召性用语按钮到缓慢旋转的徽标的所有内容。
- 脉冲效果:使用音阶 X/Y 使元素有节奏地生长和收缩,吸引眼睛。
- 独立控制:拉伸元件的宽度(比例 X),同时保持其高度相同以进行独特运动。
- 连续旋转:在徽标或装饰图标上进行缓慢、无休止的旋转。
浮动效应常见问题
了解用户对浮动效应询问最多的查询,并在一个地方找到答案。
这看起来很复杂。很难使用吗?
Not at all!面板可能看起来很详细,因为它很强大,但你开始简单,只要启用一个效果(如翻译Y),设置一个小的“To”值(如20px),你有一个浮动动画,其他控件是用于当你想获得更多创意时,你边学边学。
3D旋转可以在移动端使用吗?
视觉效果会起作用,但它不是一个“真”的3D环境,它使用CSS模拟3D旋转,所有现代移动浏览器都支持它,看起来很棒,但对于激烈的3D,你需要一个不同的工具,它所设计的倾斜和转动效果,它是完美的。
单独的尺度 X 和尺度 Y 在现实世界中有哪些很好的用途?
想象一下一个"“通知 Me”按钮。您可以使用音阶 Y 使其快速压低(提供触觉反馈),然后恢复正常。或者,对于音乐播放器来说,声波图形可以在每个小节上独立使用音阶 Y 使其移动到节奏。
在一页上使用许多这些效果会损害性能吗?
果过分了,是的,就像任何东西一样,将10-20个不同的复杂动画应用到十几个元素上可能会导致较慢的设备跳动,关键是微妙的,每个部分使用1-2个主要效果,轻柔的浮动和轻微的旋转是您通常需要的专业,活泼的效果。
