作者 | 小鹿
 来源 | 公众号：小鹿动画学编程
 

 
写在前边
 
TCP 三次握手过程对于面试是必考的一个，所以不但要掌握 TCP 整个握手的过程，其中有些小细节也更受到面试官的青睐。
 
对于这部分掌握以及 TCP 的四次挥手，小鹿将会以动画的形式呈现给每个人，这样将复杂的知识简单化，理解起来也容易了很多，尤其对于一个初学者来说。
 

 
学习导图
 
 
一、TCP 是什么？
 
TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。
 
我们知道了上述了解到了 TCP 的定义，通俗一点的讲，TCP 就是一个双方通信的一个规范标准（协议）。
 
我们在学习 TCP 握手过程之前，首先必须了解 TCP 报文头部的一些标志信息，因为在 TCP 握手的过程中，会使用到这些报文信息，如果没有掌握这些信息，在学习握手过程中，整个人处于懵逼状态，也是为了能够深入 TCP 三次握手的原理。
 

 
二、TCP 头部报文
 

 
 
2.1 source port 和 destination port
 
 
 
两者分别为「源端口号」和「目的端口号」。源端口号就是指本地端口，目的端口就是远程端口。
 
 
一个数据包（pocket）被解封装成数据段（segment）后就会涉及到连接上层协议的端口问题。
 
可以这么理解，我们可以想象发送方很多的窗户，接收方也有很多的窗户，这些窗口都标有不同的端口号，源端口号和目的端口号就分别代表从哪个规定的串口发送到对方接收的窗口。不同的应用程度都有着不同的端口，之前网络分层的文章中有提到过。
 
 
 
 
扩展：应用程序的端口号和应用程序所在主机的 IP 地址统称为 socket（套接字），IP:端口号, 在互联网上 socket 唯一标识每一个应用程序，源端口+源IP+目的端口+目的IP称为”套接字对“，一对套接字就是一个连接，一个客户端与服务器之间的连接。
 
 

 
2.2 Sequence Numbe
 
 
 
称为「序列号」。用于 TCP 通信过程中某一传输方向上字节流的每个字节的编号，为了确保数据通信的有序性，避免网络中乱序的问题。接收端根据这个编号进行确认，保证分割的数据段在原始数据包的位置。
 
 

 再通俗一点的讲，每个字段在传送中用序列号来标记自己位置的，而这个字段就是用来完成双方传输中确保字段原始位置是按照传输顺序的。（发送方是数据是怎样一个顺序，到了接受方也要确保是这个顺序）
 
 
 
PS：初始序列号由自己定，而后绪的序列号由对端的 ACK 决定：SN_x = ACK_y (x 的序列号 = y 发给 x 的 ACK)，这里后边会讲到。
 
 

 
2.3 Acknowledgment Numbe
 
 
 
称为「确认序列号」。确认序列号是接收确认端所期望收到的下一序列号。确认序号应当是上次已成功收到数据字节序号加1，只有当标志位中的 ACK 标志为 1 时该确认序列号的字段才有效。主要用来解决不丢包的问题。
 
 
若确认号=N，则表明：到序号N-1为止的所有数据都已正确收到。
 
在这里，现在我们只需知道它的作用是什么，就是在数据传输的时候是一段一段的，都是由序列号进行标识的，所以说，接收端每接收一段，之后就想要的下一段的序列号就称为「确认序列号」。
 

 
2.4 TCP Flag
 
TCP 首部中有 6 个标志比特，它们中的多个可同时被设置为 1，主要是用于操控 TCP 的状态机的，依次为URG，ACK，PSH，RST，SYN，FIN。
 
不要求初学者全部掌握，在这里只讲三个重点的标志：
 

 
2.4.1 ACK
 
这个标识可以理解为发送端发送数据到接收端，发送的时候 ACK 为 0，标识接收端还未应答，一旦接收端接收数据之后，就将 ACK 置为 1，发送端接收到之后，就知道了接收端已经接收了数据。
 
 
 
 
此标志表示「应答域有效」，就是说前面所说的TCP应答号将会包含在 TCP 数据包中；有两个取值：0 和 1，为 1 的时候表示应答域有效，反之为 0；
 
 

 
2.4.2 SYN
 
 
 
