H5制作软件Hype中渐出以及渐入渐出运动曲线的动画效果

在上一章节中，介绍了Hype 4交互动效制作软件中如何线性运动曲线以及渐入运动曲线在对象动画中的效果。本章节继续讲述Hype 4 HTML5创作工具渐出以及渐入渐出运动曲线的动画效果。

一 渐出运动曲线（easeout）

渐出运动实质是缓冲运动，对象开始以最高速度运动，随着时间的增加运动速度逐渐下降，到终点位置时，对象的速度降至0。渐出运动曲线在时间距离坐标系中是一条先陡峭后平缓的曲线。

图1：渐出运动曲线

与渐入运动曲线一样，渐出运动曲线默认是Cubic曲线，此外还可以选择选择Quad曲线、Quart曲线、Quint曲线、Sine曲线、Expo曲线和Circ曲线等共六种曲线。

图2：渐出运动曲线的种类

同样的，除了上述7中渐出曲线外，还可以自定义渐出运动曲线，以符合自己设计的动画效果。

图3：自定义渐出运动曲线

与各种渐入运动曲线动画效果比较案例一样，同样设计7种渐出运动曲线和自定义渐出运动曲线的运动效果对比。小伙伴可以通过图4观察不同的渐出运动曲线呈现的动画效果。

图4：各种渐出运动曲线的运动效果对比

二 渐入渐出运动曲线（easeinout）

渐入渐出运动其实质是对象从起点开始先慢后开快再慢的运动。渐入渐出曲线在时间距离坐标系中是一条先平缓后陡峭再平缓的曲线。

图5：渐入渐出运动曲线

与渐出运动曲线一样，渐入渐出运动曲线默认是Cubic曲线，此外还可以选择选择Quad曲线、Quart曲线、Quint曲线、Sine曲线、Expo曲线和Circ曲线等共六种曲线。

图6：渐入渐出运动曲线的种类

同样的，除了上述7中渐入渐出曲线外，还可以自定义渐入渐出运动曲线，以符合自己设计的动画效果。

图7：自定义渐入渐出运动曲线

最后，比较7中渐入渐出运动曲线和自定义渐入渐出运动曲线的动画效果。

图8：各种渐入渐出运动曲线的动画效果对比

三 运动曲线的动画效果对比

在图9中，就线性、渐入、渐出以及渐入渐出运动曲线的动画效果进行比较，以加深小伙伴对四种运动曲线的印象。

图9：四种运动曲线的动画效果比较

四 总结

线性、渐入、渐出和渐入渐出四种运动曲线在HTML 5动效设计中会经常使用，小编使用了三个章节的篇幅不厌其烦地讲述其各种动画效果，实在是因其太重要了。当然，后面将讲述的退还、弹性以及后方同样重要，它们能够极大丰富对象的运动效果。