希望给你实现动画提供一些思路

289 阅读7分钟

背景:公司的官网一期到二期需要把很多静态图片变成动画。比如可能本来只是一个表单图片,现在需要让他动起来,会自动输入等等。

一、想要呈现的效果图

首先贴图,下面就是我们本次需求需要呈现的效果

动画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年毕业。起步两快年左右的前端

《个人博客》,还没文章发布端。。。太懒了吧