如何用CSS制作SVG动画

说到SVG动画,你一般会想到的方式是利用JavaScript库控制SVG动画。然而,这不是唯一的方式,CSS也可以控制SVG中的部分路径,以创造动画效果。了解CSS对SVG的控制,意味着你可以用简单的CSS创造平滑的、动态的图标效果,使得作品更加出彩。

How to add animation to SVG with CSS - operation, design, chosen - 如何用CSS制作SVG动画

学会和CSS结合的SVG,你就能够将页面上的更多元素替换为SVG,这样你就可以在实现类似动画的同时将页面进行进一步优化。而如果你充分应用SVG动画,等待你的是无限的可能性。

01 创建保存基础图形

首先,你要先制作以一个SVG用来操作。在这篇教程里,我们用Illustrator创建一个简单的SVG图形作为范例。在Illustrator中,创建好图形后,点击“另存为”然后在下拉菜单中选择SVG即可。在保存确认界面,你可以不进行保存,而是点击“SVG代码”按钮,在浏览器里查看SVG的组成代码。

02 优化SVG为网络所用

2 Optimise for the web - operation, design, chosen - 如何用CSS制作SVG动画

删去不必要的SVG标签可以让SVG图形更小也更容易处理。本质上,你应该直接用文本编辑器打开,然后移除SVG代码内的空标签和Meta数据。但我们有工具可以帮我们做这件事:

这是一个开源工具,可以在线使用。你只需要将原SVG代码黏贴在“Paste markup”的区域,然后点击右侧的按钮即可将优化过的代码复制出来。

03 创建HTML文档

接下来,打开你的代码编辑器并创建一个空的HTML文档。在这篇教程中,我们将CSS代码写在main.css中,因此请把这个文件也准备好。另外,因为这个教程是专门用来制作动画的,因此我们引用Bootstrap 4.1.3的仅有CSS的版本。

04 创建版面

接下来,我们创建一个基础排版,以给SVG安排一个位置。我们写好文件头和两列布局,左侧放置文字,而右侧放置我们要制作动画的SVG。在教程的示例里,我们在body标签中加入了一个静态SVG作为背景,仅仅是为了美观。

如果这一步你不知道怎么做,请先学习HTML基础。

05 放置SVG

接下来我们要放置刚才绘制的SVG图形了。将优化过的SVG代码黏贴在右侧的一列里,如果你引用了bootstrap,请给SVG加上img-fluid类以确保它在移动端的缩放效果。

06 给SVG增加各种类

既然我们要用CSS控制,就必须给SVG中的特定部分增加类,这样CSS才能知道应该控制哪个部分。增加多少类看你的需求,这是没有上限的,也就意味着创建复杂的SVG动画是有可能的。

下面的示例代码,是我们在教程里使用的SVG部分的代码,你可以看到我们已经增加了两个类rectBackground和rectText上去。

<svg>
<g>
<rect class="rectBackground" width="147.4107" 
height="68.7917" x="31.2946" y="114.1042" 
rx="4.5882" ry="3.9565" fill="#2a7fff"/>
<path class="rectText" d="..." vector-effect="non-scaling-stroke" stroke-width=".470476156" font-size="12" fill="#fff" 
fill-rule="evenodd" stroke="#fff" stroke-linecap="round"/>
</g>
</svg>

07 设置初始状态

即便类在SVG里,CSS的选择器工作原理也是一样的。当我们设置好了类,就可以使用SVG子标签和设置的类名称进行选择。我们预设在初始状态,SVG的两个部分(文字和背景)都是隐藏的,因此透明度opacity的预设值要为0。

path.rectText {
opacity:0;
}
rect.rectBackground{
opacity: 0;
}

08 声明动画

接下来,我们需要声明动画的名称和关键帧,这样CSS才知道让我们要求执行动画的时候具体该做什么。我们要绘制两个动画,命名为textDraw和rectFade。然后,在每个命名下,我们要附加几个名称。在textDraw动画下,我们增加了3个名称,意味着这是一个三步骤动画。

@keyframes textDraw {
0%{}
50%{}
100%{}
}
@keyframes rectFade{
from{}
to{}
}

09 关联动画和属性

9 Assign animation and properties - operation, design, chosen - 如何用CSS制作SVG动画

接下来,我们将rectFade效果附加到rectBackground元素上,时间设置为1秒,效果选择easeOut(擦除)并设置动画曲线以让动画更加平滑。然后,我们给动画添加forwards属性,这样动画就可以在播放结束后保持在最后一个关键帧的状态。

rect.rectBackground{
opacity: 0;
animation: rectFade 1s cubic-bezier(0.645, 
0.045, 0.355, 1) forwards;
}

10 背景正方形动画

10 The rectangle animation - operation, design, chosen - 如何用CSS制作SVG动画

正方形只有2个关键帧,所以我们只需要设置好初始状态和结束状态的属性即可。在初始阶段的from帧,我们将宽度width设置为1%,在结束的to帧,我们设置宽度width为100%并设置透明度opacity为1(因为它会继承父对象的初始状态opacity 0)。

@keyframes rectFade{
from {
width: 1%;
}
to {
width:100%;
opacity: 1;
}
}

11 文字动画

接下来,我们给文字加上一个书写出现的效果。我们首先给textDraw动画4秒钟的动画时长,然后使用不同的渐变曲线,让它的动画播放速度随时间产生变化,不至于过分生硬。

path.rectText {
opacity:0;
animation: textDraw 4s 
cubic-bezier(.56,-0.04,.32,.7) forwards;
}

12 推迟动画

我们希望文字动画在背景的长方形出现完成后再开始进行,所以需要推迟它。而由于长方形的动画持续1秒,因此我们要推迟相应的(或更多的)时间。

path.rectText {
opacity:0;
animation: textDraw 4s 
cubic-bezier(.56,-0.04,.32,.7) forwards;
animation-delay: 1s;
}

13 模拟线条绘制

13 Emulate line drawing - operation, design, chosen - 如何用CSS制作SVG动画

为了得到线条绘制效果,我们需要使用stroke-dasharray和stroke-dashoffset两个参数。注意,你使用的SVG将决定参数的属性值,你可以用开发者工具,将stroke-dasharray从0一直往上增加,直到图形轮廓完全被显示完成的那个点,此时的数值就是你用于替换下方735的属性。

path.rectText {
opacity:0;
stroke-dasharray: 735;
animation: textDraw 4s 
cubic-bezier(.56,-0.04,.32,.7) forwards;
animation-delay: 1s;
}

14 设置画线的初始关键帧内容

现在我们有了外轮廓,然后我们来编辑它的长度。我们要的效果是,在轮廓绘制完成后填充色出现。因此,我们先把stroke-dashoffset设置为dasharray的收尾值(或更大),并且设置透明度和填充、描边的颜色(如果父对象没有这方面的设置的话)。

0%{
fill:rgb(255, 255, 255, 0);
stroke:#fff;
stroke-dashoffset: 800;
opacity: 1;
}

15绘制完成线条

下面我们来到第二个关键帧40%的位置,首先把stroke-dashoffset设置为0,让线条覆盖路径。然后我们再次设置填充的透明度,以免它在这一步显示出来。

40%{
stroke-dashoffset: 0;
fill:rgb(255, 255, 255, 0.0);
}

16 填充颜色

在最后的关键帧,我们给整个图形填充白色就可以了。这里我们主要调节的是填充里的alpha值(即rgb的第四个值,透明度),这样就可以在两个关键帧之间实现渐变出现的效果。

100%{
fill:rgb(255, 255, 255, 1);
stroke-dashoffset: 0;
opacity: 1;
}

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注