机芯

状态间有流畅的过渡动画

动作有助于在不同的动作之间建立无缝动画 状况 元素的。用户可以个性化持续时间和缓和风格,以制作独特的转变。一种常见的情况是针对元素上的悬停条件生成精致的更改,以确保悬停时逐渐变化。

在本讲座中:

  1. 设计按钮的悬停条件
  2. 创建过渡以优化悬停时的动画

设计按钮的悬停条件

  1. 选择一个按钮
  2. 包括一个 盒子阴影 并对其进行改进,以达到所需的外观
  3. 导航至 徘徊 状况
  4. 增加阴影的深度和距离
  5. 恢复到 没有任何 地位

创建过渡以优化悬停时的动画

  1. 整合 过渡 并选择 盒子阴影 从属性下拉菜单中
  2. 添加 500ms 的持续时间
  3. 维持当前宽松政策
  4. 将鼠标悬停在按钮上时,可以看到阴影强度和距离的平滑变化
左侧第一步,点击 Transitions 效果行中的加号图标。右侧第二步,在属性下拉菜单的背景部分中选择 Box Shadow 属性。
第三步,将Duration改为500MS。
带有文字“联系我们!”的蓝色按钮显示两次。左侧,按钮处于正常状态。右侧,按钮处于悬停状态,后面有盒子阴影。h

进一步了解运动和其他影响。

麦宜云
Ewan Mak 的最新帖子 (查看全部)