表示「同步序列号」，是 TCP 握手的发送的第一个数据包。
 
 
用来建立 TCP 的连接。SYN 标志位和 ACK 标志位搭配使用，当连接请求的时候，SYN=1，ACK=0连接被响应的时候，SYN=1，ACK=1；这个标志的数据包经常被用来进行端口扫描。扫描者发送一个只有 SYN 的数据包，如果对方主机响应了一个数据包回来 ，就表明这台主机存在这个端口。看下面动画：
 
 
2.4.3 FIN
 
 
 
表示发送端已经达到数据末尾，也就是说双方的数据传送完成，没有数据可以传送了，发送FIN标志位的 TCP 数据包后，连接将被断开。这个标志的数据包也经常被用于进行端口扫描。
 
 
这个很好理解，就是说，发送端只剩最后的一段数据了，同时要告诉接收端后边没有数据可以接受了，所以用FIN标识一下，接收端看到这个FIN之后，哦！这是接受的最后的数据，接受完就关闭了。动画如下：
 
 
2.5 Window size
 
称为滑动窗口大小。所说的滑动窗口，用来进行流量控制。
 

 
3、为什么进行 TCP 三次握手？
 
如果之前你不了解网络分层的话，建议看看写的文章。
 
你真的懂网络分层协议吗？
 
第一，为了确认双方的接收与发送能力是否正常。第二，指定自己的初始化序列号，为后面的可靠传送做准备。第三，如果是 https 协议的话，三次握手这个过程，还会进行数字证书的验证以及加密密钥的生成到。
 
如果你了解 UDP 的话，TCP 的出现正式弥补了 UDP 不可靠传输的缺点。但是 TCP 的诞生，也必然增加了连接的复杂性。
 

 
4、TCP 三次握手过程？
 
TCP 三次握手的过程掌握最重要的两点就是客户端和服务端状态的变化，另一个是三次握手过程标志信息的变化，那么掌握 TCP 的三次握手就简单多了。下面我们就以动画形式进行拆解三次握手过程。
 
 
初始状态：客户端处于 closed(关闭)状态，服务器处于 listen(监听) 状态。
 
第一次握手：客户端发送请求报文将 SYN = 1同步序列号和初始化序列号seq = x发送给服务端，发送完之后客户端处于SYN_Send状态。
 
 
第二次握手：服务端受到 SYN 请求报文之后，如果同意连接，会以自己的同步序列号SYN(服务端) = 1、初始化序列号 seq = y和确认序列号（期望下次收到的数据包）ack = x+ 1 以及确认号ACK = 1报文作为应答，服务器为SYN_Receive状态。
 
 
第三次握手： 客户端接收到服务端的 SYN + ACK之后，知道可以下次可以发送了下一序列的数据包了，然后发送同步序列号 ack = y + 1和数据包的序列号 seq = x + 1以及确认号ACK = 1确认包作为应答，客户端转为established状态。
 
 
5、为什么不是一次、二次握手？
 
 
 
防止了服务器端的一直等待而浪费资源。
 
 
为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。如果此时客户端发送的延迟的握手信息服务器收到，然后服务器进行响应，认为客户端要和它建立连接，此时客户端并没有这个意思，但 server 却以为新的运输连接已经建立，并一直等待 client 发来数据。这样，server 的很多资源就白白浪费掉了。
 

 
----------------------------------------------------------------------- 于2019/11/11 修改 ------------------------------------------------------------------
 
 
 
主要对文章中存在的笔误和错误进行了修改，动画也进行了重新制作和修改，文章内容也进行的部分内容增加 —— 三次握手过程详细细节部分。再次感谢大家对小鹿文章的支持！
 
 

 
下一篇：动画：用动画给女朋友讲解 TCP 四次分手过程
 

 
 
 
福利：可以在我的公众号『小鹿动画学编程』，后台回复『资源』即可获取。
 
 
 
❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]
 
一些后台小伙伴问我平常如何学习的，学习资料哪里获取，我就不一一回复了！一般我都是通过看一些编程书籍和开源的社区进行自学，一些学习资料和电子书也分享到下边了，有需要的自取。
 
编程在于永无止境的去学习，去学习前辈积累的经验，书籍就是最好的一种媒介方式，列出以下自己看过的优秀书籍，整理成了 PDF 版。
 
前端：《javascript高级程序设计》《JavaScript 权威指南》《你不知道的JavaScript（上中下卷）》等；
java:《Effective Java》《Thinking in Java》《Java 编程思想》《java核心技术》等；
算法：《大话数据结构》《算法图解》《算法导论》《编程之美》《数据结构与算法：C语言描述》等；
其他相关计算机书籍；
 
 
 
搜索我的公众号：「小鹿动画学编程」后台回复关键词
 
 
 
 
回复「后台」，获取 java 等自学资料
回复「前端」，获取前端等自学资料
回复「电子书」获取一下书籍资料！
 
 
 
 
动一动你的小手，点赞就完事了，每个人出一份力量(点赞 + 评论)就会让更多的学习者加入进来！非常感谢！￣ω￣=
 
 

 
作者Info：
 
 
 
【作者】：小鹿
 
 
【原创公众号】：小鹿动画学编程。
 
 
【简介】：和小鹿同学一起用动画的方式从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈献给小伙伴。先定个小目标，原创 1000 篇的动画技术文章，和各位小伙伴共同努力一起学习！公众号回复 “资料” 送一从零自学资料大礼包！
 
 
【转载说明】：转载请说明出处，谢谢合作！~
 

原文链接: http://www.diein1998.top
 
实现过程：
对于此次c语言动画的实现，思路很简单，先从网上下载一段mv及原声音乐，用DVDVideoSoft Free Studio将视频分为3000张图片，再用Ascgen2将3000张图片转化问3000个ASCII字符txt文件，并保持像素的一致，然后通过程序调用每一个文本并快速清屏通过快速切换在控制台来实现动画效果。
 
二、源代码
 
#include<windows.h>
 
#include <mmsystem.h>
 
#pragma comment(lib, "winmm")
 
#include<stdio.h>
 
#include<stdlib.h>
 
#include<string.h>
 
#include<conio.h>                   
 
#define WIDTH 474 //宽度
 
#define HIGHT 120 //高度
 
#define PAGE_LIMIT 3000         //帧数
 
#define N HIGHT*WIDTH           //字符数
 
//初命名
 
char name[]="ASCII-1 0001.txt";
 
char str[N];
 
int main()
 
{
 
      system("pause");//等待用户信号；
 
      int i,j,n=1,p,q;
 
      char a[4]="000";
 
      //帧操作
 
      for(i=1;i<=PAGE_LIMIT;i++)
 
      {
 
            //时间轴定位
 
            for(p=10,q=0;q<4;q++)
 
            {
 
                  if(i<10&&q==1)break;
 
                  else if(i<100&&q==2)break;
 
                  else if(i<1000&&q==3)break;
 
                  else
 
                  {
 
                       a[q]=i%p/(p/10)+48;
 
                       p*=10; 
 
                  }
 
            }
 
            //重命名
 
            for(p=0;p<q;p++)
 
                  name[11-p]=a[p];
 
            FILE *fp;
 
            //打开文本
 
            if((fp=fopen(name,"r"))==NULL)  
 
            {
 
                  printf("%d",i);
 
                  system("pause");
 
                  continue;
 
            }
 
            //读取文本
 
            while(fgets(str,N ,fp)!=NULL)
 
                  printf("%s",str);
 
            //关闭文本
 
            fclose(fp);
 
            system("cls");//清屏
 
      }
 
      system("pause");//等待用户信号
 
      return 0;
 
}
 

目录
 
1 视频
 
2 知识点
 
2.1 CSS calc() 函数
 
2.2 CSS var() 函数
 
2.3 CSS3 box-shadow 属性
 
