-webkit-animation动画，CSS动画的使用

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属性）。
做成这个动画就要算好中间方块的变化时间，小方块的延迟时间和平移的方向。