这个月，我面临一个新的挑战：创建动画 SVG。我以前从未做过这件事。最初，我们考虑聘请自由职业者，但他们提供的结果不符合我们的标准。作为一个如果某件事未完成且不清楚如何完成就会睡不着觉的人，我决定自己动手。
最初的挣扎
下班后，我开始研究如何为 SVG 制作动画。我发现很多 2024 年更新的手机号码数据 视频看起来很复杂，考虑到我们只有两周的时间才能上线 9 个 SVG 和 3 个 PNG，我知道我必须找到一个更直接的解决方案。
发现 SVGator
过了一段时间，我偶然发现了一款名为 SVGator 的工具。起初，这款工具似乎让人不知所措，因为它们的文档不太人性化。我注册了免费试用版，开始探索其所有功能。我试用了 SVG 演示版，并开始应用不同的动画。第二天，我向老板演示了这款工具，他对此非常满意，并批准购买付费版本。
战斗开始
借助 SVGator，我开始根据简介制作第一个 SVG 动画。我了解了 SVG 中的 这就是引导式销售如何让你的客户满意 描边颜色、填充颜色、描边偏移和虚线偏移。以下是根据 ChatGPT 对这些术语的定义：
–描边颜色：SVG 形状的轮廓或边框的颜色。
–填充颜色：用于填充 SVG 形状内部的颜色。
–描边偏移：在原始路径内部或外部绘制描边的距离。
–虚线偏移：SVG 描边路径上虚线图案的起点。
在我必须制作动画的所有 SVG 中，这四个变量是主要焦点。要么玩它们的不透明度，要么玩它们的值。
我用三个小时完成了第一个 SVG。从那以后，整个过程变得更容易、更快捷。第二个 SVG 的创作时间减少了 50%，而到了第四个 SVG，每个 SVG 只花了我 30-40 分钟。所有 SVG 都得到了客户的批准并在网站上发布。
巴布亚新几内亚的挑战
如前所述，有 9 个 SVG（已制作动画）和 3 个 PNG。下一个挑战是将这些 PNG 转换为 SVG，然后制作动画。由于只剩下两天时间来完成这个项目，我在网上寻找工具，但找不到任何可靠的工具。经过一番搜索，我找到了一个名为 SVG Screenshot 的 Chrome 扩展程序，它可以截取屏幕截图并将其转换为 SVG。
一线希望
使用 SVG Screenshot，我截取了 3 个 PNG 的屏幕截图，将它们转换为 SVG，在 Figma 中对其进行了一些编辑，然后对其进行了动画处理。所有动画 SVG 都得到了客户的批准并准时上线。战斗胜利了！
经验教训
1. 永不放弃：坚持是关键。2
. 一切皆有可能：即使一开始看起来令人生畏。3
. 不要害怕尝试新技术：它可能正是您所需要的。
SVG 动画示例
这是我在 SVGator 上制作的 SVG 动画示例之一。简而言之，就是让每个特征上的分支逐个出现，然后以绿色或红色突出显示。
在 SVGator 中执行此操作：
1. 我为每个分支创建了一条路径。2
. 使用笔触偏移和虚线偏移来控制分支的动画。3
. 应用填充颜色变化以绿色或 干净的电子邮件 红色突出显示它们。
总之，这次经历让我学到了很多关于坚持不懈和学习新工具的价值的知识。如果你也遇到过类似的情况，请记住这些教训，不要害怕尝试新技术。谁知道呢？你可能会对自己能取得的成就感到惊讶！
