如何使用SVG制作跳动的心脏动画_首页|J9国际集团中国官方网站

这是熟悉 SVG 语法和真□□□实动画的□□□□一个很好✦的练习。我们将使△用一个预♦制的 SVG 心脏，提醒自己○是如何viewBox工作的，然后添加□□□□一个 animateTransform元素来控※制跳动运□□□□动。在最初的“简单”方法之后，我们将讨◤论它有什□□么问题并▽进行一些□□□改进。最后，我还将向□□您展示一□□□些替代的□□□□跳动心脏★动画。让我们开△始！

1. 创建一个心形图标
在您选择□□的矢量工□□□□具中，绘制一个□□□□简单的心□□□形图标。它不需要□□□是完美的，但为了方□□便起见，让它成为□□□一条连续□□□的路径。我在 100x100 像素的画□□□□布上创建□□□了我的，几乎填满□□□□了整个东丨西。

SVG动画1

2.开始写SVG

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

1
2
3

<svg width="100" height="100" viewBox="0 0 100 100"><font></font>
<font></font>
</svg>

在这里，我们为 SVG 赋予了与◇原始画布□□□□相同的高□□度和宽度。我们还将 viewBox 设置为0 0 100 100. 这意味着□□□□我们查看 SVG 的窗口从□□□□坐标 0 0（左上角）开始，尺寸为 100x100px，因此它与□□□□我们的 SVG 完美匹配。
为了清楚地看到您正在处理的内容，添加一个 CSS 规则来为 SVG 背景着色：

1
2
3

svg {<font></font>
background: blue;<font></font>
}

让我们也使用 flexbox 将我们正在查看的内容居中：

1
2
3
4
5
6

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

3. 添加心路

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

1	<path fill="tomato" d="">

定义了一□□□个绘制的d路径，所以让我□□□□们添加我□□□们的路径□□□坐标。在您粘贴□□□到文本编□□辑器中的 SVG 片段中，从d属性中获□□取所有内□□容并将其□□粘贴到我□□们的空属□□□性中。你应该得□□到一个看○起来像这※样的混乱※字符串：

1 2	<path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"><font></font> </path>

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

SVG动画制作2

4. 让你的心□□□成长

我想要一颗更大的心。
通过将 SVG 的宽度和□□□高度属性□□加倍，width="200" height="200"我们将加□□倍整个物□□□□体的大小。或者我们□□□□可以将所□□□□有内容缩□□□□放 150% width="150" height="150"。或者是其□□□他东西。我们不需◇要触摸 viewBox 的值，因为它们□□□会相对于丨我们刚刚♦更改的 Viewport 保持不变。

5. 添加一点□□□动画

为了使跳动的心脏动画化，我们将使用一个animateTransform嵌套在 SVG 中的元素。
首先在 SVG 中添加元素，作为路径的兄弟：

1
2
3
4
5
6

<animateTransform <font></font>
    attributeName="transform" <font></font>
    type="scale" <font></font>
    dur="1s" <font></font>
    repeatCount="indefinite"><font></font>
</animateTransform>

这将为父□□□元素设置□□动画，即：整个 <svg>. 这在很多△情况下都□□□不合适，最好为中的元素□□设置动画，但<svg>这种方法□□对我们来□□□说效果很□□□□好。为了复习 animateTransform 的工作原丨理，Kezz（像往常一□□□□样）为您介绍□□了：
我们使用□□的属性是□□□不言自明□□□□的。我们正在□□□创建一个□□持续时间□□为 1 秒的比例□□变换，它将无限□□□期地重复。

向转换添□□加值

现在我们需要添加一个值列表，所以它知道要设置多少动画：

1
2
3
4
5
6
7

<animateTransform<font></font>
      attributeName="transform"<font></font>
      type="scale"<font></font>
      dur="1s"<font></font>
      values="1; 1.5; 1.25; 1.5; 1.5; 1;"<font></font>
      repeatCount="indefinite"><font></font>
</animateTransform>

所以这里□□□的心脏从□□□□正常大小 ( 1) 开始，然后缩放□□□到1.5正常大小，然后稍微□□缩小到1.25，然后回到1.5，依此类推。这些值给□□□□了我们跳□□动的效果。

6. 更好的解□□□□决方案

改变我们✦的方式有□□几个原因，第一个（重要的）原因是：这在许多□□□□移动浏览□□□□器上不起□□□□作用。iOS Safari 和 Chrome 只会表现□□出一动不□□动的心，因为它们◆不喜欢animateTransform被应用到<svg>元素上。
“保持我跳动的心”——斯汀
此外，我们正在□□为整个 SVG 制作动画；在内容动◥画<svg>化的同时□□□保持相同□□□的比例会□□更有用。这是可能□□□的——我们需要□□□稍微调整□□□一下坐标□□□□系——但这是可□□□能的。

添加包装□□□元素并缩•小

首先将我□□□们的<path>和<animateTransform>元素包装✦在一个组<g>元素中。这<g>就是现在□□动画的内□□□□容：

1
2
3
4
5
6

<svg><font></font>
    <g><font></font>
        <path></path><font></font>
        <animateTransform ></animateTransform><font></font>
    </g><font></font>
</svg>

我还想通过增加viewBox. 这将防止我们的心超越界限，<svg>从而掩盖它。

1	<svg width="150" height="150" viewBox="0 0 200 200">

在这一点□□□上，<svg>再次给背□□□□景颜色是□□□□个好主意，所以我们□□□可以看到□□□发生了什□□□么：

SVG动画制作3

好吧，它有效，我们有一□□□□个 SVG 心跳，但坐标让□□我们感到□□□□困惑。group 元素从 0、0 缩放，而我们需□□□□要我们的□□□□心以某种□□□□方式从中□□□□心缩放。我们可以·通过对应用一个◣变换<path>，将它的一□□□半高度向□□□□上移动一☆半宽度向□□□□左移动来❖做到这一◉点：