曲线矩形遵循路径更新

如何解决曲线矩形遵循路径更新

使用div，形状或svgs可以使项目弯曲以遵循路径的曲线。

这只是一个例子，但是想象一下矩形在边缘弯曲，现在只是从一帧到另一帧旋转了90度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">      <title>frame</title><style>
        main {
          width: 100vw;height: 100vh;position: absolute;
        }
        div {
          display: none;position: absolute;will-change: offset-distance;width: 200px;
          height: 40px;background: hsl(313,100%,50%);offset-anchor: top;
          offset-rotate: auto;offset-path: path('M 0 0 L 600 0 L 600 400 L 0 400 L 0 0'); 
        }
        
        div:nth-of-type(4n+2) {background: hsl(343,50%)}
        div:nth-of-type(4n+3) {background: hsl(13,50%)}
        div:nth-of-type(4n+4) {background: rgb(37,16,226)}
        body {margin: 0;padding: 0;}            
        svg,aside {    display: none;}
        div {    display: block;    }
        * {box-sizing: border-box;}         
        
        </style>
</head>    <body>    <main><div></div>      <div></div>     <div></div>     <div></div>     <div></div><div></div>    </main>
<script>
    var rateRange = document.getElementById('playback-rate');
    var shapers = [].slice.call(document.querySelectorAll('div'));
    var DURATION = 200000;
    var animations = [];

    shapers.forEach(function(s,i) {
        var animation = s.animate([
        {offsetDistance: 0},{offsetDistance: '100%'}
        ],{
            duration: DURATION,delay: -i / shapers.length * DURATION,iterations: Infinity
        });
        animations.push(animation);
    });
</script>
</body>
</html>

解决方法

这是svg解决方案。我正在使用4条重叠的路径，其中stroke-dasharray是这样的：stroke-dasharray: 2 2 2 2 2 2 2 2 2 242如果您将破折号和间隙相加，则总数为260。

也stroke-linecap: round，当两个破折号非常靠近另一个破折号stroke-linecap: round时，使它们重叠，从而使连续的线条看起来很明显。

路径的总长度也是260。我正在为路径的stroke.dashoffset属性设置动画。

path {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 2 2 2 2 2 2 2 2 2 242;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -260;
  }
}

<svg viewBox="0 0 100 70" >

  <path id="pth" stroke="red" d="M10,10L90,60L10,60z" />

  <path stroke="blue" d="M70,10z" />

  <path stroke="green" d="M90,10z" />

  <path stroke="orange" d="M30,60z" />

</svg>

更新

为了避免拐角处的闪烁，我将矩形路径更改为带有圆角的路径。 T弄清楚我的意思是，我要添加一条额外的路径：#track。

path {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 2 2 2 2 2 2 2 2 2 225;
  animation: dash 5s linear infinite;
}

#track {
  stroke-width: 1;
  stroke-dasharray: 245 0;
}

@keyframes dash {
  to {
    stroke-dashoffset: -245;
  }
}

svg {
  width: 300px;
}

<svg viewBox="0 0 100 70">

  <path id="pth" stroke="red" d="M27.000,10.000 Q37,10 47.000,10.000L80.000,10.000 Q90,10 90.000,20.000L90.000,50.000 Q90,60 80.000,60.000L20.000,60.000 Q10,60 10.000,50.000L10.000,20.000 Q10,10 20.000,10.000Z" />

  <path stroke="blue" d="M90.000,27.000 Q90,37 90.000,47.000L90.000,20.000Z" />


  <path stroke="green" d="M73.000,60.000 Q63,60 53.000,60.000Z" />

  <path stroke="orange" d="M10.000,45.000 Q10,35 10.000,25.000L10.000,50.000Z" />
  
  
  <path id="track" d="M90.000,20.000Z" stroke="black" />

</svg>

曲线矩形遵循路径 更新

如何解决曲线矩形遵循路径 更新

解决方法

更新

相关推荐

曲线矩形遵循路径更新

如何解决曲线矩形遵循路径更新