在使用Hype 4制作动画时极少使用到属性关键帧，大多数情况都是采用录制的方式：在动画起始点设置好运动对象的属性，然后按下录制键。接着移动时间指示器到动画结束点，设置对象在结束点的属性。最后关闭录像按钮，也就完成了对象动画的制作。
图1：一个简单动画的制作
实际上，属性关键帧始终贯穿着整个动画。在动画起点和终点设置对象的属性，相当于设置了起点和终点的关键帧。
细心的小伙伴一定会发现，在属性的时间线上，动画线段的起点和终点用一个菱形表示，这种菱形就代表着起点和终点的关键帧，Hype 4 HTML 5创作工具称之为绝对关键帧。
图2：绝对关键帧
设置相对关键帧
绝对关键帧和相对关键帧是相对于动画的起始点而言。在给对象设计动画的时候，在所有时间线上创建的起始关键帧都是绝对关键帧，相对关键帧需要特别的设定。
在场景面板中的“动画时间线”选项中，时间线上选择“相对的”，那么该时间线上的所有对象的起点就从绝对关键帧转变为相对关键帧了。此时在属性时间线上，代表关键帧的菱形也变为了圆形。
图3：设置相对关键帧
绝对起始关键帧与相对起始关键帧的区别
由于对象动画的产生是因应对象的属性变化，绝对和相对起始关键帧对应的是对象动画启动时的属性值，它们的不同在于：绝对起始关键帧对应的是对象最初设定的启动时的属性值；而相对起始关键帧对应的是对象启动的属性值为当前的属性值。
例如在图4的例子中，对同一个圆形设置了两条时间线——“从200至400，绝对”和“从200至400，相对”。点击对应的按钮，都能使圆形从200的位置水平移动到400的位置。
它们最大的区别在于：当圆形已经到达终点400时，再点击“绝对关键帧”按钮，圆形又会回到初始位置200重新运行到终点400；而点击“相对关键帧”按钮，则不会移动，因为它对应当前的属性值是400，从400到400，对象当然不会移动。
图4：绝对和相对起始关键帧的区别
总结
相对起始关键帧在对象的连续运动中非常有用，例如一个对象运动停止后，改变方向继续移动。如果使用绝对起始关键帧，那么对象会回到初始位置重新移动；而采用相对起始关键帧就能从当前位置继续移动，很顺滑地承接前了一段的运动状态。
在后面的章节中，会有更多的例子使用到绝对和相对关键帧。
网友评论