Vue3 结合 SVG 的 Path 标签封装一个带有动画效果高亮菜单的组件
站长
· 阅读数 44
·目前我们所使用的
APP大多数在菜单进行切换的时候都会有一个非常优雅的动画效果，那么这个效果在H5应该如何实现呢？
之前在学习 SVG 的时候了解到 Path 标签可以结合 stroke-dasharray 和 stroke-dashoffset 属性做一些路径的动画，所以就按照这个思路来实现菜单的高亮动画。
先来看一看效果图
了解 stroke-dasharray 和 stroke-dashoffset
stroke-dasharray：用于创建虚线，之所以后面跟的是array的，是因为值其实是数组。请看下面解释
stroke-dasharray = '10'
stroke-dasharray = '10, 5'
stroke-dasharray = '20, 10, 5'
stroke-dasharray 为一个参数时：其实是表示虚线长度和每段虚线之间的间距
如：stroke-dasharray = '10' 表示：虚线长 10，间距 10，然后重复 虚线长 10，间距 10
两个参数或者多个参数时：一个表示长度，一个表示间距
如：stroke-dasharray = '10, 5' 表示：虚线长10，间距5，然后重复 虚线长10，间距5
如：stroke-dasharray = '20, 10, 5' 表示：虚线长 20，间距 10，虚线长 5，接着是间距 20，虚线 10，间距 5， 之后开始如此循环
stroke-dashoffset： offset：偏移的意思。
这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
需要注意的是，不管偏移的方向是哪边，要记得 dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
这个属性要搭配 stroke-dashoffset 才能看得出来效果，非虚线的话，是无法看出偏移的。
了解 getTotalLength
getTotalLength 这个函数可以专门为我们获取 svg 标签的的所有长度，只有我们获取到 path 的所有长度才能对其做 stroke-dasharray 和 stroke-dashoffset 属性的变化。
组件封装
Template
<template>
<div class="custom-tab-bar">
<div class="tab-bar-group">
<div
v-for="(item, index) in tabList"
:key="index"
class="tab-bar-group-item"
:class="{ 'tab-bar-group-item-active': selectTabIndex === index }"
@click="handleClickTab($event, item, index)">
<span class="item__icon">
<svg :width="iconSize" :height="iconSize" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
v-for="(itemName, idx) in item.iconPaths"
:key="idx"
:d="itemName"
:stroke-width="strokeWidth"
fill="none"
stroke-linecap="round"
stroke-linejoin="round" />
<circle
v-if="selectTabIndex === index"
class="point"
cx="42"
cy="16"
:fill="selectColor"></circle>
</svg>
</span>
<p class="item__title">{{ item.name }}</p>
</div>
</div>
</div>
</template>
Js
import { ref, type PropType } from 'vue'
interface TabBar {
name: string
iconPaths: string[]
}
const emits = defineEmits(['click'])
const props = defineProps({
tabList: {
type: Array as PropType<TabBar[]>,
default: () => []
},
defaultSelectIndex: Number,
color: {
type: String,
default: '#4c4c4c'
},
selectColor: {
type: String,
default: '#FB7800'
},
iconSize: {
type: Number,
default: 22
},
strokeWidth: {
type: Number as PropType<2 | 3 | 4>,
default: 3
}
})
const selectTabIndex = ref(props.defaultSelectIndex)
function handleClickTab (event: Event, tabItem: TabBar, index: number) {
if (index === selectTabIndex.value) return
const target = event.currentTarget as Element
const paths = target.querySelectorAll('path')
paths.forEach((path: SVGPathElement) => {
const totalLength = path.getTotalLength()
path.style.setProperty('--tl', `${totalLength}px`)
})
selectTabIndex.value = index
emits('click', tabItem)
}
CSS
.custom-tab-bar {
width: 100%;
.tab-bar-group {
width: 100%;
border-radius: 12px;
display: flex;
height: 68px;
align-items: center;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(5px);
box-shadow: 0 2px 12px 2px rgba(0,0,0,0.05);
&-item {
flex: 1;
justify-content: center;
cursor: pointer;
user-select: none;
.item__title {
color: v-bind(color);
margin-top: 4px;
font-size: 14px;
text-align: center;
transition: 0.3s;
}
.item__icon {
display: flex;
justify-content: center;
path {
stroke: v-bind(color);
transition: 0.3s;
}
}
&-active {
.item__title {
color: v-bind(selectColor);
}
.item__icon {
path {
stroke-dasharray: var(--tl);
stroke-dashoffset: var(--tl);
stroke: v-bind(selectColor);
animation: stroke 0.5s ease-in-out forwards;
}
.point {
animation: size 0.3s ease-in forwards;
animation-delay: 0.5s;
}
}
@keyframes stroke {
to {
stroke-dashoffset: 0;
}
}
@keyframes size {
0% {
r: 0
}
10% {
r: 1
}
20% {
r: 2
}
40% {
r: 4
}
60% {
r: 8
}
80% {
r: 6
}
90% {
r: 8
}
100% {
r: 6
}
}
}
}
}
}
如何使用
<template>
<div class="demo-page">
<div class="fix-tab-bar">
<TabBar
:tabList="tabList"
:defaultSelectIndex="0"
:iconSize="22"
color="#333"
:strokeWidth="3"
selectColor="#ED5672" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import TabBar from '@/components/TabBar.vue'
const tabList = ref([
{
name: '商店',
iconPaths: [
'M40.0391 22V42H8.03906V22',
'M5.84231 13.7766C4.31276 17.7377 7.26307 22 11.5092 22C14.8229 22 17.5276 19.3137 17.5276 16C17.5276 19.3137 20.2139 22 23.5276 22H24.546C27.8597 22 30.546 19.3137 30.546 16C30.546 19.3137 33.2518 22 36.5655 22C40.8139 22 43.767 17.7352 42.2362 13.7723L39.2337 6H8.84523L5.84231 13.7766Z'
]
},
{
name: '文库',
iconPaths: [
'M5 6H39C39 6 43 8 43 13C43 18 39 20 39 20H5C5 20 9 18 9 13C9 8 5 6 5 6Z',
'M43 28H9C9 28 5 30 5 35C5 40 9 42 9 42H43C43 42 39 40 39 35C39 30 43 28 43 28Z'
]
},
{
name: '会员',
iconPaths: [
'M24 42L4 18.5L9.69488 6L38.3051 6L44 18.5L24 42Z',
'M32 18L24 27L16 18'
]
},
{
name: '地图',
iconPaths: [
'M17 12L4 6V36L17 42L31 36L44 42V12L31 6L17 12Z',
'M31 6V36',
'M17 12V42',
'M10.5 9L17 12L31 6L37.5 9',
'M10.5 39L17 42L31 36L37.5 39'
]
},
{
name: '用户中心',
iconPaths: [
'M5.00372 42.2311C5.00372 42.6557 5.35807 42.9999 5.79521 42.9999L42.2023 43C42.6394 43 42.9938 42.6558 42.9938 42.2313V41.3131C43.012 41.0364 43.049 39.6555 42.1388 38.1289C41.5648 37.1663 40.7318 36.3347 39.6628 35.6573C38.3696 34.8378 36.7245 34.244 34.7347 33.8865C34.72 33.8846 33.2446 33.689 31.7331 33.303C29.101 32.6307 28.8709 32.0357 28.8694 32.0299C28.8539 31.9711 28.8315 31.9146 28.8028 31.8615C28.7813 31.7505 28.7281 31.3328 28.8298 30.2136C29.088 27.371 30.6128 25.691 31.838 24.3412C32.2244 23.9155 32.5893 23.5134 32.8704 23.1191C34.0827 21.4181 34.1952 19.4839 34.2003 19.364C34.2003 19.1211 34.1724 18.9214 34.1127 18.7363C33.9937 18.3659 33.7698 18.1351 33.6063 17.9666L33.6052 17.9654C33.564 17.923 33.5251 17.8828 33.4933 17.8459C33.4812 17.8318 33.449 17.7945 33.4783 17.603C33.5859 16.8981 33.6505 16.3079 33.6815 15.7456C33.7367 14.7438 33.7798 13.2456 33.5214 11.7875C33.4895 11.5385 33.4347 11.2755 33.3494 10.9622C33.0764 9.95814 32.6378 9.09971 32.0284 8.39124C31.9236 8.27722 29.3756 5.5928 21.9788 5.04201C20.956 4.96586 19.9449 5.00688 18.9496 5.05775C18.7097 5.06961 18.3812 5.08589 18.0738 5.16554C17.3101 5.36337 17.1063 5.84743 17.0528 6.11834C16.9641 6.56708 17.12 6.91615 17.2231 7.14718L17.2231 7.1472L17.2231 7.14723C17.2381 7.18072 17.2566 7.22213 17.2243 7.32997C17.0526 7.59588 16.7825 7.83561 16.5071 8.06273C16.4275 8.13038 14.5727 9.72968 14.4707 11.8189C14.1957 13.4078 14.2165 15.8834 14.5417 17.5944C14.5606 17.6889 14.5885 17.8288 14.5432 17.9233L14.5432 17.9233C14.1935 18.2367 13.7971 18.5919 13.7981 19.4024C13.8023 19.4839 13.9148 21.4181 15.1272 23.1191C15.408 23.5131 15.7726 23.9149 16.1587 24.3403L16.1596 24.3412L16.1596 24.3413C17.3848 25.6911 18.9095 27.371 19.1678 30.2135C19.2694 31.3327 19.2162 31.7505 19.1947 31.8614C19.166 31.9145 19.1436 31.971 19.1282 32.0298C19.1266 32.0356 18.8974 32.6287 16.2772 33.2996C14.7656 33.6867 13.2775 33.8845 13.2331 33.8909C11.2994 34.2173 9.66438 34.7963 8.37351 35.6115C7.30813 36.2844 6.47354 37.1175 5.89289 38.0877C4.96517 39.6379 4.99025 41.0497 5.00372 41.3074V42.2311Z'
]
}
])
</script>
转载自:https://juejin.cn/post/7355525978595622964