Hype

Hype中文官网 > 新手入门 > 基础教程:Hype 4时间线之录制关键帧

基础教程:Hype 4时间线之录制关键帧

发布时间:2021/03/11

在上一章节,详细讲述了Hype交互动效制作软件时间线面板中通过在属性界面创建关键帧以及设置关键帧属性的方法来制作动画。

本章节继续讲述Hype 4 HTML5创作工具在时间线面板上如何使用录制的方法来制作动画以及关键帧和录制方法的结合来制作动画。

一、使用录制方法制作动画

在Hype软件的播放控制器中,有一个红色圆点,类似于摄像机中的录像按钮。使用这个录像按钮,结合时间指示器以及设置起始点和终点的对象属性,把起点和终点的属性变化过程录制下来,从而制作成动画效果,这个就是制作动画的录制方法。

1、创建对象

在场景页面上创建一个矩形对象。

创建矩形对象
图1:创建矩形对象

2、设置起点的对象属性

选择矩形对象,设置时间轴上时间指示器的位置为0。然后在元素面板设置矩形对象的背景颜色为橙色。

设置起点及矩形的背景颜色
图2:设置起点及矩形的背景颜色

3、设置终点的对象属性

点击“录制”按钮,然后把时间指示器拖动到2s位置。然后把矩形对象的背景颜色改为深紫色。接着鼠标左键点击矩形并按着不放,水平牵引到右边并松开左键。再次点击“录制”按钮,动画制作完成。

设置终点矩形属性
图3:设置终点矩形属性

4、动画效果

点击“播放”按钮,动画效果与使用关键帧制作的动画效果一样。

动画效果
图4:动画效果

二、录制法和关键帧结合制作动画

显然,使用录制法制作的动画与使用关键帧制作动画的效果是一样的,录制法却比关键帧法简单多了,避免了逐个属性创建关键帧。但是,要制作一个不连续的动画时,只使用录制法是无法制作出来的。

在上述案例的动画效果基础上,矩形移动到2s位置后,停止了1s后,又沿原来的路径返回的起点,并且所有属性恢复到初始状态。

使用录制法是无法实现这个动画效果的,这是就需要结合关键帧的方法来制作动画。想要查看详细案例,可点击查看:《车轮相机动画交互效果》

录制法制作的动画效果
图5:录制法制作的动画效果

1、添加关键帧

把时间指示器移动到3s的位置,在“属性”界面点击“原点(左)”右边的“+”按钮以及“背景颜色”的“+”按钮,在3s位置添加关键帧。

在3s位置创建关键帧
图6:在3s位置创建关键帧

2、录制法制作返回原点动画

点击“录制”按钮,把矩形牵引到左边起点位置,并把矩形的背景颜色改为橙色。再次点击“录制”按钮,停止录制,动画制作完成。

录制返回原点动画
图7:录制返回原点动画

3、完整动画效果

动画效果
图8:动画效果

三、小结

在使用Hype的时候,大多数情况都是使用录制法来制作动画的,因为它非常的简单并且容易上手,无需逐个属性添加关键帧。但也要注意,在一条时间线上如果有动画暂停,则需要通过设置重启动画的关键帧才能制作完整的动画。

作者:东佛

标签:录制关键帧时间线

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
基础教程:Hype 4入门基础
Hype是一款在MacOS系统下无代码的交互动效制作软件,是一个创作网页的技术平台。通过这个技术平台创作出来的内容,在后台会自动生成代码,可以直接在网上通过浏览器、移动设备等浏览使用。
2020-07-20