web加载动画,CSS动画
今天由于工作需要,在Git上面拿到一个微信小程序,导入后随便点点,他的loading动画吸引到我了。根据源码,搭配blog,w3c,一点一点学习怎么设计的这个loading。
1.效果图
四周小方块不停的移动到中间方块,中间方块缩放。
2.wxml剖析
#(1)源码
布局
<!--正在加载-->
<template name="loading">
<view id="loading">
<view id="loading-main">
<view class="object" id="object_one"></view>
<view class="object" id="object_two"></view>
<view class="object" id="object_three"></view>
<view class="object" id="object_four"></view>
<view class="object" id="object_five"></view>
<view class="object" id="object_six"></view>
<view class="object" id="object_seven"></view>
<view class="object" id="object_eight"></view>
<view class="object" id="object_big"></view>
</view>
</view>
</template>
这是一个模版< template >,然后是三层的< view >。
(2)css样式
#loading {
background-color: rgba(0, 0, 0, 0.7);
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
先固定最顶层< view >视图在屏幕顶部,与屏幕的边距为0,也固定了页面不滑动。
#loading-main {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 150px;
margin-top: -75px;
margin-left: -75px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
第二层< view >,宽150px,高150px,绝对定位,离除了static定位元素以为的第一个父元素(这里是顶层< view id=loading>)的左、上的距离是服父元素的一半。margin-top,margin-left的距离是该view的一半是为了让该view相对父容器居中。重点是下面的三个样式:
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
查看w3c文档
还有一部分没截到,看看常用的三个:translate平移、scale缩放、rotate旋转
喔,原来这里用的就是旋转这个< view >45度。但是为什么有三个呢?
是为了兼容浏览器,不同浏览器有不同写法。
再来看看最后一层的view 也就是小方块的样式。
方块类属性,位置、样式不必细说
.object {
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
left: 65px;
top: 65px;
}
每一个方块的id属性,以one为例
#object_one {
-webkit-animation: object_one 2s infinite;
animation: object_one 2s infinite;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
这四个是什么东西?应该也是兼容浏览器,实际上只有-webkit-animation: object_one 2s infinite;-webkit-animation-delay: 0.2s;查w3c
喔,原来是定义动画,-webkit-animation: object_one 2s infinite;第一个值定义动画的名字,第二个值定义持续时间,第三个值是定义播放次数(infinite无限次),还有一个-webkit-animation-delay: 0.2s;是定义动画开始的延迟,也就是过了几秒开始动。
animation-name是用来绑定keyframe的,keyframe又是什么?
源码里面好像有这个:
@keyframes object_one {
50% {transform: translate(-65px, -65px);-webkit-transform: translate(-65px, -65px);}
}
css还有这种写法?初学的人表示没见过。
喔,原来是定义动画是怎么动的。@keyframes object_one {
50% {transform: translate(-65px, -65px);-webkit-transform: translate(-65px, -65px);}
}这个的意思就是object_one这个动画在50%的时候平移。
为什么第一个的x轴也要变化?第一个不是上下移动吗?仔细想想,是第二层view旋转了45度,整个区域的坐标轴都旋转了45度。
3.总结
css动画-webkit-animation,是关键帧动画,可以定义在动画的时间内的帧,必须绑定一个动画函数keyframe来定义动画怎么动(用css属性)。
做成这个动画就要算好中间方块的变化时间,小方块的延迟时间和平移的方向。