d3 svg拖拽跳动_如何使用SVG制作动感的心脏跳动

d3 svg拖拽跳动

今天是情人节！ 因此，让我们进入事物的精神，在此过程中变粉红色和模糊不清，并使用SVG为自己编写一个简单的动画跳动的心脏。

这是我们要创建的：

这是使您熟悉SVG语法和真实动画的绝佳练习。 我们将以预制的SVG心脏为基础，提醒自己viewBox工作原理，然后添加animateTransform元素来控制跳动。 在最初的“简单”方法之后，我们将讨论它的问题并进行一些改进。 让我们开始！

1.创建一个心形图标

在选择的矢量工具中，绘制一个简单的心脏图标。 它并不一定是完美的，但是为了简便起见，使其成为一条连续的道路。 我在100x100px的画布上创建了我的游戏，几乎填满了整个内容。

如果要使用我的Illustrator版本和SVG版本，请下载它们。

复制并粘贴到文本编辑器中

如今，在大多数矢量应用程序中，您可以复制对象并将生成的SVG代码粘贴到文本编辑器中。 对心脏对象也是如此。 稍后我们将回到此SVG代码段。

2.开始编写SVG

在Codepen（或blanco HTML文件）中，首先编写SVG元素的基本内容：

在这里，我们为SVG提供了与原始画布相同的高度和宽度。 我们还将viewBox设置为0 0 100 100 。 这意味着我们正在查看SVG的窗口从坐标0 0（左上角）开始，尺寸为100x100px，因此它与SVG完美匹配。

为了清楚地了解您要处理的内容，请添加CSS规则为SVG背景上色：

svg {
  background: blue;
}

我们还使用flexbox集中我们正在查看的内容：

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

3.添加心脏路径

现在我们需要在SVG中嵌套路径元素。 从空路径开始，以fill颜色和空d ：

d定义了绘制的路径，因此让我们向其添加路径坐标。 在您粘贴到文本编辑器的SVG代码段中，将d属性中的所有内容粘贴到我们的空属性中。 您应该以一个混乱的字符串结尾，如下所示：

所有这些都会创建以下内容：

4.让你的心成长

我想要更大的心。

通过将SVG的width和height属性加倍到width="200" height="200"我们将使整个对象的大小加倍。 或者我们可以按150％ width="150" height="150"缩放所有内容。 或者是其他东西。 我们不必触摸viewBox值，因为它们将相对于我们刚刚更改的Viewport保持相对。

5.添加动画效果

为了对心脏进行动画处理，我们将使用嵌套在SVG中的animateTransform元素。

首先在SVG内部添加元素，作为路径的同级元素：

我们使用的属性是不言而喻的。 我们正在创建一个持续时间为1s的缩放变换，该变换将无限期地重复。

将值添加到变换

现在我们需要添加一个值列表，这样它就知道要进行多少动画处理：

因此，这里的心脏从正常大小（ 1 ）开始，然后缩放到1.5正常大小，然后再减小到1.25 ，然后又回到1.5 ，依此类推。 这些值给我们带来了跳动的效果。

注意 ：每个值占用我们设置的1秒计时的相等部分。 就像您想象的那样，运动似乎会加速和减速，具体取决于每个步骤需要进行多少缩放。

在薰衣草色的背景下，我们拥有一颗跳动的心！

6.更好的解决方案

改变我们处理方式的原因有两个，第一个（重要的）原因是：在许多移动浏览器中都无法使用。 iOS Safari和Chrome只会显示一动不动的心，因为它们不喜欢将animateTransform应用于元素。

“仍然是我跳动的心脏” – 斯特恩

另外，我们正在对整个SVG进行动画处理； 在将的内容设置为动画时，将其保持在相同的比例会更有用。 这是可能的-我们需要稍微处理一下坐标系-但这是可能的。

添加包装元素并缩小

首先将我们的和元素包装在一组元素中。 现在，该将被动画化：

我还想通过增加viewBox的大小来“缩小”。 这将防止我们的心脏超出 ，从而掩盖它。

此时，最好再次给背景颜色，这样我们就可以看到发生了什么：

好吧，它有效，但是坐标使我们感到混乱。 group元素从0，0开始缩放，而我们需要我们的心从中心开始缩放。 为此，我们可以对进行转换，将其向上移动一半高度，向左移动一半宽度：

这是发生了什么：

为了补偿在视口边界之外移动，现在让我们在另一个方向上偏移 。 我们的viewBox是200x200，因此我们需要将组移动到一半：

这是我们的目标（如果您仍在注意，那就做得好！）：

另外，移动viewBox的坐标将具有相同的效果：

如果SVG坐标使您的头部旋转，请看一下Sara Soueidan在该主题上写的内容 。

另一个属性

为了能够转换 ，我们需要向添加另一个属性：

additive="sum"

这样可以有效地将动画中的变换值添加到本身声明的变换值上，从而阻止一个覆盖另一个。 理解起来可能是一个令人困惑的属性，并且可能引发一些意外的结果，但是在我们的情况下，它可以完美地工作！

“ [[additive =“ sum”]指定动画将添加到属性和其他优先级较低的动画的基础值。” – MDN

我们完成了！

结论

我必须说实话，我喜欢这个最终结果！ 这是一个简单但有效的动画，为我们提供了练习SVG技能的绝好机会。 这就是我们创建的内容（转到CodePen，花点心思！ ）

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-make-an-animated-beating-heart-with-svg--cms-32759

d3 svg拖拽跳动