2.4 CSS3 box-sizing 属性
 
2.5 CSS3 filter(滤镜) 属性
 
2.6 CSS3动画(animation)
 
3 参考代码
 
3.1 HTML
 
3.2 CSS
 

1 视频
 
视频地址：https://www.bilibili.com/video/BV1D5411H7Tc
 

 
 
5分钟实现漂亮的加载动画，CSS实现加载动画
 
2 知识点
 
2.1 CSS calc() 函数
 
CSS calc() 函数用于动态计算长度值。
 
语法
 
calc(expression)
 
 
值
 
 
描述
 
 
expression
 
 
必须，一个数学表达式，结果将采用运算后的返回值。
 
 
 
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 
 
 
任何长度值都可以使用calc()函数进行计算；
 
 
calc()函数支持 "+", "-", "*", "/" 运算； 
 
 
calc()函数使用标准的数学运算优先级规则； 
 
 
支持版本：CSS3
 
 
2.2 CSS var() 函数
 
 
 
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，可以使用该方法。
 
 
支持版本：CSS3
 
 
语法
 
var(custom-property-name, value)
 
 
值
 
 
描述
 
 
custom-property-name
 
 
必需。自定义属性的名称，必需以 -- 开头。
 
 
value
 
 
可选。备用值，在属性不存在的时候使用。
 

2.3 CSS3 box-shadow 属性
 
box-shadow属性可以设置一个或多个下拉阴影的框。
 
默认值:
none
继承:
no
版本:
CSS3
JavaScript 语法:
object.style.boxShadow="10px 10px 5px #888888"
语法
 
box-shadow: h-shadow v-shadow blur spread color inset;
 
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
 
值
说明
h-shadow
必需的。水平阴影的位置。允许负值
v-shadow
必需的。垂直阴影的位置。允许负值
blur
可选。模糊距离
spread
可选。阴影的大小
color
可选。阴影的颜色。
inset
可选。从外层的阴影（开始时）改变阴影内侧阴影
 
 
2.4 CSS3 box-sizing 属性
 
Box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。
 
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
 
默认值:
content-box
继承:
no
版本:
CSS3
JavaScript 语法:
object.style.boxSizing="border-box"
语法
 
box-sizing: content-box|border-box|inherit:
 
值
说明
content-box
这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box
指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit
指定 box-sizing 属性的值，应该从父元素继承
 
 
2.5 CSS3 filter(滤镜) 属性
 
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
 
默认值:
none
继承:
no
动画支持:
是。
版本:
CSS3
JavaScript 语法:
object.style.WebkitFilter="grayscale(100%)"
CSS 语法
 
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
 
提示: 使用空格分隔多个滤镜。
 
Filter 函数
 
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
 
Filter
描述
none
默认值，没有效果。
blur(px)
给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)
给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)
 
给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：
 
<offset-x> <offset-y> (必须)
 
这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).
 
<blur-radius> (可选)
 
这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
 
<spread-radius> (可选)
 
这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 
 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
 
 
 
<color> (可选)
 
查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
 
grayscale(%)
 
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
 
hue-rotate(deg)
 
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
 
invert(%)
 
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
 
opacity(%)
 
转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
 
saturate(%)
 
转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
 
sepia(%)
 
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
 
url()
 
URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
 
例如：
 
