大家好,今天给大家分享下svg如何实现一个简单的tabbar动效,并适配移动端平台。 demo链接

svg+css3 实现tabbar 动效_tabbar

动效分析

我们先来分析一下如图tabbar的元素动一动的过程:

  • 动画开始阶段:整个图标进行类似心跳效果的抖动,并且内部小图标进行消失
  • 动画运行到中间:图标内部有三层颜色的闪屏效果,运动结束并停止到最后一层
  • 动画最后阶段:尬聊图标中间小圆跳动显示,其他三个内部小图标变成白色并进行线条移动显示。

tabbar 图标绘制

动画分析后,我们先来进行准备工作,由于这个动效没有原始文件,所以我们还需自己在软件上进行48x48大小的图标绘制导出,或者自己用代码就行绘制。

一般设计师都会提供源文件,所以我就不进行图标绘制的教程了。

这是我通过figma绘制的图标svg文件及源码: 链接: pan.baidu.com/s/1K8lK-c7P… 提取码: m2wn

tabbar的基本布局

页面采用rem布局,使用flexible.js进行适配,我们先来写一个不带动画的tabbar,tababr整体高度100px,图标宽高48px,文字20px。svg+css3 实现tabbar 动效_svg+css3 _02

<!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:

svg+css3 实现tabbar 动效_tabbar_03

创建闪屏元素

闪屏元素这里我们实际上用的三个线性渐变圆形,从左下方移动到中间,通过延迟时间运动来达到闪屏的效果。

svg+css3 实现tabbar 动效_svg+css3 _04svg+css3 实现tabbar 动效_svg+css3 _05

所以我们先在中心位置 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>复制代码

svg+css3 实现tabbar 动效_tabbar_06

这时三个圆重叠在一起,我们通过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);}
}复制代码

svg+css3 实现tabbar 动效_svg+css3 _07

中间小圆路径消失动画

路径动画关键在于属性stroke-dasharray 和 stroke-offset。

  1. stroke-dasharray: 用于创建虚线 ;
  2. 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;
    }
}复制代码

svg+css3 实现tabbar 动效_svg+css3 _08

闪屏动画

将三个闪屏元素从左下方移动到中间,通过延迟时间运动来达到闪屏的效果。

.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);
	}
}复制代码

svg+css3 实现tabbar 动效_tabbar_09

中间小圆路径显示动画

闪屏动画过后,中间小圆变为白色,并且根据小圆的路径进行显示

我们更改下@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;
	}
}复制代码

svg+css3 实现tabbar 动效_svg+css3 _10

将文字改为蓝色

当.on选中得时候,我们要将文字更改为蓝色

.tabbar{	.on{.tabbar__name{			color: #698AFF;
		}
		
	}
}复制代码

svg+css3 实现tabbar 动效_svg+css3 _11

探索、尬聊,我的图标绘制

图标绘制

探索、尬聊,我的图标绘制同首页图标绘制步骤是一样的。

我们打开这三个的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>复制代码

svg+css3 实现tabbar 动效_svg+css3 _12

获取中间的路径长度

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')
    })
})复制代码

svg+css3 实现tabbar 动效_tabbar_13

尬聊中间小圆动画

尬聊中间的小圆动画跟其他图标里的效果不一样,需要单独进行处理。

中间小圆先缩小隐藏再显示并上下移动:

.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);
		}
}复制代码

svg+css3 实现tabbar 动效_tabbar_14

一个简单tabbar动画就完成了。通过这个简单的实例可以看到,UI制作好svg文件后,使用svg +css3实现动画效果是非常的快速简单的。demo链接

最后

如果喜欢tabbar动画,可以参考 ui动效,本示例也是参考其中一个进行的制作。