Hype

Hype中文官网 > 使用技巧 > 实例:使用Hype制作表单提交按钮动画效果(二)

实例:使用Hype制作表单提交按钮动画效果(二)

发布时间:2020/07/30

本文是使用Hype制作表单提交按钮动画效果教程的第二章节,主要介绍如何结合已经制作好的场景完成动画效果的制作,本文将该动画效果拆分为三部分进行讲解。先行声明,本教程是在Mac系统的基础上,使用Hype 4版本进行演示及讲解。

  1. 一、第一部分动画制作

首先,使用第一章节制作好的场景,移动时间线到00:00:00处,在Hype右侧的“元素检查器”中,设置“success文本”、“打勾图像”、“刷新图像”的不透明度为0,如下图1所示。

设置红框内元素不透明度为0
图1:设置红框内元素不透明度为0

此时,在0分0秒时,场景页面如下图2所示。

最开始时场景
图2:最开始时场景

第二步:移动时间线到00:00:15秒处,点击“录制”按钮,开始录制动画,然后再次移动时间线到00:00:26秒处,在“元素检查器”中设置“submit文本”和“箭头图像”的不透明度为0;同时按照图3箭头所示方向,移动“箭头图像”和“椭圆形”元素的位置。

移动图像和元素位置
图3:移动图像和元素位置

第三步: 在“度量检查器”中,将原本“圆角矩形”的左边位置从154px改为255px,然后宽度从251px改为49px,如下图4红框所示。

修改圆角矩形的位置和宽度
图4:修改圆角矩形的位置和宽度

第四步:以上三步完成以后,关闭“录制”按钮,然后移动时间线到00:00:23秒处,再次点击“录制”按钮,再移动时间线到00:00:26秒处,在“元素检查器”中设置“刷新图像”的不透明度为87,这样第一部分的动画就制作完成了,效果如下图5所示。

第一部分效果预览
图5:第一部分效果预览
  1. 二、第二部分动画制作

第一步:移动时间线到00:00:15秒处,然后点击“录制”按钮,再移动时间线到00:02:07秒处,在“度量检查器”中设置“刷新图像”的Z轴旋转角度为721度,如下图6所示。

制作刷新图像旋转动画
图6:制作刷新图像旋转动画

第二步:移动时间线到00:01:21秒处,点击“录制”按钮,再移动时间线到00:02:04处,在“元素检查器”中设置“圆角矩形”和“椭圆形”的填充背景颜色为绿色,如下图7所示。

设置填充背景颜色为绿色
图7:设置填充背景颜色为绿色

第三步:移动时间线到00:01:28秒处,点击“录制”按钮,再移动时间线到00:02:07秒处,在“元素检查器”中设置“刷新图像”的不透明度为0;然后移动时间线到00:02:10秒处,在“元素检查器”中设置“打勾图像”的不透明度为100。这样就完成了第二部分的动画制作,具体效果预览如下图8所示。

第二部分动画效果预览
图8:第二部分动画效果预览
  1. 三、第三部分动画制作

第一步:移动时间线到00:03:00秒处,点击“录制”按钮,然后再移动时间线到00:03:10处,按照下图9红色箭头的方向,移动“打勾图像”和“椭圆形”元素的位置。

移动打勾图像和椭圆形元素
图9:移动打勾图像和椭圆形元素

第二步: 在“度量检查器”中,将原本“圆角矩形”的左边位置从255px改为154px,然后宽度从49px改为251px,如下图10红框所示。

调整圆角矩形宽度和位置
图10:调整圆角矩形宽度和位置

第三步:移动时间线到00:03:20处,在“元素检查器”中设置“success文本”的不透明度为100。这样就完成了第三部分动画的制作,下面是第三部分动画的预览效果。

第三部分效果预览
图11:第三部分效果预览

好了,这样就完成了表单提交按钮动画效果的制作,下面还有更多有趣有用的Hype教程发布在中文网站上,欢迎大家前往关注!

作者署名:包纸

标签:动画效果检查器

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
实战:使用Hype绘制动态旅行路线(一)
小编今天给大家介绍一款HTML5动画制作软件——Hype 4。Hype 4是一款不需要使用Flash就可以进行HTML5动画制作的软件,让完全不了解代码的大家也能够轻松使用并制作自己的动画。
2020-05-22
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21