以前关于写的不少加载动画,最近好一段时间没有写。难得有空就整理梳理一番、加强记忆
循环动画,王思聪吃热狗
这个文件展示的就属于循环动画
过程动画,执行一整个过程的动画。拔剑
这个文件展示的就是过程动画
-
当做视频处理,或者类似ajax后台数据这一类无法精准的获取资源加载过程。就采用
基础版的循环动画
,这样是不错解决方案。 -
当预加载的资源很大,以当前环境的平均网速的情况下加载时长超过3S以上的,建议像《忘忧镇》一样采用
过程动画
。 -
当预加载的资源很小,以当前环境的平均网速的情况下加载时长超过3S以上的。建议采用类似吃热狗那种
循环动画
,因为如果采用过程动画
,就会在导致过程动画
执行太快,过程动画
的优势发挥不出来。所以这个时候循环动画
最适合不过,千万不要不做处理,毕竟几秒的白屏界面或者直接DOM结构的界面,会给用户体验大大折扣。 -
若预加载资源很小,但是又想放上创意不错的过程动画。那就建议将
过程动画
修改一下,改为CSS3作为H5页面首次访问的开场动画。例如前面预加载你放上简单的基础版循环动画
或者一个循环动画GIF版本
,之后页面加载完成之后,就将这个过程动画
插入进来,作为该项目的入场动画
。