背景:公司的官网一期到二期需要把很多静态图片变成动画。比如可能本来只是一个表单图片,现在需要让他动起来,会自动输入等等。
一、想要呈现的效果图
首先贴图,下面就是我们本次需求需要呈现的效果
动画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年毕业。起步两快年左右的前端
《个人博客》,还没文章发布端。。。太懒了吧