优雅的写个加载动画

纳尼 为什么要加载动画 ?

用户在进行某些操作时,都要从服务器获取资源,这个过程都需要时间,为了减少用户等待中产生的焦虑与不安,我们应该在合理的时间内做出合理的安抚,告诉用户他的操作是有回应的,所以一个优雅的加载可的方式也可以做的非常有趣,让用户轻松自在的享受等待。

下面我来们看个案例:

经过一场址皮产品经理终于妥协了,效果图如下:

又一次灵魂对白:

UI小妹跟前端小哥一顿乱沟通,最终确认效果如下:

好了,我们言归正转,不扯那些有的没的了,接来就交给html5,css3 去实现了。

我先将主要的css3属性列出来

position 定位是跑不了的 animation css动画 @keyframes 桢 transform 变换

  • 以上属性有不明白的,可以上菜鸟教程自行查看 ~_~

接下来全方位为你解析:

同心圆加载动画

先来解析一下结构
复制代码
这个时候有人就会问,一个结构怎么画出两个圆?
复制代码

before after

看到这两个应该熟悉了吧,我们利用这两个伪类选器,在....之前,在....之后。
复制代码
只画了外圆的细节图,内圆的细节跟几乎是一样的,只不是内圆他是一开始就放大,外圆是一开始缩小,这个他们就错开了方向。
复制代码

环球旋转360度动画

这个相对来说比较简单一些,同理先说结构,他的结构也只有一个,他有两个形状,在这里不需要伪类选器。
复制代码
结构思路:

利用边框实现效果,边框分为四条边,只要一条边颜色跟其它边框颜色不一样就可以实现。
复制代码
这个旋转的动画就比较简单了。
复制代码

小球碰撞动画

经过前面两个加载动画的熏陶,应该对接下来的动画有点思路了吧,说难也不难,只要理解他的一个思路去计算就不复杂了。
这个碰撞动画我会分为几个步骤来解析。

首先来看一下结构

复制代码
四个小球都需要一个载体来确定他们的定位,每个小球都有共同的样式,所以给他们一个共同的类名item
先确定定位 position
复制代码

初始化结构

初始化位置

因为我们是交替运行的,所以要把四个小球先散开, 再把动画名称加上
复制代码

关键桢

想要动画运行起来关键桢,是关键,首先我们来解析球的运行轨迹。
复制代码
0% {  }  100% {  }
百分比来规定变化发生的时间,0% 是动画的开始,100% 是动画的完成。
如上图所示:0% 我们做了什么事情 100% 我们做了什么事情

200% -200% 一负一正 我这里解释一下:
正数表示物体往右或往下移动,负数表示物体往左或往上移动
复制代码

到这里已经结束了

有人会问,楼主怎么不把代码贴出来?

嘿嘿 就是了防止那些直接拷代码的人。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章