.

如何制作模拟加载页?

Dre发表于:2016年03月26日 23:40:03更新于:2018年12月26日 18:59:04

很多用户都有这样的困惑,能不能绕开这个单调的进度条,我想要更个性化的Loading页面!

当然。而且方法有很多,如果有序列帧的素材当然可以用序列帧来模拟加载进度条。我们这里提供一种利用参数和计时器就能实现的效果:

1.我们先添加一张能表示加载意义的动图,我们这次就选择这张沙漏的图片

image.png

image.png

2.添加一个参数组件,在快捷面板设置字号颜色并右对齐

image.png

image.png

3.添加一个段落组件,输入一个百分号并且在快捷面板设置和参数一样的字号和颜色

如下图这样码齐放好,接下来添加一个计时器,以求对参数的变化进行控制

image.png

image.png

4.对计时器的属性进行设置,最好选择正向计时,避免没有数到100计时器就停止了。注意要更改显示格式为mm:ss:SS(分:秒:毫秒)以满足精度的需要

image.png

5.设置计时器的触发器,这个间隔多少秒参数加多少由用户自行测试把控(注意参数累加一定要能够达到100,不然后续的参数触发器就不会生效,计时器就停不下来了)

image.png

6.对参数值进行触发器设置,我们希望它数到100即可停止递增;我们选用暂停计时器的方式来使其停止

image.png

7.计时结束时可以跳转页面了,这个触发器设置比较简单(一般是跳转到页面1)

image.png

8.我们还可以结合预加载页面这功能将作品的剩余页面内的元素都加载完成后再跳转页面

单击画布空白处,选择页面信息,设置一个切换到当前页时加载除第一页以外的剩余内容的触发器

注意加载完成时也是跳转到内容页,因此耗时应当以预加载完成为准。也就是说,宁愿加载到100%的时间慢一点,也不要没有加载完剩余页面就跳页。

image.png

回复(4)