filter: url(svg-url#element-id): url(svg-url#element-id)
 
initial
 
设置属性为默认值。
 
inherit
从父元素继承该属性。

 2.6 CSS3动画(animation)
 
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
 
 
 
动画的基本使用：
 
 
1 定义动画
 
 
2 调用定义好的动画
 
 
定义动画语法
 
@keyframes 动画名称 {
  0% {
    width: 100px;
  }
  100% {
    width: 200px
  }
}
 
使用动画语法
 
div {
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间;
}
 
动画序列
 
 
 
 
0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
 
 
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
 
 
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
 
 
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
 
 
动画常见属性
 
下面的表格列出了 @keyframes 规则和所有动画属性：
 
 
动画简写方式
 
 
 
 
动画简写方式
 
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
 
animation: name duration timing-function delay iteration-count direction fill-mode
 
 
知识要点
 
   
 
简写属性里面不包含 animation-paly-state
 
 
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
 
 
要想动画走回来，而不是直接调回来：animation-direction: alternate
 
 
盒子动画结束后，停在结束位置：animation-fill-mode: forwards
 
 
代码演示
 
animation: move 2s linear 1s infinite alternate forwards;
 
 
速度曲线细节
 
animation-timing-function: 规定动画的速度曲线，默认是ease。
 
值
描述
linear
动画从头到尾的速度是相同的。
ease
默认。动画以低速开始，然后加快，在结束前变慢。
ease-in
动画以低速开始。
ease-out
动画以低速结束。
ease-in-out
动画以低速开始和结束。
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
 
 
3 参考代码
 
3.1 HTML
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加载动画：公众号AlbertYang</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div class="loader">
			<div style="--x:0"></div>
			<div style="--x:1"></div>
			<div style="--x:2"></div>
			<div style="--x:3"></div>
			<div style="--x:4"></div>
			<div style="--x:5"></div>
		</div>
	</body>
</html>
 
3.2 CSS
 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #edf1f4;
	min-height: 100vh;
}

.loader {
	display: flex;
	flex-direction: row;
}

.loader div {
	position: relative;
	width: 40px;
	height: 200px;
	margin: 20px;
	overflow: hidden;
	border-radius: 50px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
	border: 2px solid #edf1f4;
	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
		-15px -15px 20px #fff,
		inset -5px -5px 5px rgba(255, 255, 255, 0.5),
		inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}

.loader div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	border-radius: 50px;
	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
		-15px -15px 20px #fff,
		inset -5px -5px 5px rgba(255, 255, 255, 0.5),
		inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}

.loader div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1),
		0 420px 0 400px #2196f3;
	animation: animate 2.5s ease-in-out infinite;
	animation-delay: calc(var(--x) * -0.3s);
	transform: translateY(160px);
}

@keyframes animate {
	0% {
		transform: translateY(160px);
		filter: hue-rotate(0deg);
	}

	50% {
		transform: translateY(0px);
		filter: hue-rotate(180deg);
	}

	100% {
		transform: translateY(160px);
		filter: hue-rotate(360deg);
	}
}
 
 
今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。如果想继续学习提高，欢迎关注我，每天学习进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！

Android的动画分为了三种， 分别是 帧动画、View动画、属性动画。
 
1、帧动画
 
帧动画就是顺序播放一组预先定义好的图片，就类似于我们观看视频，就是一张一张的图片连续播放。
 
帧动画的使用很简单，总共就两个步骤：
 
1、在res/drawable目录下定义一个XML文件，根节点为系统提供的animation-list，然后放入定义更好的图片；
2、使用AnimationDrawable类播放第一步定义好的Drawable中的图片，形成动画效果；
 
代码示例，第一步，创建Drawable文件：
 
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
	android:oneshot="false">
	<item android:drawable="@drawable/image01" android:duration="500"/>
	<item android:drawable="@drawable/image02" android:duration="500"/>
	<item android:drawable="@drawable/image03" android:duration="500"/>
</animation-list>
 
上述xml中，有些属性我们要了解到：
 
1、android:oneshot=“false”： 表示是否重复播放动画，还是只播放一次；
2、每个item都有Drawable和duration属性，Drawable表示我们要播放的图片；duration表示这张图播放的时间；
 
代码示例，第二步，用AnimationDrawable播放动画：
 
    Button button = (Button) findViewById(R.id.bt_001);
    button.setBackgroundResource(R.drawable.frame_animation);//把Drawable设置为button的背景
    //拿到这个我们定义的Drawable，实际也就是AnimationDrawable
    AnimationDrawable animationDrawable = (AnimationDrawable) button.getBackground();
    animationDrawable.start();//开启动画
 
实际上，从名字也可以看出，AnimationDrawable是一个Drawable的子类，所以我们定义的xml文件也是防在res/rawable目录下的.
 
2、View动画（也称补间动画）
 
