svg+css3 实现tabbar 动效

大家好，今天给大家分享下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+css3 实现tabbar 动效

<!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 动效

创建闪屏元素

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

svg+css3 实现tabbar 动效

所以我们先在中心位置 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 动效

这时三个圆重叠在一起，我们通过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 动效

中间小圆路径消失动画

路径动画关键在于属性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;
    }
}

svg+css3 实现tabbar 动效

闪屏动画

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

.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 动效

中间小圆路径显示动画

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

我们更改下@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 动效

将文字改为蓝色

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

.tabbar{
	.on{
        .tabbar__name{
			color: #698AFF;
		}
		
	}
}

svg+css3 实现tabbar 动效

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

图标绘制

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

我们打开这三个的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 动效

获取中间的路径长度

let homeCirclePath = document.querySelector('#home-circle')
let exploreArrowPath = document.querySelector('#explore-arrow')
let meLinePath = document.querySelector('#me-line')
console.log(homeCirclePath.getTotalLength()); // 43.9885
console.log(exploreArrowPath.getTotalLength()); // 38.0181
console.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{
	// 先设置小圆的基点位置，基点就是小圆的中心坐标。
	#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动画就完成了。通过这个简单的实例可以看到，UI制作好svg文件后，使用svg +css3实现动画效果是非常的快速简单的。 demo链接

最后

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

动效分析

tabbar 图标绘制

tabbar的基本布局

首页图标的绘制

创建svg

创建裁切路径

添加图标里的元素内容

创建闪屏元素

图标心跳动画

中间小圆路径消失动画

闪屏动画

中间小圆路径显示动画

将文字改为蓝色

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

图标绘制

获取中间的路径长度

keyframs的@minxi

点击图标切换动画

尬聊中间小圆动画

最后

常见问题FAQ

掘金(慕枫--) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

动效分析

tabbar 图标绘制

tabbar的基本布局

首页图标的绘制

创建svg

创建裁切路径

添加图标里的元素内容

创建闪屏元素

图标心跳动画

中间小圆路径消失动画

闪屏动画

中间小圆路径显示动画

将文字改为蓝色

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

图标绘制

获取中间的路径长度

keyframs的@minxi

点击图标切换动画

尬聊中间小圆动画

最后

常见问题FAQ

掘金(慕枫--) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式