背景：公司的官网一期到二期需要把很多静态图片变成动画。比如可能本来只是一个表单图片，现在需要让他动起来，会自动输入等等。
一、想要呈现的效果图
首先贴图，下面就是我们本次需求需要呈现的效果
动画1——hover会整体向上且旋转
动画2——整体作为大banner，点沿线动画，后底部菜单升起
动画3——如图所示（狗头）
动画4——底部"I","O"铺满，右边立体图片下面有io会闪烁
二、进一步分析
1.针对动画1
动画：
分析：
一个简单的hover动画，这种小个的微动画，一般都可以用lottie来实现，不过这里需要设计师会AE并且生成该json。设计师表示学习成本比较麻烦，我们可以先试试其他方式。Fine！很幸运这里的动画也仅仅只是两个图混在一起，我们只需要设计师切两张图，我们再用定位定在一起，进行transform即可。这个应该大🔥都会，随便贴一下css。
code：
&:hover { transform: translateY(-10px); .icon-top { transform: translateX(-50%) rotate(360deg); }}
2.针对动画2
动画：
分析：（图片右键打开新页面，可以看清晰点）
1）首先，这是一个banner，所以要保持屏幕变化，效果得一致。
2）所以我们把底部网格和上面分开，让底部去做原来的banner，上面动画采用svg做动画。
好了，重头戏svg来了，这时候有人就要说了，我没学过svg啊，这是不是玩不了了。
no！no！no！能做！利用好设计工具sketch！，window的应该可以用ai。
3）在sketch设计稿中选中你想要导出的模块，右键即可得到svg代码（windows的ai应该也是做得到的，不行啊不行就买个mac吧🌚），如下上面操作可以得到代码：完整代码
我们可以发现其实里面都是一个个节点集成的，那么是不是有思路了。先随便看一个圆，如下
在代码找到他，如下
<g id="椭圆形备份-13"> <use fill="black" fill-opacity="1" filter="url(#filter-32)" xlink:href="#path-31"></use> <use fill="#FFDA59" fill-rule="evenodd" xlink:href="#path-31"></use></g>
我们可以看出没啥关键信息，可能也不太符合我们想知道的，但是我们可以看到他有xlink:href="#path-31" href我们可以联想到他应该是有和其他地方关联，再从代码里搜索path-31，我们可以查到如下代码
<circle id="path-31" cx="796" cy="241" r="4"></circle>
可以看出是circle标签，可知是个圆，cx，cy，r可以联想出分别是坐标和半径。得到了这些就好发挥了，我们有两个方向：
1.是从js方面去修改x，y进行动画
2.直接css的transform去修改translate进行移动。这里用的单位直接是px即可，svg里面移动，是整体会自适应的，我们只需考虑一个尺寸下对了即可。
细心的同学也发现了，我们只要4个圆，但是我上面的代码图里却有很多个圆，其实是为了定位，让我知道动画的转折点坐标是多少，可以更快的得出对应css样式，当然也可以从sketch的时候就量好。
下面我随便贴出一个圆的css动画，其他圆和下面方块的思路都是一样的，只是节点的translate。然后加些delay即可，应该不难, 完整不带背景的示例
@keyframes move1 { 0% { transform: translate(0, 0); } 75% { transform: translate(-701px, 408px); } 100% { transform: translate(-638px, 443px); } }
.move1 { animation: move1 1.25s; transform: translate(-638px, 443px);}
好的，下一个
3.针对动画3
动画：
分析：
动画3也是按照上面2的思路去开发的，不过这里有些小tips。
1.线条的变细。
首先我们看他的线条代码是line标签（如下），我们还是按照修改css的去animation的思路。这里我想到的是clip-path属性去裁剪
线条html：
<line x1="31" y1="186.5" x2="72" y2="186.5" id="路径-51" stroke="#FFFFFF" stroke-width="2"></line>
裁剪css：
@keyframes linetop { 0% { clip-path: polygon(0 0, 10px 0, 10px 0, 0 0) } 100% { clip-path: polygon(0 0, 10px 0, 10px 41px, 0 41px) } }
.logo { animation: logo 2s linea;}
代码层面看起来可以了，但是实际却是如下图，线条变细了，不是说clip-path的参数不对
后面经过尝试，觉得是line这个标签不太适合这个操作，然后就改了下line为rect，没错手动改改，反正坐标一样，rect只要x，y，宽高（两点相减）即可和，得到。
<rect x="217" y="186.5" width="41" height="2" id="路径-51" stroke="#FFFFFF" stroke-width="2">
good！得到的效果就一模一样了。
2.transition-origin的问题。
本来认为从上往下写好了，可以直接旋转一下就是从下往上。但是现实很骨感，rolate的旋转支点不知道以谁为主体的，设置了transition-origin:center center也不行。经过一番摸索，才发现，svg标签里面的所有标签都只有svg这层标签一个origin，所以不管在那个标签下去修改transition-origin，都是修改这个，上面的center， center也只是图片中央，默认设置的0，0则是图片的左上角，所以原本的旋转想法泡汤。（origin如下图所示）
3.问题来了，那么下面的加载如何整。
加载靠的就是rolate的animation，大🔥应该都知道，但是现在旋转支点不对，咋办？
我这里的处理方法是，直接找到我们想要的那个旋转点，强行写死参数，对就是加载logo的中心的x，y是多少。我们就写多少，如下。这样就可以转起来了，正常的转起来
transform-origin: 145.5px 482.5px;
4.针对动画4
动画：
分析：
1.我们可以看到底部是IO组成
2.右边图形部分下面的io有些会闪烁，且闪烁的部分基本是在版心内
我们发现这动画其实用前面1、2的方法貌似都无法实现，因为即使是svg，他也只是个图片的样子，无法做到io一直都那个大小，闪烁的东西一直在图片下方区域且在版心内。
所以分析了下，果断上了canvas，思路如下
1.用随机生成圆和矩形，平铺屏幕，并且监听屏幕变化进行重绘
2.闪烁区域其实距离屏幕中线是不变的，这里我们可以直接写死一个阈值。我这里写的是大于中线80且小于中线630的区域里面去挑选io进行闪烁。动画可以闪烁的点其实是固定的，可以仔细看看。所以都可以随机抽出来
3。在造一个canvas把图片放到特定位置即可。
学过canvas的可能一下就懂思路了，这里不多加赘述了，可以直接看源码图片我注释掉了，可以自己引入自己的看看。
三、svg的额外例子
再举一个栗子。下图原本只是有个轮播，其他都是静态图片，这里我指的是图片，没错右边的表单也是图片，那么再这个需求需要有手动输入的效果。所以为了保留原来的效果的同时，加上打字效果。那么怎么实现呢。
首先，还是一样复制出svg，然后就节省了我们去写这个表单的时间，还可以保持在屏幕变小时整体变小，省的写响应式。动起来怎么动，我节选一段svg大家就懂了。
<text id="●●●" opacity="0.6" font-family="LucidaGrande, Lucida Grande" font-size="14" font-weight="normal" fill="#FFFFFF"> tspan x="1491" y="407"> 01/01 </tspan></text>
sketch帮忙生成了这个，文案也带里面了，01/01，用css写打字效果可能需要点操作，但是js写不是手到擒来吗。改成变量去，定时切换不就好了。
<text id="●●●" opacity="0.6" font-family="LucidaGrande, Lucida Grande" font-size="14" font-weight="normal" fill="#FFFFFF"> <tspan x="1491" y="407">{{ cvv.value }}</tspan> </text>
四、总结
其实本文主要讲的是通过sketch生成svg的方式去做动画，这样成本真的很低，上手也很简单，他技能减少我们去写很多代码，也可以保持图片的性质，进行自适应变化。希望大家在不要畏惧动画开发，他有时可能只需要复制粘贴即可完成。
最后我认为除开一些库（有点懒惰，看的比较少），思考动画的方式可以是，能不能div直接实现->能不能svg实现->能不能canvas实现->那用video吧。。。。
最后最后：
我是爱学习的leoon，20年毕业。起步两快年左右的前端
《个人博客》，还没文章发布端。。。太懒了吧
