大家好,今天给大家分享下svg如何实现一个简单的tabbar动效,并适配移动端平台。 demo链接
动效分析
我们先来分析一下如图tabbar的元素动一动的过程:
- 动画开始阶段:整个图标进行类似心跳效果的抖动,并且内部小图标进行消失
- 动画运行到中间:图标内部有三层颜色的闪屏效果,运动结束并停止到最后一层
- 动画最后阶段:尬聊图标中间小圆跳动显示,其他三个内部小图标变成白色并进行线条移动显示。
tabbar 图标绘制
动画分析后,我们先来进行准备工作,由于这个动效没有原始文件,所以我们还需自己在软件上进行48x48大小的图标绘制导出,或者自己用代码就行绘制。
一般设计师都会提供源文件,所以我就不进行图标绘制的教程了。
这是我通过figma绘制的图标svg文件及源码: 链接: pan.baidu.com/s/1K8lK-c7P… 提取码: m2wn
tabbar的基本布局
页面采用rem布局,使用flexible.js进行适配,我们先来写一个不带动画的tabbar,tababr整体高度100px,图标宽高48px,文字20px。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" /><script src="flexible.js" type="text/javascript" charset="utf-8"></script></head><body><div class="tabbar"><div class="tabbar__item"><div class="tabbar__svg"></div><div class="tabbar__name">首页</div></div><div class="tabbar__item"><div class="tabbar__svg"></div><div class="tabbar__name">探索</div></div><div class="tabbar__item"><div class="tabbar__svg"></div><div class="tabbar__name">尬聊</div></div><div class="tabbar__item"><div class="tabbar__svg"></div><div class="tabbar__name">我的</div></div></div></body></html>复制代码
*{ padding: 0; margin: 0; }/** * rem 基础值,将750分成10份,每一份1rem = 75px */$baseVal : 750 / 10;/** * px转rem * @param {Object} $px */@function pxToRem($px){ @return $px / $baseVal * 1rem; }.tabbar{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; height: pxToRem(100); background-color: #FFFFff; border-top: 1px solid #eee; &__item{ display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; } &__svg{display: flex; width:pxToRem(48); height:pxToRem(48); background-color: #AFB8CC; } &__name{ padding-top: pxToRem(4);; font-size: pxToRem(20); transition: color .3s; color: #AFB8CC; } }复制代码
首页图标的绘制
创建svg
在第一个tabbar__svg中,我们增加一个svg标签,设置 可视范围为 48 48大小,并且内部fill填充设置none
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>复制代码
创建裁切路径
由于三层颜色的闪屏效果是在内部进行,超出边线是不可见的,所以我们需要设置一个跟图标同样形状大小的 clip-path 裁切路径,让动画超出不可见。
打开home-icon.svg,找到id为home-clip-path的裁切路径:
<path id="home-clip-path" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z" fill="#C4C4C4"/>复制代码
在 SVG 中我们将第一个裁剪路径,命名为id="clipPath1",将id为home-clip-path的path放到clipPath中,这样我们的裁剪路径就制作好了。
<clipPath id="clipPath1"><path id="home-clip-path" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z" fill="#C4C4C4"/></clipPath>复制代码
添加图标里的元素内容
现在还没有内容,我们定义一个组<g>,在<g>元素中使用 clip-path 属性来引用已经定义好的 的裁剪路径clipPath1,并且将home.svg中图标外线框元素和中间小圆元素复制到组里面,如下代码:
<div class="tabbar__svg"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><!-- 裁切路径 --><clipPath id="clipPath1"><path id="home-clip-path" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z" fill="#C4C4C4"/></clipPath><!-- 组,图标路的元素集合 --><g clip-path="url(#clipPath1)"><!-- 图标外框 --><path id="home-border" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z" stroke="#B1BACD" stroke-width="8"/><!-- 灰色小圆 --><path id="home-circle" d="M31 28C31 31.866 27.866 35 24 35C20.134 35 17 31.866 17 28C17 24.134 20.134 21 24 21C27.866 21 31 24.134 31 28Z" stroke="#B1BACD" stroke-width="4"/></g></svg></div>复制代码
这样我们的图标就显示出来了,但是home-border设置了stroke-width="8"的描边宽度,实际上显示出来的是4px宽度。
原因:
svg描边模式是居中扩展描边。也就是内部外部会扩展4px ,再加上裁切路径将外部的4px裁切掉了,所以这里stroke-width是8:
创建闪屏元素
闪屏元素这里我们实际上用的三个线性渐变圆形,从左下方移动到中间,通过延迟时间运动来达到闪屏的效果。
所以我们先在中心位置 cx="24" cy="24"创建半径为35的三个渐变圆形,再通过translate移动到左下方,由于tabbar的每一项都有这个闪屏元素,为了多个图形的复用,我们再创建一个存放公共元素的svg组件。
<svg width="0" height="0"><defs><!-- 转场渐变 --><linearGradient id="transition1_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse"><stop stop-color="#F96C81" /><stop offset="1" stop-color="#FFB2C1" /></linearGradient><linearGradient id="transition2_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse"><stop stop-color="#FED966" /><stop offset="1" stop-color="#FFECB0" /></linearGradient><linearGradient id="transition3_linear" x1="55.4167" y1="7.29167" x2="15.3125" y2="60.5208" gradientUnits="userSpaceOnUse"><stop stop-color="#86B4FF" /><stop offset="1" stop-color="#698AFF" /></linearGradient><!-- 转场元素 --><g id="transition_move1"><circle cx="24" cy="24" r="35" fill="url(#transition1_linear)"></circle></g><g id="transition_move2"><circle cx="24" cy="24" r="35" fill="url(#transition2_linear)"></circle></g><g id="transition_move3"><circle cx="24" cy="24" r="35" fill="url(#transition3_linear)"></circle></g></defs></svg>复制代码
在tabar的首页图标进行引用
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><!-- 裁切路径 --> <clipPath id="clipPath1"> <path id="home-clip-path" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z" fill="#C4C4C4"/></clipPath><!-- 组,图标路的元素集合 --><g clip-path="url(#clipPath1)"><!-- 图标外框 --><path id="home-border" d="M27.9774 1.12273C25.5352 -0.37424 22.4648 -0.374244 20.0226 1.12272L6.00262 9.71614C2.44202 11.5204 0 15.2271 0 19.5068V37.0411C0 43.0935 4.88417 48 10.9091 48H37.0909C43.1158 48 48 43.0935 48 37.0411V19.5068C48 15.2271 45.558 11.5204 41.9974 9.71615L27.9774 1.12273Z" stroke="#B1BACD" stroke-width="8"/><!-- 引入的三个闪屏⚪ --><use class="transition_move1" href="#transition_move1"></use><use class="transition_move2" href="#transition_move2"></use><use class="transition_move3" href="#transition_move3"></use><!-- 灰色小圆 --><path id="home-circle" d="M31 28C31 31.866 27.866 35 24 35C20.134 35 17 31.866 17 28C17 24.134 20.134 21 24 21C27.866 21 31 24.134 31 28Z" stroke="#B1BACD" stroke-width="4"/></g></svg>复制代码
这时三个圆重叠在一起,我们通过css将圆圈移动到左下角看不到的地方。
.tabbar{ .transition_move1,.transition_move2,.transition_move3{ transform: translate(-50px,50px); } }复制代码
第一个图标所有元素添加完成,接下来开始我们的动画吧!
图标心跳动画
先给html的第一项增加选中状态 .on,给.on里面的标签添加animation动画:
<div class="tabbar__item on"> ...</div>复制代码
心跳动画我们通过css的scale缩放大小进行实现:
.tabbar{ .on{ svg{ animation: heartbeat 1s; } } }/** * 心跳动画 */@keyframes heartbeat{ 0%{transform: scale(1);} 20%{transform: scale(0.8);} 40%{transform: scale(1);} 60%{transform: scale(0.9);} 80%{transform: scale(1);} }复制代码
中间小圆路径消失动画
路径动画关键在于属性stroke-dasharray 和 stroke-offset。
- stroke-dasharray: 用于创建虚线 ;
- stroke-dashoffset:整个路径的偏移值;
我们先通过js获取小圆的路径长度,约为44:
let homeCirclePath = document.querySelector('#home-circle')console.log(homeCirclePath.getTotalLength()); // 43.9885 约等44复制代码
在scss中设置圆的虚线长度和偏移值,并定义关键帧,让圆的路径偏移44达到路径消失的效果,这时我们就可以看到小圆的路径动画了
.tabbar{ #home-circle{ stroke-dasharray:44 44; stroke-dashoffset:0; } .on{ #home-circle{ animation: home-circle 0.5s ease forwards; } } }@keyframes home-circle{ 0%{stroke-dashoffset:0;} 100%{ stroke-dashoffset:44; } }复制代码
闪屏动画
将三个闪屏元素从左下方移动到中间,通过延迟时间运动来达到闪屏的效果。
.tabbar{ .transition_move1,.transition_move2,.transition_move3{ transform: translate(-50px,50px); } .on{ .transition_move1{animation: transition-move 0.5s 0.3s forwards;} .transition_move2{animation: transition-move 0.5s 0.35s forwards;} .transition_move3{animation: transition-move 0.5s 0.4s forwards;} } }/*闪屏移动*/@keyframes transition-move{ 100%{ transform: translate(0,0); } }复制代码
中间小圆路径显示动画
闪屏动画过后,中间小圆变为白色,并且根据小圆的路径进行显示
我们更改下@keyframes circle-path的关键帧的样式:
0%-50%小圆灰色,并进行小圆的隐藏;
50.1%-100%小圆白色,并进行小圆的显示;
将animation的动画持续时间改为1s;
.tabbar{ #circle{ stroke-dasharray:44 44; stroke-dashoffset:0; } .on{ #circle{ animation: circle-path 1s ease forwards; } } }/** * 小圆路径动画 */@keyframes circle-path{ 0%{ stroke:#B1BACD; stroke-dashoffset:0; } 50%{ stroke:#B1BACD; stroke-dashoffset:44; } 50.1%{ stroke:#fff; stroke-dashoffset:-44; } 100%{ stroke:#fff; stroke-dashoffset:0; } }复制代码
将文字改为蓝色
当.on选中得时候,我们要将文字更改为蓝色
.tabbar{ .on{.tabbar__name{ color: #698AFF; } } }复制代码
探索、尬聊,我的图标绘制
图标绘制
探索、尬聊,我的图标绘制同首页图标绘制步骤是一样的。
我们打开这三个的svg文件,将需要的元素复制到html中。并将闪屏元素加到中间位置
<!-- 探索 --><div class="tabbar__item"><div class="tabbar__svg"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><!-- 裁切路径 --><clipPath id="clipPath2"> <path id="explore-clip-path" d="M0 14.5714C0 7.62842 5.60617 2 12.5217 2H35.4783C42.3938 2 48 7.62842 48 14.5714V33.4286C48 40.3716 42.3938 46 35.4783 46H12.5217C5.60617 46 0 40.3716 0 33.4286V14.5714Z" fill="#C4C4C4"/></clipPath><!-- 组,图标路的元素集合 --><g clip-path="url(#clipPath2)"> <!-- 探索-边框路径 --><path id="explore-border" d="M0 14.5714C0 7.62842 5.60617 2 12.5217 2H35.4783C42.3938 2 48 7.62842 48 14.5714V33.4286C48 40.3716 42.3938 46 35.4783 46H12.5217C5.60617 46 0 40.3716 0 33.4286V14.5714Z" stroke="#B1BACD" stroke-width="8"/><!-- 闪屏元素 --><use class="transition_move1" href="#transition_move1"></use><use class="transition_move2" href="#transition_move2"></use><use class="transition_move3" href="#transition_move3"></use><!-- 探索-箭头 --><path id="explore-arrow" d="M19.4845 19.2494C19.4845 18.4796 20.3178 17.9984 20.9845 18.3833L30.1441 23.6717C30.8108 24.0566 30.8108 25.0188 30.1441 25.4037L20.9845 30.692C20.3178 31.0769 19.4845 30.5958 19.4845 29.826V19.2494Z" stroke="#B1BACD" stroke-width="4" stroke-linejoin="round"/></g></svg></div><div class="tabbar__name">探索</div></div> <!-- 尬聊 --><div class="tabbar__item"><div class="tabbar__svg"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><!-- 裁切路径 --><clipPath id="clipPath3"><path id="chat-clip-path" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 30.5467 2.62123 36.4811 6.87143 40.8111L4.74164 44.5C3.97184 45.8333 4.93408 47.5 6.47369 47.5L23.5 48C23.5 48 23.5035 47.9983 23.5102 47.9951C23.673 47.9984 23.8363 48 24 48Z" fill="#C4C4C4"/></clipPath><!-- 组,图标路的元素集合 --><g clip-path="url(#clipPath3)"><!-- 尬聊-边框路径 --><path id="chat-border" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 30.5467 2.62123 36.4811 6.87143 40.8111L4.74164 44.5C3.97184 45.8333 4.93408 47.5 6.47369 47.5L23.5 48C23.5 48 23.5035 47.9983 23.5102 47.9951C23.673 47.9984 23.8363 48 24 48Z" stroke="#B1BACD" stroke-width="8" stroke-linejoin="round"/><!-- 闪屏元素 --><use class="transition_move1" href="#transition_move1"></use><use class="transition_move2" href="#transition_move2"></use><use class="transition_move3" href="#transition_move3"></use> <!-- 尬聊-三个小圆 --><circle id="chat-circle1" cx="13" cy="24" r="3" fill="#B1BACD"/><circle id="chat-circle2" cx="25" cy="24" r="3" fill="#B1BACD"/><circle id="chat-circle3" cx="37" cy="24" r="3" fill="#B1BACD"/></g></svg></div><div class="tabbar__name">尬聊</div></div> <!-- 我的 --><div class="tabbar__item"><div class="tabbar__svg"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><!-- 裁切路径 --><clipPath id="clipPath4"> <path id="me-clip-path" d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z" fill="#C4C4C4"/></clipPath><!-- 组,图标路的元素集合 --><g clip-path="url(#clipPath4)"> <path id="me-border" d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z" stroke="#AFB8CC" stroke-width="8"/> <!-- 闪屏元素 --><use class="transition_move1" href="#transition_move1"></use><use class="transition_move2" href="#transition_move2"></use><use class="transition_move3" href="#transition_move3"></use> <!-- 我的-线 --><path id="me-line" d="M14 30C20.5 35.5 21 30 24 30C26.5008 30 26.5 35.5 34 30" stroke="#AFB8CC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g></svg></div><div class="tabbar__name">我的</div></div>复制代码
获取中间的路径长度
let homeCirclePath = document.querySelector('#home-circle')let exploreArrowPath = document.querySelector('#explore-arrow')let meLinePath = document.querySelector('#me-line')console.log(homeCirclePath.getTotalLength()); // 43.9885console.log(exploreArrowPath.getTotalLength()); // 38.0181console.log(meLinePath.getTotalLength()); // 22.7404 复制代码
keyframs的@minxi
首页、探索、我的三个图标内部的图形都是路径动画,并且效果一致,我们可以封装一个@minxi,直接调用生成关键帧:
/** * 生成路径动画 * @params {string} $name 关键帧名字 * @params {string} $length 路径长度 * @params {string} $startColor 开始动画路径的颜色 * @params {string} $endColor 结束动画路径的颜色 */@mixin pathKeyframes($name,$length,$startColor:#B1BACD,$endColor:#ffffff) { @keyframes #{$name}{ 0%{ stroke:$startColor; stroke-dashoffset:0; } 50%{ stroke:$startColor; stroke-dashoffset:$length; } 50.1%{ stroke:$endColor; stroke-dashoffset:$length*-1; } 100%{ stroke:$endColor; stroke-dashoffset:0; } } }// 生成首页图标的小圆路径动画@include pathKeyframes(home-circle,44);// 生成探索图标的箭头路径动画@include pathKeyframes(explore-arrow,39);// 生成我的图标的中间线路径动画@include pathKeyframes(me-line,23);复制代码
给图标加上虚线和偏移值默认值为0,再给选中状态下,添加animation动画。
.tabbar{// ...#home-circle{ stroke-dasharray:44 44; stroke-dashoffset:0; } #explore-arrow{ stroke-dasharray:39 39; stroke-dashoffset:0; } #me-line{ stroke-dasharray:23 23; stroke-dashoffset:0; } .on{ // ...#home-circle{ animation: home-circle 1s ease forwards; } #explore-arrow{ animation: explore-arrow 1s ease forwards; } #home-circle{ animation: me-line 1s ease forwards; } } }复制代码
点击图标切换动画
动画我们已经添加好了,现在我们来进行点击图标进行动画的切换显示。
点击图标,先清除选中状态.on,再给点击的图标加上.on,这样我们就可以实现点击切换动画了。
let tabbarItem = document.querySelectorAll('.tabbar__item') tabbarItem.forEach(item=>{ item.addEventListener('click',function(){ tabbarItem.forEach(item=>{ item.classList.remove('on') }) this.classList.add('on') }) })复制代码
尬聊中间小圆动画
尬聊中间的小圆动画跟其他图标里的效果不一样,需要单独进行处理。
中间小圆先缩小隐藏再显示并上下移动:
.tabbar{ // 先设置小圆的基点位置,基点就是小圆的中心坐标。#chat-circle1{ transform-origin: 13px 24px; } #chat-circle2{ transform-origin: 25px 24px; } #chat-circle3{ transform-origin: 37px 24px; } .on{ // ...// 使用持续1s的animation动画,让⚪开始运动,增加延迟时间,让⚪有错落感,并且让动画停留再结束位置#chat-circle1{ animation: chat-circle 1s ease forwards; } #chat-circle2{ animation: chat-circle 1s .15S ease forwards; } #chat-circle3{ animation: chat-circle 1s .3S ease forwards; } // ... } }// 设置小圆的关键帧,0-50% 先缩小,50.1-100% 先显示出来,再上下移动@keyframes chat-circle{ 0%{ fill:#B1BACD; transform: scale(1); } 50%{ fill:#B1BACD; transform: scale(0); } 50.1%{ fill:#ffffff; transform: scale(1) translateY(0); } 60%{ fill:#ffffff; transform: scale(1) translateY(-10px); } 85%{ fill:#ffffff; transform: scale(1) translateY(10px); } 100%{ fill:#ffffff; transform: scale(1) translateY(0); } }复制代码
一个简单tabbar动画就完成了。通过这个简单的实例可以看到,UI制作好svg文件后,使用svg +css3实现动画效果是非常的快速简单的。demo链接
最后
如果喜欢tabbar动画,可以参考 ui动效,本示例也是参考其中一个进行的制作。