SVG线条动画 - Squishy效果

Question

***更新 - 下面列出的解决方案

我有一个svg动画错误我可以使用一些专家帮助。

我正在尝试制作一个类似的动画，你可以在这里看到它（http://springsummer.dk/），当你将它们悬停在他们的一些作品上（可能是页面的一半） - 一条线进来然后再善良squhes到正确的高度。

我在一个简单的代码笔中重新创建了这个效果，可以在这里看到：https://codepen.io/callmegoon/pen/EQRMjG（参见下面的代码）。

然而，在我的测试中，我开始了解Safari不支持我在动画中使用的负冲程 - dashoffset。

Soooo，我正在试图找出一个新的解决方案 - 任何想法？完全不同的方式完成这个（也许是一个js解决方案？），但我正在做的一切都没有工作。我最大的问题是最后一端的挤压部分，这条线的后部/底部出现了 - 我还没有找到另一种方法来实现这一目标而没有负面的冲程 - 差距。

谢谢！

/* Draw Line Animations */
  @keyframes drawLine {
    0% {
      stroke-dasharray: 170;
      stroke-dashoffset: 170;
    }
    
    100% {
      stroke-dasharray: 170;
      stroke-dashoffset: -50;
    }
  }

  @keyframes unDrawLine {
    0% {
      stroke-dasharray: 170;
      stroke-dashoffset: -50;
    }
    
    100% {
      stroke-dasharray: 170;
      stroke-dashoffset: 170;
    }
  }

.box {
  background: red;
  width: 500px;
  height: 500px;
  position: relative;
}

.box:hover .line {
  animation: drawLine .6s cubic-bezier(.67,.02,.27,.95) forwards;
}

.line {
  width: 4px;
  height: 170px;
  fill: none;
  stroke: #fff;
  stroke-width: 4px;
  transform: rotate(195deg);
  display: block;
  position: absolute;
  left: 50px;
  bottom: 50px;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: unDrawLine .6s cubic-bezier(.67,.02,.27,.95) forwards;
}

<div class="box">
  <svg class="line" viewBox="0 0 4 170" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="0" y2="170" />
  </svg>
</div>

解决方案（使用GreenSock）

我能够找到一个完全符合我的效果的解决方案，同时也在Safari中工作 - 它只需要GSAP和绘图插件。

此处的解决方案演示...... https://codepen.io/anon/pen/MQqwdo

解决方案说明...... 黑客/修复/技巧只是稍微动画一行中点之一的坐标 - 用户不会注意到。

Answer 1

您可以尝试使用比例设置动画并更改左/底部以创建相同的效果：

＆＃13;

＆＃13;

.box {
  background: red;
  width: 500px;
  height: 500px;
  position: relative;
}

.box:hover .line {
   transform: rotate(25deg) scale(1,1);
   bottom:80px;
   left:80px;
}

.line {
  width: 4px;
  height: 170px;
  fill: none;
  stroke: #fff;
  stroke-width: 4px;
  transform: rotate(25deg) scale(1,0);
  transform-origin:bottom;
  transition:.6s cubic-bezier(.67,.02,.27,.95);
  display: block;
  position: absolute;
  left: 50px;
  bottom: 50px;
}

＆＃13;

<div class="box">
  <svg class="line" viewBox="0 0 4 170" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="0" y2="170" />
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;