MenuToggle Menu

动效曲线功能

ProtoPie的动效曲线能够增强动画效果,使运动更加逼真。在现实生活中,物体不会突然地开始或停止移动。因此,在原型设计中运用动效曲线是实现自然动画的关键。通过使用渐入渐出、弹力等动效函数,创建视觉上引人注目的过渡效果,让设计实现自然运动的感觉。

常规动效曲线

匀速

使用匀速,动画过程中没有加速或减速。物体以平滑均匀的方式移动,整个过渡过程保持稳定的速度。

匀加速

匀加速用于控制过度的加速和减速。为动画或状态转换中的物体和元素增加了平滑和自然的运动效果。

缓入

缓入用于控制过渡的初始加速度。它专注于创建渐进而缓和的动画起始效果,物体或元素从缓慢开始移动,然后随着动画的进行逐渐加快速度。

缓出

缓出用于控制过渡的减速效果。它专注于在动画接近结束时使运动逐渐减速,实现平滑而缓慢的减速过程。

缓入缓出

缓入缓出用于创建平滑而平衡的过渡效果。它结合了缓入缓出的特点,提供了动画开始时的渐进加速,中间的恒定速度和结束时的逐渐减速。

EaseIn
  • easeInSine
    (0.12, 0, 0.39, 0)
  • easeInCubic
    (0.32, 0, 0.67, 0)
  • easeInQuint
    (0.64, 0, 0.78, 0)
  • easeInCirc
    (0.55, 0, 1, 0.45)
  • easeInElastic
  • easeInQuad
    (0.11, 0, 0.5, 0)
  • easeInQuart
    (0.5, 0, 0.75, 0)
  • easeInExpo
    (0.7, 0, 0.84, 0)
  • easeInBack
    (0.36, 0, 0.66, -0.56)
  • easeInBounce
EaseOut
  • easeOutSine
    (0.61, 1, 0.88, 1)
  • easeOutCubic
    (0.33, 1, 0.68, 1)
  • easeOutQuint
    (0.22, 1, 0.36, 1)
  • easeOutCirc
    (0, 0.55, 0.45, 1)
  • easeOutElastic
  • easeOutQuad
    (0.5, 1, 0.89, 1)
  • easeOutQuart
    (0.25, 1, 0.5, 1)
  • easeOutExpo
    (0.16, 1, 0.3, 1)
  • easeOutBack
    (0.34, 1.56, 0.64, 1)
  • easeOutBounce
EaseInOut
  • easeInOutSine
    (0.37, 0, 0.63, 1)
  • easeInOutCubic
    (0.65, 0, 0.35, 1)
  • easeInOutQuint
    (0.83, 0, 0.17, 1)
  • easeInOutCirc
    (0.85, 0, 0.15, 1)
  • easeInOutElastic
  • easeInOutQuad
    (0.45, 0, 0.55, 1)
  • easeInOutQuart
    (0.76, 0, 0.24, 1)
  • easeInOutExpo
    (0.87, 0, 0.13, 1)
  • easeInOutBack
    (0.68, -0.6, 0.32, 1.6)
  • easeInOutBounce

贝塞尔曲线

贝塞尔曲线用于精确控制过渡的加速和减速。通过调整四个点(两个锚点和两个控制点),并允许自定义曲线。提供了一定的灵活度和创建独特复杂动作效果的能力。

Example
  • Cubic-bezier
    (0.39, 0, 0.23, 1)
  • Cubic-bezier
    (0.71, 0.41, 0.32, 0.76)

弹性

弹性效果用于模拟弹簧的运动。为过渡增加了动态和弹性效果,模仿物理弹簧被拉伸和释放的行为。

Example
  • Tension 600, Friction 16
  • Tension 250, Friction 19

保存自定义动效曲线

创建自定义动效曲线

在ProtoPie中,您可以创建自定义动效曲线。按照以下步骤创建自己的自定义动效曲线:

  1. 从常规动效曲线列表中选择一个动效曲线。
  2. 点击"+"添加新的动效曲线。
  3. 输入新的值或拖动控制点来修改持续时间和预定义值。
  4. 双击输入区域上方为动效曲线重命名。
  5. 新创建的动效曲线将保存在自定义列表中,以便将来使用。

导出和导入自定义动效曲线

创建新的自定义动效曲线后,您可以选择将其导出为.json文件保存到本地计算机。该文件将包含当前在自定义列表中的所有预设。此功能便于与团队成员共享,或在将来使用自定义动效曲线,在用户需要切换设备时也十分方便。

[object Object]
Back To Top