Hype

Hype中文官网 > 新手入门 > H5制作软件Hype的匀速运动原理

H5制作软件Hype的匀速运动原理

发布时间:2021/03/30

在前面七个章节中,介绍了Hype 4交互动效制作软件中预设的七种运动曲线,可以实现七种运动效果——匀速运动、加速运动、缓冲运动、加速缓冲运动、弹跳运动、震荡运动和返回运动。

从本章节开始,将通过运动函数来讲述这款H5制作软件的各种运动的原理。

一、运动函数

在Hype 4运动曲线中有一个预设曲线——数学公式,这个就是运动函数。可以说,所有的运动都可以通过这个运动函数计算出来。

运动函数
图1:运动函数

这个运动函数包括了三部分:函数体、参数和返回值。

函数体:function(){},在JavaScript中称为匿名函数。

参数:t,start,dur三个参数。

返回值:return 数值,通过return跳出函数体,并返回后面的数值。意思是,调用function这个匿名函数,可以获得“数值”这个值。

二、运动函数参数

运动函数有三个参数:t,start和dur。

t:是在时间线上的绝对时间,它与时间轴无关,只与时间指示器移动有关。例如,当运动起点与时间轴上的0点重合,那么时间指示器移动1帧t=1,那么在时间线上,对应的就是在1帧的位置上。

如果运动起点在时间轴1s的位置上,那么时间指示器移动1帧,t还是等于1,但是在时间轴上的位置是1.01。

什么是t
图2:什么是t

start:初始关键帧的时间点。其实质就是运动起点在时间轴上的位置。

什么是start
图3:什么是start

dur:是duration的缩写,指的是运动的持续时间。这个duration就是按下录制按钮后,拖动时间指示器在时间轴上形成的蓝色线段。

什么是dur
图4:什么是dur

三、匀速运动原理

从运动函数可以看出,运动速度曲线与t,start和dur有关系,但是这三个参数都与时间有关,怎么就能够计算出速度呢?它们与运动三要素——路程、速度和时间又有什么对应的关系?

有小伙伴可能会说,对象从A点移动到B点,AB之间的距离300像素,就是路程,duration就是时间,它们的商就是速度。表面上看这似乎很有道理,但一旦计算就出问题了,对象每移动一个或者几个像素,千分、万分之一毫秒,而且与电脑的刷新频率有关系,不同的电脑速度就可能不一样了。

实际上,小伙伴在制作动画的时候会有这么一个习惯,通过移动时间指示器,查看对象的运动情况。如图5,时间指示器移动1帧,对象移动1个单位;时间指示器移动2帧,那么对象移动了2个单位。

以此类推,时间指示器移动了30帧(duration),对象移动了30个单位,到达终点,那么对象的速度就是30单位/30帧=1单位/帧。在运动曲线上,速度曲线就是(1单位/帧*t)/dur,这个就是匀速运动曲线。

时间指示器移动与对象移动的关系
图5:时间指示器移动与对象移动的关系

如果时间指示器移动一帧,对象移动2个单位,显然速度提升了1倍,到达终点的duration就要减少一半。图6是线性运动曲线、1倍速匀速运动曲线和2倍速运动曲线的运动效果对比。

线性、匀速和2倍匀速运动效果对比
图6:线性、匀速和2倍匀速运动效果对比

四、小结

在Hype 4中,运动参数与运动三要素的对比关系是:路程=对象移动单位/帧 * t,运动时间=dur(duration),速度=对象移动单位/帧 * t/dur。默认情况下,对象异动单位/帧=1单位/帧。所以默认的匀速运动速度曲线为:t/dur。

下一章节,将讲述均匀加速运动原理,敬请期待。

作者:东佛

标签:匀速运动原理运动函数参数

读者也访问过这里:
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