2.1 View动画的基本介绍
 
view动画也称为补间动画，因为我们只需要拿到一个view，设定它开始和结束的位置，中间的view会自动由系统补齐，而不需要帧动画每一幅图都是提前准备好的。
 
View动画是Android一开始就提供的比较原始的动画，主要支持四种效果：平移、缩放、旋转、透明度变化（渐变） 四种基本效果，我们可以再这四种基础效果的基础上，选择其中的几种进行组合。
 
View动画的四种基本效果对应了四个Animation的子类，如下：
 

 比如创建一个平移动画translate_animation.xml， 也是需要把xml文件放在res/anim目录下：
 
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100"
    android:fromYDelta="0"
    android:toXDelta="0"
    android:toYDelta="0"/>
 
scale_animation.xml :
 
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0"/>
 
pivotX和pivotY表示以缩放中心的位置。
 
rotate_animation.xml:
 
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegree="0"
      android:toDegree="1800"
      android:pivotX = "50%"
      android:pivotY="50%"
      android:duration = "3000"
/>
 
渐变动画alpha_animation.xml：
 
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toAlpha="0.0" />
 
interpolator表示动画插值器， 可以控制动画的变化速率， 比如前200ms很慢，中间600ms很快，最后200ms又很慢。
 
pivot 这个属性主要是在translate 和 scale 动画中，这两种动画都牵扯到view 的“物理位置“发生变化，所以需要一个参考点。 而pivotX和pivotY就共同决定了这个点；它的值可以是float或者是百分比数值。
 以 pivotX 为例，说明其取不同的值的含义：
 
10:距离动画所在view自身左边缘10像素
10% :距离动画所在view自身左边缘 的距离是整个view宽度的10%
10%p:距离动画所在view父控件左边缘的距离是整个view宽度的10%
 
除了用xml来设置View动画，也可以用代码直接搞定，如
 
Animation translateAnimation = new TranslateAnimation(0，500，0，500);
    // 创建平移动画的对象：平移动画对应的Animation子类为TranslateAnimation
    // 参数分别是：
    // 1. fromXDelta ：视图在水平方向x 移动的起始值
    // 2. toXDelta ：视图在水平方向x 移动的结束值
    // 3. fromYDelta ：视图在竖直方向y 移动的起始值
    // 4. toYDelta：视图在竖直方向y 移动的结束值
    translateAnimation.setDuration(3000);
    // 播放动画直接 startAnimation(translateAnimation)
    //如：
    mButton.startAnimation(translateAnimation);
 
其他几个动画也类似，就不一一例举，看构造方法即可。
 
2.2 View动画的组合动画–AnimationSet
 
我们可以使用AnimationSet把View动画的平移、缩放、旋转、渐变都揉在一起，也是既能通过代码实现，也可以通过xml实现
 
xml实现：
 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    >
    <scale
        android:duration="3000"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>
    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:toAlpha="0.5" />
    <rotate
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX = "50%"
        android:pivotY="50%"
        android:duration = "3000"
        />
    <translate
        android:fromXDelta="0"
        android:toXDelta="100"
        android:fromYDelta="0"
        android:toYDelta="100" />
</set>
 
代码实现：
 
