400-800-9385
网站建设资讯详细

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

发表日期:2022-09-30 10:35:13   作者来源:冯稷梁   浏览:513   标签:SVG动画制作    
这是熟悉 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>,将它的一半高度向上移动一半宽度向左移动来做到这一点:
1 <path transform="translate(-50 -42.5)"

结论

心形SVG完成

 
 
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6546.html