如何使 css 剪辑路径多边形过渡平滑？

Question

我有一个三角形，我想将其平滑地变形为不同的形状。

我使用简单的剪辑路径来执行此操作。我从元素上的剪辑路径开始，然后切换一个可以更改剪辑路径的类。这一切都非常简单。

剪辑路径发生了变化，但变化很剧烈。我想要一个平稳的过渡。有任何想法吗？

   $('button').click(function(){
  $('.shape').toggleClass('medium');
})

.wrapper{
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
}

  .shape{
    height: 200px;
    width: 200px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: black;
    position: initial;
    transition: clip-path 2s ease-in-out;
}

.shape.medium{
            clip-path: polygon(50% 1%, 63% 20%, 86% 15%, 81% 38%, 100% 50%, 81% 63%, 86% 86%, 63% 81%, 50% 100%, 37% 81%, 14% 86%, 19% 63%, 0% 50%, 19% 38%, 14% 15%, 37% 20%);
            transition: clip-path 2s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="button">
     <button>testing</button
  </div>
  <div class="shape"></div>
</div>

Answer 1

为了获得平滑过渡，形状必须具有相同数量的点。

我们可以给三角形 16 个点来对应第二个形状中的 16 个点。

叠加这两个形状我们得到：

当然，有很多方法可以将点映射到三角形的边上，您必须决定您想要的过渡是什么样子并算出（需要一点三角学知识！）线 AB 上的点， BC, CA 您想要点 1,2, 3.... 对应。

该代码片段采取了一种懒惰的方式，将点 1-4 映射到三角形的顶部，点 5-7 映射到右下角，点 8-10 映射到中心底部，其他点相应地映射到左侧。

$('button').click(function() {
  $('.shape').toggleClass('medium');
})

.wrapper {
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
}

.shape {
  height: 200px;
  width: 200px;
  clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%, 0 100%, 0 100%, 50% 0, 50% 0, 50% 0);
  background: black;
  position: initial;
  transition: clip-path 2s ease-in-out;
}

.shape.medium {
  clip-path: polygon(50% 1%, 63% 20%, 86% 15%, 81% 38%, 100% 50%, 81% 63%, 86% 86%, 63% 81%, 50% 100%, 37% 81%, 14% 86%, 19% 63%, 0% 50%, 19% 38%, 14% 15%, 37% 20%);
  transition: clip-path 2s ease-in-out;
}

</style><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrapper"><div id="button"><button>testing</button

</div>
<div class="shape"></div>
</div>