如何使用 css 或 javascript 将复杂形状重塑为另一种形状？答案

【问题标题】：How can I reshape a complex shape to another shape using css or javascript?如何使用 css 或 javascript 将复杂形状重塑为另一种形状？
【发布时间】：2021-05-24 05:22:28
【问题描述】：

例如，我有一个这样的形状：

并希望将其重新塑造成这样的东西（以动画的形式）：

如何创建这些形状并在之后使用 HTML、CSS、javascript 或 jquery 进行重塑？

注意。

【问题讨论】：

当您想将第一张图片更改为第二张图片时。？
请阅读How SVG Shape Morphing Works
例如点击后
您可以尝试如何制作具有外边界半径的形状：itnext.io/…。一旦你确定了你，只需使用 jQuery 的点击功能来启用过渡。
您希望这是一个 SVG 吗？还是你不在乎它是怎么做的？

标签： html jquery css svg

【解决方案1】：

使用computePath函数：

const computePath = (widthTop, widthBottom, heightTop, heightBottom, radius) => {
  let path = `M ${radius},0 
    H ${widthTop-radius} 
    Q ${widthTop},0 ${widthTop},${radius} 
    V ${heightTop-radius}`;
    
  if (widthTop === widthBottom)
    path += `Q ${widthTop},${heightTop} ${widthTop},${heightTop} 
    H ${widthBottom-radius} 
    Q ${widthBottom},${heightTop} ${widthBottom},${heightTop}`;
  else
    path += `Q ${widthTop},${heightTop} ${widthTop + radius},${heightTop} 
    H ${widthBottom-radius} 
    Q ${widthBottom},${heightTop} ${widthBottom},${heightTop+radius}`; 
      
  path += `
  V ${heightTop + heightBottom - radius}
  Q ${widthBottom},${heightTop + heightBottom} ${widthBottom-radius},${heightTop + heightBottom} 
    H ${radius}
    Q 0,${heightTop + heightBottom} 0 ${heightTop + heightBottom - radius}
    V ${radius}
    Q 0,0 ${radius},0
    Z`;
    
  return path;  
}

d3.select('path')
  .attr('transform', 'translate(50, 20)')
  .attr('d', computePath(200,200, 40, 0, 10))
  .transition()
  .delay(500)
  .duration(1000)
  .attr('d', computePath(200,300, 100, 40, 10))

path {
  stroke: none;
  fill: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="300">
  <path/>
</svg>

【讨论】：

【解决方案2】：

不是完全相同的形状，它缺少内角的半径，但它几乎是纯 HTML 和 CSS...

document.getElementById("shape").addEventListener("click", evt => {
   evt.target.classList.toggle("open");
});

#shape {
  width: 600px;
  height: 60px;
  position: relative;
  transition: all 1s;
}

#shape::before {
  content: '';
  display: block;
  position: absolute;
  width: 400px;
  height: 60px;
  background-color: #eee;
  border-radius: 18px;
  transition: all 1s;
}

#shape::after {
  content: '';
  display: block;
  position: absolute;
  width: 400px;
  height: 60px;
  bottom: 0;
  background-color: #eee;
  border-radius: 18px;
  transition: all 1s;
}


#shape.open {
  height: 200px;
}

#shape.open::before {
  width: 300px;
  height: 200px;
}

#shape.open::after {
  width: 600px;
}

&lt;div id="shape"&gt;&lt;/div&gt;

【讨论】：