hookehuyr

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

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