如何使用SVG制作跳动的动画

来源： All文章

发布时间：2024-06-06 10:07:12

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

　　1.创建一个心形图标

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

　　2.开始写SVG

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

svgwidth=100height=100viewBox=00100100font/font

　　font/font

　　/svg

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

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

svg{font/font

　　background：blue;font/font

　　}

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

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	pathfill=tomatod=

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

pathfill=tomatod=

　　2.71，

　　7.27L9

　　2.71，

　　7.27c-

　　9.71-

　　9.69-2

　　5.46-

　　9.69-3

　　5.18，0L50，1

　　4.79l-

　　7.54-

　　7.52C3

　　2.75-

　　2.42，17-

　　2.42，

　　7.29，

　　7.27v0c-

　　9.71，

　　9.69-

　　9.71，2

　　5.41，0，3

　　5.1L50，85l4

　　2.71-4

　　2.63C10

　　2.43，3

　　2.68，10

　　2.43，1

　　6.96，9

　　2.71，

　　7.27zfont/font

　　/path

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

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

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

　　5.添加一点动画为了使跳动的动画化，我们将使用一个animateTransform嵌套在SVG中的元素。

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

animateTransformfont/font

　　attributeName=transformfont/font

　　type=scalefont/font

　　dur=1sfont/font

　　repeatCount=indefinitefont/font

　　/animateTransform

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

　　我们使用的属性是不言自明的。我们正在创建一个持续时间为1秒的比例变换，它将无限期地重复。

向转换添加值

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

animateTransformfont/font

　　attributeName=transformfont/font

　　type=scalefont/font

　　dur=1sfont/font

　　values=1;

　　1.5;

　　1.25;

　　1.5;

　　1.5;1;font/font

　　repeatCount=indefinitefont/font

　　/animateTransform

所以这里的从正常大小(1)开始，然后缩放到

　　1.5正常大小，然后稍微缩小到

　　1.25，然后回到

　　1.5，依此类推。这些值给了我们跳动的效果。

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

　　保持我跳动的心斯汀

　　此外，我们正在为整个SVG制作动画；在内容动画svg化的同时保持相同的比例会更有用。这是可能的我们需要稍微调整一下坐标系但这是可能的。

添加包装元素并缩小

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

svgfont/font

　　gfont/font

　　path/pathfont/font

　　animateTransform/animateTransformfont/font

　　/gfont/font

　　/svg

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

1	svgwidth=150height=150viewBox=00200200

在这一点上，svg再次给背景颜色是个好主意，所以我们可以看到发生了什么：好吧，它有效，我们有一个SVG心跳，但坐标让我们感到困惑。group元素从0、0缩放，而我们需要我们的心以某种方式从中心缩放。我们可以通过对应用一个变换path，将它的一半高度向上移动一半宽度向左移动来做到这一点：

1	pathtransform=translate(-50-4 　　2.5)

结论

上一页：网站建设制作的流程与方法有哪些？

下一页：企业如何让您的登陆页面成功实现转化

* 文章来源于网络，如有侵权，请联系客服删除处理。