Hype

Hype中文官网 > 使用技巧 > Hype 4时间线操作(八) 开始时间线

Hype 4时间线操作(八) 开始时间线

发布时间:2021/06/18

经过前面的学习,小伙伴应该都知道,每一个场景都有自身的时间线。主时间线的生命周期在场景加载的时候开始,场景退出时结束。不同于主时间线,自定义的时间线的生命周期在触发时开始,场景退出时结束。每条时间线都有自己的时间指示器。

对象的属性变化(小编统称为运动)是建立在时间线上的,对象的运动生命周期在时间指示器移动到运动起始点时开始,移动到运动终点时结束。

上述的两段内容非常重要,下面讲述的时间线上设置触发关键帧,都是基于上述的两个概念。

  1. 主时间线上重复或循环运动

由于场景载入的同时就开始了主时间线,因此主时间线是无需设置“开始时间线”的关键帧的。但是,如果主时间线上的对象的运动是重复的或者循环往复的,则需要设置“开始时间线”关键帧。

  1. 设置主时间线上的重复同向运动

对于这种运动,只需在对象运动的终点设置“开始时间线”触发关键帧,“时间线”选择主时间线即可。由于设置非常简单,小编就不作详细的步骤说明及原理分析,具体请参考图1。

图1:主时间线上的重复同向运动
  1. 主时间线上的循环往复运动

对于这种运动,在主时间线运动的终点设置“开始时间线”关键帧,并且选择“倒序播放”。当对象运动的终点时,由于“倒序播放”,终点变成了起点,对象便以相反方向依照原来的路径运动到最初的起点。

然后在起点处设置主时间线的“开始时间线”关键帧,这样当时间指示器回到起点触发关键帧,主时间线重新开始,从而实现了对象的循环往复运动。

图2:主时间线上的循环往复运动
  1. 自定义时间线的重复运动

与主时间线不同,自定义时间线在场景加载后并不能马上开始,而是需要主时间线上的关键帧触发才能开始。

  1. 创建时间线及矩形的运动

图3中,oTime1时间线在场景面板的“动画时间线”选项中添加,然后在oTime1时间线上创建矩形从左到右的水平运动。

图3:创建新的时间线及矩形运动
  1. 设置矩形的重复同向运动

从oTime1时间线回到主时间线上,在矩形运动的起点设置“开始时间线”触发关键帧,“时间线”选项选择oTime1。

然后再在运动的终点在主时间线上设置一个“开始时间线”关键帧, “时间线”选项选择主时间线。这样当矩形运动到终点时,又会从新开始主时间线,矩形再次从起点运动,实现了重复的同向运动。

图4:设置矩形的同向运动总结

在实际动画设计中,除非必要,尽量不要在主时间线上设计运动,如上面的自定义时间线上的重复同向运动,是一个错误的示范,具体的原因在下一章节讲述的“自定义时间线的循环往复运动”中,会有详细的说明。

作者:东佛

标签:Hype时间线HTML5创作工具

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
基础教程:Hype 4工作流程(一)
本章节通过一个简单的案例,完整讲述Hype 4的基础操作,让小伙伴了解怎么样使用Hype 4交互动效制作软件设计一个动效。
2020-11-09
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21