动效曲线

现实中的物体不会发生匀速运动。因此比起匀速人们会觉得缓入、缓出、缓入缓出的移动更加自然,合理利用缓动函数、贝兹曲线以及弹力可以制作出自然而漂亮动作效果。

渐变

普遍使用的加速度预设值。属性栏中可选取缓入、缓出、缓入缓出效果。

EaseIn
  • easeInSine
  • easeInCubic
  • easeInQuint
  • easeInCirc
  • easeInElastic
  • easeInQuad
  • easeInQuart
  • easeInExpo
  • easeInBack
  • easeInBounce
EaseOut
  • easeOutSine
  • easeOutCubic
  • easeOutQuint
  • easeOutCirc
  • easeOutElastic
  • easeOutQuad
  • easeOutQuart
  • easeOutExpo
  • easeOutBack
  • easeOutBounce
EaseInOut
  • easeInOutSine
  • easeInOutCubic
  • easeInOutQuint
  • easeInOutCirc
  • easeInOutElastic
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutExpo
  • easeInOutBack
  • easeInOutBounce

贝兹曲线

通过调整4个参数可以自定义弹性曲线。使用可视化调节工具可以在调整参数后预览动画效果。

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

弹力

弹力曲线可增加更丰富的图层弹跳效果。

*计划在ProtoPie Studio内加强弹力曲线的视觉展现,以便更直观的调整数值。

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