Skip to content

Latest commit

 

History

History

浅谈加载动画两板斧

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

【切图仔日常】浅谈加载动画两板斧

背景

以前关于写的不少加载动画,最近好一段时间没有写。难得有空就整理梳理一番、加强记忆

一板斧

循环动画,王思聪吃热狗这个文件展示的就属于循环动画

二板斧

过程动画,执行一整个过程的动画。拔剑这个文件展示的就是过程动画

个人经验小结

  • 当做视频处理,或者类似ajax后台数据这一类无法精准的获取资源加载过程。就采用基础版的循环动画,这样是不错解决方案。

  • 当预加载的资源很大,以当前环境的平均网速的情况下加载时长超过3S以上的,建议像《忘忧镇》一样采用过程动画

  • 当预加载的资源很小,以当前环境的平均网速的情况下加载时长超过3S以上的。建议采用类似吃热狗那种循环动画,因为如果采用过程动画,就会在导致过程动画执行太快,过程动画的优势发挥不出来。所以这个时候循环动画最适合不过,千万不要不做处理,毕竟几秒的白屏界面或者直接DOM结构的界面,会给用户体验大大折扣。

  • 若预加载资源很小,但是又想放上创意不错的过程动画。那就建议将过程动画修改一下,改为CSS3作为H5页面首次访问的开场动画。例如前面预加载你放上简单的基础版循环动画或者一个循环动画GIF版本,之后页面加载完成之后,就将这个过程动画插入进来,作为该项目的入场动画