hookehuyr

perf(animation): 优化贝塞尔曲线动画的流畅性

通过增加动画时长、添加 will-change 属性和 transform 属性,以及调整 stroke-dashoffset 值,提升动画的流畅性和性能
<!--
* @Date: 2025-03-28 09:23:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-28 21:59:13
* @LastEditTime: 2025-03-28 23:33:13
* @FilePath: /mlaj/src/views/animation.vue
* @Description: 贝塞尔曲线动画路径组件
*
......@@ -410,12 +410,17 @@ const svgViewBox = computed(() => {
}
.active-path-animation {
animation: dash 1.5s linear infinite;
animation: dash 3.5s linear infinite;
will-change: stroke-dashoffset;
transform: translateZ(0);
}
@keyframes dash {
from {
stroke-dashoffset: 6rem;
}
to {
stroke-dashoffset: -1.25rem;
stroke-dashoffset: 0;
}
}
......