物流大超市

标题: 知晓：如何使用SVG制作跳动的心脏动画 [打印本页]

作者: kaixun 时间: 2023-2-24 00:16
标题: 知晓：如何使用SVG制作跳动的心脏动画

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

知识付费的相关问题可以到网站了解下，我们是业内领域专业的平台，您如果有需要可以咨询，相信可以帮到您，值得您的信赖！

1创建一个心形图标

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

2开始写SVG
在C（或HTML文件）中，首先编写SVG元素的基本内容：

1

2

3
=0=0B=0000

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

为了清楚地看到您正在处理的内容，添加一个CSS规则来为SVG背景着色：

1

2

3
{

:;

}

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

1

2

3

4

5

6
{

:0;

:;

-:;

-:;

}

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

1
==

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

1

2
==M91,7L91,7-971-969-46-969-35,0L50,79-754-752C35-2,-2,7,70-971,969-971,41,0,351L50,8541-43C3,38,3,96,91,7

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

4让你的心成长
我想要一颗更大的心。

通过将SVG的宽度和高度属性加倍，=0=0我们将加倍整个物体的大小。或者我们可以将所有内容缩放0%=0=0。或者是其他东西。我们不需要触摸B的值，因为它们会相对于我们刚刚更改的V保持不变。
5添加一点动画
为了使跳动的心脏动画化，我们将使用一个T嵌套在SVG中的元素。

首先在SVG中添加元素，作为路径的兄弟：

1

2

3

4

5

6
T

N=

=

=1

C=

T

这将为父元素设置动画，即：整个这在很多情况下都不合适，比较好为中的元素设置动画，但这种方法对我们来说效果很好。为了复习T的工作原理，K（像往常一样）为您介绍了：

我们使用的属性是不言自明的。我们正在创建一个持续时间为1秒的比例变换，它将限期地重复。
向转换添加值
现在我们需要添加一个值列表，所以它知道要设置多少动画：

1

2

3

4

5

6

7
T

N=

=

=1

=1;;5;;;1;

C=

T

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

6更好的解决方案
改变我们的方式有几个原因，首个（重要的）原因是：这在许多移动浏览器上不起作用。OSS和C只会表现出一动不动的心，因为它们不喜欢T被应用到元素上。

保持我跳动的心斯汀

此外，我们正在为整个SVG制作动画；在内容动画化的同时保持相同的比例会更有用。这是可能的我们需要稍微调整一下坐标系但这是可能的。
添加包装元素并缩小
首先将我们的和T元素包装在一个组元素中。这就是现在动画的内容：

1

2

3

4

5

6

TT

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

1
=0=0B=0000

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

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

1
=(-50-4)

结论

欢迎光临物流大超市 (https://www.9999956.com/bbs/)