perf(animation): 优化贝塞尔曲线动画的流畅性
通过增加动画时长、添加 will-change 属性和 transform 属性,以及调整 stroke-dashoffset 值,提升动画的流畅性和性能
Showing
1 changed file
with
8 additions
and
3 deletions
| 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 | ... | ... |
-
Please register or login to post a comment