React中如何裁剪正方形实现边框追逐动画效果？

我在React.js应用中想要为一个圆角矩形实现两个边框沿周长相互追逐的动画效果，要求两个边框始终处于相对位置、不会追上彼此，最终呈现霓虹黄色的霓虹效果。但目前实现的边框在沿形状移动时会出现断裂，达不到预期效果。

效果对比 #

• 当前效果：
  
  
• 预期效果：
  

现有代码 #

import styled from 'styled-components';
import { motion } from 'framer-motion';

const chasingBorders1 = keyframes`
  0% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
  25% {
    clip-path: polygon(100% 60%, 100% 100%, 60% 60%, 100% 40%);
  }
  50% {
    clip-path: polygon(0% 100%, 40% 100%, 0% 60%, 40% 60%);
  }
  75% {
    clip-path: polygon(0% 0%, 0% 40%, 40% 0%, 40% 40%);
  }
  100% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
`;

const chasingBorders2 = keyframes`
  0% {
    clip-path: polygon(0% 100%, 0% 60%, 40% 100%, 0% 100%);
  }
  25% {
    clip-path: polygon(0% 0%, 0% 40%, 40% 0%, 40% 40%);
  }
  50% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
  75% {
    clip-path: polygon(100% 60%, 100% 100%, 60% 60%, 100% 40%);
  }
  100% {
    clip-path: polygon(0% 100%, 0% 60%, 40% 100%, 0% 100%);
  }
`;

const ModeBox = styled(motion.div)`
  position: absolute;
  top: 45px;
  left: 33.5%;
  background: #020202;
  border: solid 5px white;
  border-radius: 30px;
  width: 580px;
  height: 100px;
  z-index: 95;

  &::before, &::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: solid 8px orange;
    border-radius: inherit;
    z-index: -1;
    box-shadow: 0 0 10px #6F5824, 0 0 15px #6F5824, 0 0 20px #6F5824;
  }

  &::before {
    animation: ${chasingBorders1} 4s infinite;
  }

  &::after {
    animation: ${chasingBorders2} 4s infinite;
  }
`;

问题根源 #

现有clip-path关键帧定义的多边形片段在过渡时没有保持连续的线段形态，导致动画切换时边框出现断裂。同时，两个动画的关键帧没有对齐相对位置的逻辑，容易出现重叠或追逐错位。

修复后的代码 #

import styled from 'styled-components';
import { motion } from 'framer-motion';

const chaseBorder = keyframes`
  0% {
    clip-path: polygon(100% 0, 100% 40%, 60% 0, 60% 0, 100% 0);
  }
  25% {
    clip-path: polygon(100% 60%, 100% 100%, 60% 100%, 60% 60%, 100% 60%);
  }
  50% {
    clip-path: polygon(0 100%, 0 60%, 40% 100%, 40% 60%, 0 100%);
  }
  75% {
    clip-path: polygon(0 0, 0 40%, 40% 0, 40% 40%, 0 0);
  }
  100% {
    clip-path: polygon(100% 0, 100% 40%, 60% 0, 60% 0, 100% 0);
  }
`;

const ModeBox = styled(motion.div)`
  position: absolute;
  top: 45px;
  left: 33.5%;
  background: #020202;
  border: solid 5px white;
  border-radius: 30px;
  width: 580px;
  height: 100px;
  z-index: 95;

  &::before, &::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: solid 8px #ffd700;
    border-radius: inherit;
    z-index: -1;
    box-shadow: 0 0 10px #ffd700, 0 0 15px #ffd700, 0 0 20px #ffd700;
    animation: ${chaseBorder} 4s linear infinite;
  }

  // 让第二个边框延迟50%动画时长，始终处于相对位置
  &::after {
    animation-delay: -2s;
  }
`;

优化说明 #

1. 统一动画关键帧：只用一套keyframes，通过animation-delay让第二个边框从动画的50%位置启动，确保两者始终处于相对位置，不会追上。
2. 修复clip-path连续性：调整多边形点的定义，让每个阶段的边框片段都是连续的矩形边部分，过渡时不会出现断裂。
3. 匹配霓虹黄色效果：将边框颜色和阴影替换为#ffd700（标准霓虹黄），还原预期视觉效果。

内容的提问来源于stack exchange，提问作者Angel Hadzhiev