当前位置：网站首页 > 创业 > 正文

“手术刀”测试题H5制作

张子豪 2025-10-11 15:40 1

测试题类型H5建造受到良多企业的偏心，长久不衰，屡试不爽，出格是每年节日时代，测试新一年的命运，星座，性格等等随机出成果的H5刷爆伴侣圈，个个pv过百万，下面来介绍下这类型的H5是若何做出来的：

东西/原料

mugeda

方式/步调

1
起首，登岸木疙瘩平台，建立新作品
2
点击“素材库”添加素材，并调整素材巨细、位置等属性，如下图：
3
新建第2页面，在“素材库”添加一个手术刀图像元素，点击“线条”东西在“舞台”上绘制一个线条，并点窜其线条类型为“点线”
4
继续弥补绘制线条、添加“杀人”“完美”“合格”文本框，再添加一个文本框，定名为“分数”，输入内容为“0”，并调整巨细、字体颜色等属性
5
新建“图层1”，将“图层0”上的手术刀剪切粘贴进“图层1”上，改变手术刀“Z轴扭转角度”为“-90”，调整其巨细位置
6
新建“图层2”，在该图层添加一个手指点击的图片素材，同时添加一个文本框，输入文字内容为“按住屏幕，起头手术”，调整字体巨细、颜色等属性
7
为便利辨识，我们可点窜“图层0”名称为“底部”，“图层1”名称为“手术刀”，“图层2”名称为“提醒”
8
选中“手术刀”以及“底部”两个图层的第30帧位置，右键→“插入帧”
9
将“手术刀”图层的第1关头帧拖动至第2帧，同时设置手术刀从下往上移动的动画
10
新建“图层3”，在该图层第2帧“插入关头帧”，将虚线复制粘贴进关头帧内，点窜线条颜色为红色，线条类型为“实线”
11
在“图层3”关头帧之后“插入曲线变形动画”，利用“节点”东西将第2帧上的曲线缩短至底端，做一个线条由短标的目的上变长的动画，可点击“预览”不雅察结果
12
别离在“手术刀”和“图层3”的第19帧（手术刀对齐“合格”文字框的时候点）、27帧（手术刀对齐“完美”文字框的时候点）插入关头帧
13
为手术刀素材定名为“刀子”
14
提前不雅察手术刀在最底端、“合格”“完美”“杀人”文字框位置时，其“上”值是几多（此处别离为“467.6”“184.9”“51.9”“2”）
15
如下图，选中“分数”文本框，在其“属性”面板下点击文字内容右边的“联系关系”按钮，鄙人拉的联系关系属性菜单栏下设置联系关系对象：“刀子”联系关系属性：“上”联系关系体例：“主动联系关系”当本家儿控量=“467.6”（手术刀在最底端位置）时被控量=“0”当本家儿控量=“184.9”（手术刀在“合格”位置）时被控量=“60”当本家儿控量=“51.9”（手术刀在“完美”位置）时被控量=“100”当本家儿控量=“2”（手术刀在“杀人”位置）时被控量=“0”
16
为手指点击图像添加一个呈现即暂停行为：“动画播放节制”→“暂停”→触发前提：“呈现”
17
新建图层“节制层”，并将“图层3”重定名为“红线”
18
在“节制层”图层添加一个矩形，调整巨细使其合适“舞台”巨细，并调整其透明度为“0”
19
为矩形添加两个编纂行为：“动画播放节制”→“播放”→触发前提：“手指按下”“动画播放节制”→“下一页”→触发前提：“手指抬起”
20
可新建第3页面，添加一张图片素材作为跳转后的页面，之后点击“预览”不雅察动画结果
21
建造第3页：如下图，在第3页添加一个文本框，输入文字内容为“0”，调整文字巨细、颜色、位置等。点击文字内容右边的“联系关系”按钮，设置联系关系属性联系关系对象：“分数”联系关系属性：“文本取值”联系关系体例：“公式联系关系”被控量=“联系关系属性”即设置了该文本的取值等于第2页“分数”文本取值
22
将“舞台”上的图片元转换为元件，双击该元件进入元件编纂页面。在时候轴上第4帧“插入帧”
23
为图片元件设置“编纂行为”：“动画播放节制”→“暂停”→触发前提：“呈现”
24
同时在时候轴上的2、3、4帧“插入关头帧”
25
别离在第2、3、4帧上点击“属性”面板下的“编纂”按钮，在弹出的“媒体库”中选择所需的图片素材，点击“添加”，替代原有的图片
26
回到“舞台”，将元件定名为“评判”
27
在第2页面，为“节制层”上矩形添加四个“跳转到帧并遏制”行为：“动画播放节制”→“跳转到帧并遏制”→“触发前提”：“手指抬起”，点窜描述为“100分”“80”“60”“死”
28
设置“100分”行为的“参数”帧号：“3”感化对象：“评判”执行前提：“查抄元素状况”元素名称：“分数”考查属性：“文本取值”逻辑前提：“小于等于”参考值：“100”，点击“确认”
29
设置“80”行为的“参数”帧号：“2”感化对象：“评判”执行前提：“查抄元素状况”元素名称：“分数”考查属性：“文本取值”逻辑前提：“小于等于”参考值：“80”，点击“确认”
30
设置“60”行为的“参数”帧号：“1”感化对象：“评判”执行前提：“查抄元素状况”元素名称：“分数”考查属性：“文本取值”逻辑前提：“小于等于”参考值：“60”，点击“确认”
31
设置“死”行为的“参数”帧号：“4”感化对象：“评判”执行前提：“查抄元素状况”元素名称：“刀子”考查属性：“上”逻辑前提：“小于等于”参考值：“51”（手术刀在“完美”摆布位置），点击“确认”
32
注重：Mugeda的行为逻辑是从上往下的挨次执行的，我们起首会执行“播放”的行为，然后是“跳转下一页”的行为，其次是100分的“跳转到帧并遏制”行为，同理依次执行其他行为。若中心有一个行为前提不知足，则不会继续执行下一行为。
33
建造“再来一次”按钮：在第3页面添加“再来一次”按钮素材
34
添加“再来一次”按钮编纂行为：“动画播放节制”→“跳转到页”→触发前提：“点击”，跳转帧号为“1”“属性节制”→“改变元素属性”→触发前提：“点击”，设置“参数”元素名称：“分数”元素属性：“文本取值”赋值体例：“用设置的值替代现有值”取值：“0”点击“确认”即设置重来一次时将原先的分数值清零行为
35
设置第1页“起头游戏”按钮编纂行为“跳转下一页”行为：“动画播放节制”→“下一页”→触发前提：“点击”“禁止翻页”行为：“动画播放节制”→“禁止翻页”→触发前提：“呈现”
36
可点击“预览”动画结果