H5案例分享：60秒帮你摆脱朋友圈

公共点评出品的h5案例，

60秒帮你解脱伴侣圈，这么火的h5怎么可以错过呢，木疙瘩什么不会，此刻来介绍建造经验。

东西/原料

• mugeda

方式/步调

1. 1

   如图，建造一个扭转的加载元件、添加布景图，在第一页形当作一个加载页

   
2. 2

   为第二页添加相关素材，同时为“承诺就点这”添加“点击跳转下一页”行为

   
3. 3

   新建第三页，分层导入原先设置好的图片朋分素材

   
4. 4

   新建图层，同理分层导入别的一份图片的朋分素材

   
5. 5

   将素材移动至如下位置

   
6. 6

   为所有图层插入帧→插入关头帧动画，在帧数的四分之一部门插入关头帧

   
7. 7

   在关头帧上移动图片素材如下

   
8. 8

   同理别离在帧数的四分之二、四分之三、最后部门插入关头帧，别离移动素材位置使其呈现出摆布交叉的动画结果

   
9. 9

   别离为每一个关头帧添加“淡入淡出”结果，使其图片活动时呈现出短暂搁浅结果

   
10. 10

    新建图层，添加两个矩形别离为舞台外的矩形添加一个“呈现即暂停”行为、为按钮位置上的矩形添加“点击即播放”行为，并调整透明度为“0”同时在该图层第二帧添加一个空白帧

    
11. 11

    在特定位置添加按时器，设置按时器相关属性，为其定名为“DI”

    
12. 12

    新建图层，添加布景图、文字、文本框等素材，为文本框定名为“fen”选中该图层所有素材，组合，为组定名为“tishi”，将其移动至舞台之外

    
13. 13

    新建图层，添加一个矩形使其笼盖舞台，设置透明度为“0”添加一个文本框，定名为“fen2”为透明矩形添加六个行为：

    属性节制→设置按时器→触发前提：点击→设置参数按时器名称：DI设置状况：暂停记时器

    
14. 14

    属性节制→改变元素属性→触发前提：点击→设置参数元素名称：tishi元素属性：左赋值体例：用设置的值替代现有值取值：0

    
15. 15

    属性节制→改变元素属性→触发前提：点击→设置参数元素名称：fen2元素属性：文本取值赋值体例：用设置的值替代现有值取值：~~（60- {{DI}}）

    
16. 16

    属性节制→改变元素属性→触发前提：点击→设置参数元素名称：fen元素属性：文本取值赋值体例：用设置的值替代现有值取值：0 {{fen2}}）执行前提：查抄元素状况元素名称：DI考查属性：文本取值逻辑前提：年夜于等于参考值：51

    
17. 17

    属性节制→改变元素属性→触发前提：点击→设置参数元素名称：fen元素属性：文本取值赋值体例：用设置的值替代现有值取值：~~（60- {{DI}}）执行前提：查抄元素状况元素名称：DI考查属性：文本取值逻辑前提：小于参考值：51

    
18. 18

    动画播放节制→跳转到帧并遏制→触发前提：点击→设置参数帧号:1

    
19. 19

    同时设置别的两个行为1.为“承诺就点这”按钮添加一个“点击重置按时器”行为

    
20. 20

    为“tishi”组合添加一个“点击改变‘左’值为‘1000’”的行为，使其点击移至舞台外

    
21. 21

    最后，添加两个陀螺仪，别离为其定名为“X”“Y”，别离设置类型为“绕X轴扭转角” “绕Y轴扭转角”

    
22. 22

    将原先设置的透明矩形的行为都复制在“X”陀螺仪上，点窜触发前提为“属性改变”，同时点窜参数设置，具体点窜可官网视频。