H5制作软件Hype中线性、渐入运动曲线的动画效果

在上一章节中，介绍了Hype 4交互动效制作软件中如何设置运动曲线以及即时运动曲线在对象动画中的效果。

从本章节开始，将详细讲述Hype 4 HTML5创作工具线性、渐入、渐出以及渐入渐出运动曲线的动画效果以及四种运动曲线的比较。

一、线性运动曲线（Linear）

线性运动其实就是匀速运动，线性运动曲线是一条由时间和距离构成的坐标系中的45度线段。

图1：线性运动曲线

在对象的属性变化中如果使用线性运动曲线，呈现出的是对象属性从开始到结束匀速地发生变化。

图2：线性运动曲线的动画效果

二、渐入运动曲线（easein）

渐入运动实质是一种加速运动。对象从慢速开始运动，随着时间延长运动速度越来越快，到达终点时运动速度达致最大。渐入运动曲线在时间距离坐标系中是一条先平缓后陡峭的曲线。

图3：渐入运动曲线

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

图4：渐入运动曲线的种类

除了可以选择上述的七种渐入运动曲线外，还可以通过添加和调节锚点的方向控制器，对运动曲线进行调整，生成自定义的渐入运动曲线。

图5：自定义渐入运动曲线

案例：八个矩形分别采用七种渐入运动曲线和自定义的渐入运动曲线，从左到右水平运动，同时矩形做360度旋转、背景颜色改变和矩形变为圆形。小伙伴可以通过图6，体会各种不同的渐入运动曲线呈现的动画效果。

（动画的设计都比较简单，小编在这里就不详细讲述动画设计的过程，只需看比较的结果。）

图6：不同的渐入运动曲线的动画效果比较

三、小结

线性运动曲线可以实现匀速运动，渐入运动曲线可以使对实现加速运动，也可通过调整曲线实现先慢后快再慢再快等的动画效果。下一章节，将详细讲述渐出运动曲线和渐入渐出运动曲线的动画效果，敬请期待。