多语言展示
当前在线:517今日阅读:26今日分享:39

节日收福袋h5案例制作

中秋节,春节,元旦送祝福类型h5制作经验分享。
工具/原料

mugeda

方法/步骤
1

如下图,在第1页面添加一张背景图

2

新建“图层1”,添加“福袋”图片素材,点击“福袋”右边的“添加预置动画”按钮

3

选择“悬摆”动画效果

4

在其“属性”面板下打开“预置动画”的“循环播放”功能

5

选中“图层1”上的第2帧,点击“素材库”按钮,选择要添加的两张图片素材,勾选“以序列帧形式添加”,点击“添加”

6

补充“图层0”上的第2、3帧,点击“图层0”时间轴第3帧,右键→“插入帧”

7

点击“福袋”的“添加/编辑行为”按钮,添加两个编辑行为:“播放”行为:“动画播放控制”→“播放”→触发条件:“点击”“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”

8

点击“图层1”上的第4帧,点击“素材库”按钮,在“媒体库”中选择五张所需图片素材,勾选“以序列帧形式添加”,点击“添加”

9

继续在“图层1”的第9、10帧上分别添加两张图片素材

10

补充“图层0”上的帧数,选中“图层0”上第10帧,右键→“插入帧”

11

新建“控制层”图层,点击“随机数”按钮在“舞台”上添加一个随机数,在其“属性”面板下为随机数命名为“抽奖”

12

并设置其最大值最小值为“100”“1”

13

如图,在第3帧出现的“爆炸”图片素材上,点击其“添加/编辑行为”按钮,设置行为:“动画播放控制”→“跳转到帧并停止”→触发条件:“出现”,点击“编辑”按钮

14

在“参数”对话框中设置相关属性帧号:4;5;6;7;8执行条件:“检查元素状态”元素名称:“抽奖”考察属性:“文本取值”逻辑条件:“大于”参考值:“10”,点击“确认”返回“编辑行为”对话框

15

如图,再添加一个“跳转到帧并停止”,触发条件为“出现”,点击“编辑”按钮

16

在弹出的“参数”对话框中设置相关属性帧号:9;10执行条件:“检查元素状态”元素名称:“抽奖”考察属性:“文本取值”逻辑条件:“小于等于”参考值:“10”,点击“确认”

17

可点击“预览”观察动画效果

18

如图,可修改随机数的最大值最小值,改变随机数的随机范围以修改中大小奖的概率

推荐信息