AnimationSet setAnimation = new AnimationSet(true);
    // 特别说明以下情况
    // 因为在下面的旋转动画设置了无限循环(RepeatCount = INFINITE)
    // 所以动画不会结束，而是无限循环
    // 所以组合动画的下面两行设置是无效的， 以后设置的为准
    setAnimation.setRepeatMode(Animation.RESTART);
    setAnimation.setRepeatCount(1);// 设置了循环一次,但无效

    // 旋转动画
    Animation rotate = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    rotate.setDuration(1000);
    rotate.setRepeatMode(Animation.RESTART);
    rotate.setRepeatCount(Animation.INFINITE);

    // 平移动画
    Animation translate = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT,-0.5f,
            TranslateAnimation.RELATIVE_TO_PARENT,0.5f,
            TranslateAnimation.RELATIVE_TO_SELF,0
            ,TranslateAnimation.RELATIVE_TO_SELF,0);
    translate.setDuration(10000);

    // 透明度动画
    Animation alpha = new AlphaAnimation(1,0);
    alpha.setDuration(3000);
    alpha.setStartOffset(7000);

    // 缩放动画
    Animation scale1 = new ScaleAnimation(1,0.5f,1,0.5f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    scale1.setDuration(1000);
    scale1.setStartOffset(4000);

    // 将创建的子动画添加到组合动画里
    setAnimation.addAnimation(alpha);
    setAnimation.addAnimation(rotate);
    setAnimation.addAnimation(translate);
    setAnimation.addAnimation(scale1);
    // 使用
    mButton.startAnimation(setAnimation);
 
2.3 View动画的使用场景
 
场景一：LayoutAnimation
 
LayoutAnimation作用于ViewGroup，为ViewGroup指定一个动画，然后，当它的子元素出场时都会具有这种效果。这种效果常用与ListView，有的ListView的每个item都以一定的动画形式出现，就是用到的LayoutAnimation。
 
LayoutAnimation也是一个View动画， 使用方式有三步：
 
1、定义LayoutAnimation的xml文件；
2、指定具体的入场动画；
3、为ViewGroup指定android:layoutAnimation属性，引用这个LayoutAnimation的xml文件；
 
第一步，定义LayoutAnimation的xml文件：
 
// res/anim/anim_layout.xml
<layoutAnimation
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:delay="0.5"
	android:animationOrder="normal"
	android:animation="@anim/anim_item"/>
 
其中animationOrder有三种选项： normal、reverse、random。
 
第二步，指定具体动画，也就是第一步中引用的anim_item：
 
// res/anim/anim_item.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:duration="300"
	android:interpolator="@android:anim/accelerate_interpolator"
	android:shareInterpolator="true" >
	<alpha
	android:fromAlpha="0.0"
	android:toAlpha="1.0" />
	<translate
	android:fromXDelta="500"
	android:toXDelta="0" />
</set>
 
第三步，为ViewGroup指定android:layoutAnimation属性：
 
<ListView
	android:id="@+id/list"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layoutAnimation="@anim/anim_layout"
	android:background="#fff4f7f9"
	android:cacheColorHint="#00000000"
	android:divider="#dddbdb"
	android:dividerHeight="1.0px"
	android:listSelector="@android:color/transparent" />
 
这样，ListView的每个item都具有了动画效果。
 
除了用xml文件，也同样可以使用代码实现， 代码需要用到LayoutAnimationController：
 
ListView listView = (ListView) layout.findViewById(R.id.list);
Animation animation = AnimationUtils.loadAnimation(this,R.anim.anim_
item);
LayoutAnimationController controller = new LayoutAnimationController
(animation);
controller.setDelay(0.5f);
controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
listView.setLayoutAnimation(controller);
 
2.4动画的监听
 
Animation.addListener(new AnimatorListener() {
      @Override
      public void onAnimationStart(Animation animation) {
          //动画开始时执行
      }

       @Override
      public void onAnimationRepeat(Animation animation) {
          //动画重复时执行
      }

     @Override
      public void onAnimationCancel()(Animation animation) {
          //动画取消时执行
      }

      @Override
      public void onAnimationEnd(Animation animation) {
          //动画结束时执行
      }
  });
 
场景二：Activity的切换效果
 
Activity有默认的切换效果，但是我们可以定制，主要用到overridePendingTransition（int enterAnima, int exitAnima）这个方法：
 
Intent intent = new Intent(this,TestActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);
 
注意， 这个方法必须在startActivity或者finish方法之后调用才会生效。
 
场景三：Fragment的切换效果
 
可以使用FragmentTransaction的setCustomAnimation方法添加切换动画。
 
3、属性动画
 
属性动画可以看作是增强版的补间动画，与补间动画的不同之处体现在：
 
补间动画只能定义两个关键帧在透明、旋转、位移和倾斜这四个属性的变换，但是属性动画可以定义任何属性的变化。
补间动画只能对 UI 组件执行动画，但属性动画可以对任何对象执行动画。
 
与补间动画类似的是，属性动画也需要定义几个方面的属性：
 
动画持续时间。默认为 300ms，可以通过 android:duration 属性指定。
动画插值方式。通过 android:interploator 指定。
动画重复次数。通过 android:repeatCount 指定。
重复行为。通过 android:repeatMode 指定。
动画集。在属性资源文件中通过 <set …/> 来组合。
帧刷新率。指定多长时间播放一帧。默认为 10 ms。
 
属性动画 API
 
Animator: 提供创建属性动画的基类，基本不会直接使用这个类。
ValueAnimator:属性动画用到的主要的时间引擎，负责计算各个帧的属性值，基本上其他属性动画都会直接或间接继承它；
ObjectAnimator： ValueAnimator 的子类，对指定对象的属性执行动画。
AnimatorSet：Animator 的子类，用于组合多个 Animator。
 
除了这些 API,属性动画还提供了一个 Evaluator ，用来控制属性动画如何计算属性值。
 
IntEvaluator:计算 int 类型属性值的计算器。
FloatEvaluator: 用于计算 float 类型属性值的计算器。
ArgbEvaluator: 用于计算十六进制形式表示的颜色值的计算器。
TypeEvaluator: 可以自定义计算器。
 
使用 ValueAnimator 创建动画的步骤：
 
调用 ValueAnimator 的 ofInt()、ofFloat() 或者 ofObject() 静态方法创建 ValueAnimator 实例。
调用 ValueAnimator 的 setXxx() 等方法设置持续时间，插值方式、重复次数等。
调用 ValueAnimator 的 start() 方法启动动画。
为 ValueAnimator 注册 AnimatorUpdateListener 监听器，在该监听器中可以监听 ValueAnimator 计算出来的值改变，并将这些值应用到指定对象上。
 
属性动画的一般使用：
 
定义属性动画和补间动画等类似，有两种方式：
 
使用 ValueAnimator 或者 ObjectAnimator 的静态工厂方法创建动画。
使用资源文件来定义动画。
 
属性动画的使用：
 
创建 ValueAnimator 或 ObjectAnimator 对象 —— 即可以从 XML 资源文件加载该动画也可以直接调用 ValueAnimator 或者 ObjectAnimator 的静态工厂方法创建动画。
根据需要为 Animator 对象设置属性。
如果需要监听 Animator 的动画开始事件，动画结束事件、动画重复事件、动画值改变事件，并根据事件提供响应处理代码，需要为Animator 对象设置监听器。
如果有多个动画需要同时播放，需要使用 AnimatorSet 组合这些动画。
调用 Animator 对象的 start 启动动画。
 
代码示例：
 
private void startAnim() {
    ObjectAnimator animator0 = ObjectAnimator.ofFloat(
            mImageViews.get(0),//这里传入的是一个任意对象，此处是imageview对象
            "alpha",
            1F,
            0.5F);
    ObjectAnimator animator1 = ObjectAnimator.ofFloat(
            mImageViews.get(1),
            "translationY",
            200F);
    ObjectAnimator animator2 = ObjectAnimator.ofFloat(
            mImageViews.get(2),
            "translationX",
            200F);
    ObjectAnimator animator3 = ObjectAnimator.ofFloat(
            mImageViews.get(3),
            "translationY",
            -200F);
    ObjectAnimator animator4 = ObjectAnimator.ofFloat(
            mImageViews.get(4),
            "translationX",
            -200F);
    AnimatorSet set = new AnimatorSet();
    set.setDuration(500);
    set.setInterpolator(new BounceInterpolator());
    set.playTogether(
            animator0,
            animator1,
            animator2,
            animator3,
            animator4);
    set.start();
    mFlag = false;
}
 
总结
 
以上就是Android的帧动画、view动画和属性动画的用法。
 
 那除了这三种动画，我们是否还有其他动画机制呢？或者说有什么变种呢？ 
 
这个问题，将在下一篇博客，Android除了三大动画，还有哪些动画？ 再进行分析。