Web上的各种动画解决方案前段时间在做圣诞节运营页面的时候，UI给了各种炫酷的动画，看起来不错，但是实现起来，毛毛的.为此，总结了几种在多个Web中实现动画的方案。1.css3-transform作为一名优秀的前端开发工程师（车兔仔），可以自己手动实现的动画不依赖UI。为此css3提供了一个工具叫transform，它的很多属性都能满足我们的要求。一些功能。1.1Rotaterotate()：通过指定的angle参数为原元素指定一个二维旋转（2Drotation），需要先定义transform-origin属性。transform-origin定义了旋转的基点，其中angle是指旋转的角度。如果设定值为正，则表示顺时针旋转。如果设定值为负，则表示逆时针旋转。如：transform:rotate(30deg):1.2MovetranslateMovetranslate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（即X轴和Y轴在同一时间移动）同时）;translateX(x)仅水平移动（X轴移动）；translateY(Y)只能垂直移动（Y轴移动），具体用法如下：1.translate([,])：通过vector[tx,ty]指定一个2D平移，tx为第一个过渡值参数，ty为第二个过渡值参数option。如果未提供，则ty取0作为其值。即translate(x,y)，表示物体平移，根据设定的x,y参数值，当值为负时，物体向反方向移动，其基点为中心点元素的默认，或者根据transform-origin来改变基点。如transform:translate(100px,20px):2.translateX()：通过在X方向给出一个数字来指定一个平移。只将元素移动到x轴，它的基点也是元素的中心点，基点的位置也可以根据transform-origin改变。如：transform:translateX(100px):3.translateY()：通过给出Y方向的个数来指定一个平移。只移动到Y轴，基点在元素的中心点，可以通过transform-origin改变基点的位置。如：transform:translateY(20px):1.3Scalingscale缩放scale和movingtranslate很相似，也有三种情况：scale(x,y)同时水平和垂直缩放元素（即Xaxis和Yaxis轴同时缩放）；scaleX(x)元素仅水平缩放（X轴缩放）；scaleY(y)元素只是垂直缩放（Y轴缩放），但它们有相同的缩放中心点和基点，中心点为元素的中心位置，缩放基数为1，如果值为大于1，元素将被放大，否则值小于1，元素将被缩小。下面我们来看看这三种情况的具体使用方法：1.scale([,]):提供两个参数用于执行[sx,sy]缩放向量，指定一个2D缩放(2Dscaling).如果没有提供第二个参数，则取与第一个参数相同的值。scale(X,Y)用于对元素进行缩放，可以通过transform-origin设置元素的基点，基点也位于元素的中心；base中的X代表水平缩放倍数，Y代表垂直缩放倍数，Y为可选参数。如果不设置Y值，则表示X和Y方向的比例因子相同。并以X为准。例如：transform:scale(2,1.5):2.scaleX()：使用[sx,1]缩放向量进行缩放操作，sx为必填参数。scaleX表示元素只在X轴（水平方向）上缩放元素。它的默认值为(1,1)，它的基点也在元素的中心。我们还通过transform-origin来改变元素的基点。例如：transform:scaleX(2):3.scaleY()：使用[1,sy]缩放向量进行缩放操作，sy为必填参数。scaleY表示元素只在Y轴（垂直方向）上对元素进行缩放，其基点也在元素的中心，可以通过transform-origin改变元素的基点。如transform:scaleY(2):1.4DistortionskewDistortionskew与translate和scale有相同的三种情况：skew(x,y)使元素在水平和垂直方向同时发生扭曲（X轴和Y轴在一定角度同时为畸变值）；skewX(x)只在水平方向扭曲元素（X轴扭曲）；skewY(y)只对元素进行垂直方向的扭曲（Y轴扭曲），具体使用如下：1.skew([,]):X轴和Y轴上的倾斜变换-轴（倾斜变换）。第一个参数对应X轴，第二个参数对应Y轴。如果不提供第二个参数，则值为0，即Y轴方向没有倒角。skew用于扭曲和改变元素的线条。第一个参数是水平方向的扭曲角度，第二个参数是垂直方向的扭曲角度。第二个参数为可选参数，如果不设置第二个参数，则Y轴为0deg。同样以元素的中心为基点，我们也可以通过transform-origin改变元素的基点位置。例如：transform:skew(30deg,10deg):2.skewX()：指定沿X轴以给定角度进行倾斜变换。skewX是让元素以其中心为基点，在水平方向（X轴）进行行的扭曲和变化。元素的基点也可以通过transform-origin改变。如：transform:skewX(30deg)3.skewY()：指定沿Y轴给定角度的倾斜变换（倾斜变换）。skewY用于设置元素在垂直方向（Y轴）以其中心为基准按给定角度扭曲变形。同样，我们可以通过transform-origin改变元素的基点。如：transform:skewY(10deg)2.序列帧动画当基本的transform不能满足更复杂的动画时，我们可以考虑以序列帧动画的形式实现。原理很简单。就是把一个运动的画面剪切成几帧的静止画面，然后用程序在短时间内切换画面，实现视觉动画。实现也很简单，每隔一段时间切换一下显示区可以看到的图片就可以了。由于图片在可见区域的变换不是渐变，而是瞬变，所以我们需要使用css中animation-timing-function中的steps()来实现。steps([,[start|end]]?)：接受两个参数的步进函数。第一个参数必须是正整数，指定函数的步数。第二个参数的值可以是start或end，指定每一步值变化的时间点。第二个参数是可选的，默认值为end。工作机制如图所示：因此，我们需要将多张静态图片组合成一张，就像使用精灵图片一样，然后使用动画改变背景作为动画区域的背景图片。-position可以实现序列帧动画。提供一个演示代码：div{background-image:url('image/image.jpeg');背景重复：不重复；高度：345px；宽度：235px；动画：无限移动1ssteps(1,end)；}@keyframes移动{0%{背景位置：0px0；}14.285%{背景位置：-180px0;}28.571%{背景位置：-369px0；;}57.143%{背景位置：-35px-424px；}71.429%{背景位置：-235px-424px；}85.714%{背景位置：-435px-424px；}100%{}}3.gif,apng,webp当CSS动画无法实现UI需要的动画时，我们也懒得用更复杂的方式来实现，所以最好让UI直接导出一个动画片。那么，您应该使用哪种动画格式？别担心，听我说。1、GIF是一种很古老的格式，诞生于1987年，最后一个版本是1989年。2、APNG格式是PNG的扩展。第一帧在IDAT部分中的存储方式与普通PNG相同。APNG只增加了三个新的部分，所以如果一个软件只支持PNG而不支持APNG，它仍然可以使用。显示第一帧图片，但无法移动。APNG新增的三段分别是：acTL（动画控制）用于存储帧数和播放次数，而整个文件中只有一段fcTL（帧控制）用于存储高、宽、每帧的位置和延迟。时间等信息，每帧一节fdAT（framedata）用于存储除第一帧外每一帧的图像数据，采用Deflate压缩，每帧一节3.WebP，2010年谷歌推出为什么叫通吃图像格式？因为它可以有损（取代JPEG）、无损（取代PNG）、移动（取代GIF），而且在压缩率上已经完全超越了这三种常用格式。压缩率GIF用的是LZW，而APNG用的是Deflate，加上APNG继承了PNG的filter，利用相邻像素的相似度，大大提高了压缩率。彩色GIF每像素只有8位，也就是说只有256种颜色，所以很多人误以为GIF不支持24位RGB，但其实GIF的极限是每帧最多只能有256色，但每种颜色可以是24位。但即便如此，256色还是太少，导致GIF质量不佳。APNG和WebP根本没有这样的限制。透明GIF虽然也支持透明，但是只支持将某种颜色标记为透明，也就是说不支持半透明，只支持全透明或者完全不透明。如果您将具有半透明边缘的图像转换为GIF，您将遇到另一个答案中提到的遮罩问题。APNG和WebP都支持8位alpha通道，透明度可以有256级。兼容性可能是GIF的唯一优势。几乎所有的浏览器都支持GIF，支持APNG的浏览器有Chrome、Firefox、Safari、Opera，支持WebP的浏览器有Chrome、Firefox、Edge、Opera4。canvas，svgacanvas首先创建一个画板，然后在画板上操作点、线、面、图片、dom元素来实现变化。在变化过程中加入一些过渡状态，得到我们想要的效果。而svga类似于canvas，通过不断修改dom节点g的样式来实现变化。canvas和svga动画的一个优点就是完全交给开发，h5提供了丰富的API供大家使用。理论上只要代码足够好，任何动画都可以实现。这里就不一一介绍canvas和svga的API了。有兴趣的可以自己去查资料。https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorialhttps://developer.mozilla.org/zh-CN/docs/Web/API/SVGAElement5.lottie动画lottie动画在浏览设备内渲染的原理其实和svga类似，都是通过不断改变元素的样式来实现动画效果，但是lottie动画有一个很大的优势：不需要开发撕裂动画手，UI可以通过画图软件制作动画，然后导出一个文件，里面包含一个json文件（用来描述材质的运动轨迹），一个html文件（用来预览lottie动画）和必要的materials，开发只需要导入json和materials就可以实现动画。Lottie可以解决的问题：1>开发者无需编写动画，加载即可2>多平台支持，一个设计可以在多个终端上使用3>解决设计提供的动态效果不一致的问题以及实现4>因为只加载json文件，比较占空间小5>专业做专业的事，设计师安心做炫酷的动画，开发者专注于写逻辑业界已经有很多库基于webloadinglottie，可以安心使用，兼容性也很好。本文参考：https://www.cnblogs.com/qianduanjingying/p/4937574.htmlhttps://www.jayxon.com/gif-apng-webp/
