使用 MacSVG 创建 SVG 动画
创始人
2024-03-02 03:21:03
0

开源 SVG:墙上的魔法字。

新巴比伦的摄政王伯沙撒没有注意到他在盛宴期间神奇地书写在墙上的文字。但是,如果他在公元前 539 年有一台笔记本电脑和良好的互联网连接,他可能会通过在浏览器上阅读 SVG 来避开那些讨厌的波斯人。

出现在网页上的动画文本和对象是建立用户兴趣和参与度的好方法。有几种方法可以实现这一点,例如视频嵌入、动画 GIF 或幻灯片 —— 但你也可以使用可缩放矢量图形(SVG)

SVG 图像与 JPG 不同,因为它可以缩放而不会丢失其分辨率。矢量图像是由点而不是像素创建的,所以无论它放大到多大,它都不会失去分辨率或像素化。充分利用可缩放的静态图像的一个例子是网站的徽标。

动起来,动起来

你可以使用多种绘图程序创建 SVG 图像,包括开源的 Inkscape 和 Adobe Illustrator。让你的图像“能动起来”需要更多的努力。幸运的是,有一些开源解决方案甚至可以引起伯沙撒的注意。

MacSVG 是一款可以让你的图像动起来的工具。你可以在 GitHub 上找到源代码。

根据其官网说,MacSVG 由阿肯色州康威的 Douglas Ward 开发,是一个“用于设计 HTML5 SVG 艺术和动画的开源 Mac OS 应用程序”。

我想使用 MacSVG 来创建一个动画签名。我承认我发现这个过程有点令人困惑,并且在我第一次尝试创建一个实际的动画 SVG 图像时失败了。

重要的是首先要了解要展示的书法内容实际写的是什么。

动画文字背后的属性是 stroke-dasharray。将该术语分成三个单词有助于解释正在发生的事情:“stroke” 是指用笔(无论是物理的笔还是数字化笔)制作的线条或笔画。“dash” 意味着将笔划分解为一系列折线。“array” 意味着将整个东西生成为数组。这是一个简单的概述,但它可以帮助我理解应该发生什么以及为什么。

使用 MacSVG,你可以导入图形(.PNG)并使用钢笔工具描绘书写路径。我使用了草书来表示我的名字。然后,只需应用该属性来让书法动画起来、增加和减少笔划的粗细、改变其颜色等等。完成后,动画的书法将导出为 .SVG 文件,并可以在网络上使用。除书写外,MacSVG 还可用于许多不同类型的 SVG 动画。

在 WordPress 中书写

我准备在我的 WordPress 网站上传和分享我的 SVG 示例,但我发现 WordPress 不允许进行 SVG 媒体导入。幸运的是,我找到了一个方便的插件:Benbodhi 的 SVG 支持插件允许快速、轻松地导入我的 SVG,就像我将 JPG 导入媒体库一样。我能够在世界各地向巴比伦人展示我写在墙上的魔法字

我在 Brackets 中开源了 SVG 的源代码,结果如下:



Path animation with stroke-dasharrayThis example demonstrates the use of a path element, an animate element, and the stroke-dasharray attribute to simulate drawing.

你会使用 MacSVG 做什么?


via: https://opensource.com/article/18/10/macsvg-open-source-tool-animation

作者:Jeff Macharyas 选题:lujun9972 译者:wxy 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

svg

相关内容

不知道SVG的宽度和高度如...
使用JavaScript获取SVG的宽度和高度,然后使用以下代码将...
2025-01-12 09:01:57
不知道SVG文件的宽度和高...
可以使用第三方库如Apache Batik或Inkscape来将S...
2025-01-12 09:00:56
不支持的SVG滤镜隐藏形状
如果你使用的是包含不支持的SVG滤镜的形状,可以尝试以下解决方法:...
2025-01-11 21:02:06
不允许重复的属性 (SVG...
在SVG中,如果一个元素具有重复的属性,会导致解析错误。要解决这个...
2025-01-11 14:01:42
不影响路径的情况下缩放SV...
要实现“不影响路径的情况下缩放SVG”,可以使用CSS的trans...
2025-01-11 07:00:38
不透明度与可见性属性和SV...
透明度和可见性属性可以用来控制SVG元素的显示和隐藏。它们也可以通...
2025-01-10 02:30:59

热门资讯

Helix:高级 Linux ... 说到 基于终端的文本编辑器,通常 Vim、Emacs 和 Nano 受到了关注。这并不意味着没有其他...
使用 KRAWL 扫描 Kub... 用 KRAWL 脚本来识别 Kubernetes Pod 和容器中的错误。当你使用 Kubernet...
JStock:Linux 上不... 如果你在股票市场做投资,那么你可能非常清楚投资组合管理计划有多重要。管理投资组合的目标是依据你能承受...
通过 SaltStack 管理... 我在搜索Puppet的替代品时,偶然间碰到了Salt。我喜欢puppet,但是我又爱上Salt了:)...
Epic 游戏商店现在可在 S... 现在可以在 Steam Deck 上运行 Epic 游戏商店了,几乎无懈可击! 但是,它是非官方的。...
《Apex 英雄》正式可在 S... 《Apex 英雄》现已通过 Steam Deck 验证,这使其成为支持 Linux 的顶级多人游戏之...
如何在 Github 上创建一... 学习如何复刻一个仓库,进行更改,并要求维护人员审查并合并它。你知道如何使用 git 了,你有一个 G...
2024 开年,LLUG 和你... Hi,Linuxer,2024 新年伊始,不知道你是否已经准备好迎接新的一年~ 2024 年,Lin...
什么是 KDE Connect... 什么是 KDE Connect?它的主要特性是什么?它应该如何安装?本文提供了基本的使用指南。科技日...
Opera 浏览器内置的 VP... 昨天我们报道过 Opera 浏览器内置了 VPN 服务,用户打开它可以防止他们的在线活动被窥视。不过...