大家好,今天给大家分享下svg如何实现一个简单的tabbar动效,并适配移动端平台。 demo链接
动效分析
我们先来分析一下如图tabbar的元素动一动的过程:
- 动画开始阶段:整个图标进行类似心跳效果的抖动,并且内部小图标进行消失
- 动画运行到中间:图标内部有三层颜色的闪屏效果,运动结束并停止到最后一层
- 动画最后阶段:尬聊图标中间小圆跳动显示,其他三个内部小图标变成白色并进行线条移动显示。
tabbar 图标绘制
动画分析后,我们先来进行准备工作,由于这个动效没有原始文件,所以我们还需自己在软件上进行48x48大小的图标绘制导出,或者自己用代码就行绘制。
一般设计师都会提供源文件,所以我就不进行图标绘制的教程了。
这是我通过figma绘制的图标svg文件及源码: 链接: pan.baidu.com/s/1K8lK-c7P… 提取码: m2wn
tabbar的基本布局
页面采用rem布局,使用flexible.js进行适配,我们先来写一个不带动画的tabbar,tababr整体高度100px,图标宽高48px,文字20px。
首页图标的绘制
创建svg
在第一个tabbar__svg
中,我们增加一个svg
标签,设置 可视范围为 48 48
大小,并且内部fill
填充设置none
创建裁切路径
由于三层颜色的闪屏效果是在内部进行,超出边线是不可见的,所以我们需要设置一个跟图标同样形状大小的 clip-path
裁切路径,让动画超出不可见。
打开home-icon.svg
,找到id为home-clip-path的裁切路径:
在 SVG 中我们将第一个裁剪路径,命名为id="clipPath1",将id为home-clip-path的path放到clipPath中,这样我们的裁剪路径就制作好了。
添加图标里的元素内容
现在还没有内容,我们定义一个组<g>
,在<g>
元素中使用 clip-path 属性来引用已经定义好的 的裁剪路径clipPath1,并且将home.svg中图标外线框元素和中间小圆元素复制到组里面,如下代码:
这样我们的图标就显示出来了,但是home-border设置了stroke-width="8"的描边宽度,实际上显示出来的是4px宽度。
原因:
svg描边模式是居中扩展描边。也就是内部外部会扩展4px ,再加上裁切路径将外部的4px裁切掉了,所以这里stroke-width是8:
创建闪屏元素
闪屏元素这里我们实际上用的三个线性渐变圆形,从左下方移动到中间,通过延迟时间运动来达到闪屏的效果。
所以我们先在中心位置 cx="24" cy="24"
创建半径为35的三个渐变圆形,再通过translate移动到左下方,由于tabbar的每一项都有这个闪屏元素,为了多个图形的复用,我们再创建一个存放公共元素的svg组件。
在tabar的首页图标进行引用
这时三个圆重叠在一起,我们通过css将圆圈移动到左下角看不到的地方。
第一个图标所有元素添加完成,接下来开始我们的动画吧!
图标心跳动画
先给html的第一项增加选中状态 .on,给.on里面的标签添加animation动画:
心跳动画我们通过css的scale缩放大小进行实现:
中间小圆路径消失动画
路径动画关键在于属性stroke-dasharray
和 stroke-offset
。
- stroke-dasharray: 用于创建虚线 ;
- stroke-dashoffset:整个路径的偏移值;
我们先通过js获取小圆的路径长度,约为44:
在scss中设置圆的虚线长度和偏移值,并定义关键帧,让圆的路径偏移44达到路径消失的效果,这时我们就可以看到小圆的路径动画了
闪屏动画
将三个闪屏元素从左下方移动到中间,通过延迟时间运动来达到闪屏的效果。
中间小圆路径显示动画
闪屏动画过后,中间小圆变为白色,并且根据小圆的路径进行显示
我们更改下@keyframes circle-path
的关键帧的样式:
-
0%-50%小圆灰色,并进行小圆的隐藏;
-
50.1%-100%小圆白色,并进行小圆的显示;
-
将animation的动画持续时间改为1s;
将文字改为蓝色
当.on选中得时候,我们要将文字更改为蓝色
探索、尬聊,我的图标绘制
图标绘制
探索、尬聊,我的图标绘制同首页图标绘制步骤是一样的。
我们打开这三个的svg文件,将需要的元素复制到html中。并将闪屏元素加到中间位置
获取中间的路径长度
keyframs的@minxi
首页、探索、我的三个图标内部的图形都是路径动画,并且效果一致,我们可以封装一个@minxi,直接调用生成关键帧:
给图标加上虚线和偏移值默认值为0,再给选中状态下,添加animation动画。
点击图标切换动画
动画我们已经添加好了,现在我们来进行点击图标进行动画的切换显示。
点击图标,先清除选中状态.on,再给点击的图标加上.on,这样我们就可以实现点击切换动画了。
尬聊中间小圆动画
尬聊中间的小圆动画跟其他图标里的效果不一样,需要单独进行处理。
中间小圆先缩小隐藏再显示并上下移动:
一个简单tabbar动画就完成了。通过这个简单的实例可以看到,UI制作好svg文件后,使用svg +css3实现动画效果是非常的快速简单的。 demo链接
最后
如果喜欢tabbar动画,可以参考 ui动效,本示例也是参考其中一个进行的制作。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!