SVG Artista 是 Animista.net 的一个派生项目。很多 Animista 用户一直在问我们是如何制作 Animista 的闪屏动画的。因此,我们决定开发一个工具来简化创建这样一个动画的过程。它原本是打算成为 Animista 的一部分,但很快它就超出了我们最初的想法,我们有理由把它作为一个单独的项目。

如何使用

1. 选择一个 SVG 图形

首先,单击“打开 SVG”按钮加载本地保存的 SVG 文件,或者复制 SVG 标记并单击“粘贴标记”将其粘贴。动画将播放一次,一旦图形加载。

您可以在侧栏的主面板中更改 SVG elements 类、背景颜色和动画类型。

元素类是一个实用 CSS 类,分配给 SVG 中的每个元素。它用于控制单个元素的动画(例如,创建交错动画效果)。默认值是 svg-elem。

如果 SVG 图形由于对比度差而不可见,则可以更改主舞台背景颜色。这里的这个选项是为了方便您(例如查看 SVG 图形在页面上的外观),不会更改 SVG 代码或以任何方式影响它。默认值是深灰色。

您还可以更改生成的 CSS 代码,以使用转换或动画。默认值是 transition。

2. 播放

点击“播放”工具栏按钮查看动画。如果你对结果满意,那就继续下一步。否则,您可以调整侧边栏中的填充和描边面板中的各种设置。你也可以翻转工具栏上的“绘制/删除”按钮来反转动画。

3. 复制代码

一旦你对一切都满意了,点击“获取代码”工具栏按钮。然后复制 SVG 和 CSS 代码并将其粘贴到编辑器中。

剩下的取决于你想做什么。在介绍动画的情况下,您可以简单地将活动分配给页面加载事件上的 SVG。