使用 SVG、CSS 和 JS 创建动画 dev.to 个人资料图片，然后将其转换为 GIF [教程]。

每当我加入一个社区时，我喜欢做的事情之一就是看看我是否可以让我的头像动起来。

过去我不得不采取各种黑客手段来让它工作，但在 dev.to 上它们让事情变得简单，它们接受.gif个人资料图片的格式图像并且不对它们进行任何检查...是时候享受乐趣了！

因此，如果您只想知道我如何制作动画个人资料图片，就这么简单，只需上传动画 GIF 即可！

这篇文章展示了我如何在大约30分钟内制作出这个GIF动图。我不建议将其作为永久的工作流程，但如果你想快速制作出一个动图，这篇文章或许适合你！

不确定为什么我要提请注意你可以上传动画 GIF 这一事实，说实话...我不希望其他人这样做...这让我的帖子在 feed 中脱颖而出🤣🤣🤣

一起破解一些东西

我不想在这上面花太长时间，主要是因为每当网站意识到人们可以上传动画头像时，他们往往会很快制止这种行为。

所以我需要一种快速的方法来创建动画，作为前端开发人员，很明显 SVG、CSS 和 JS 是完成此任务的最快方法。

步骤 1 - 插画设计

我相信一些聪明的人会用 CSS 构建整个东西，但我不够聪明，所以 Adob​​e Illustrator 对我来说是一个更好的选择！

我显然已经有了徽标，所以我在这里要做的就是设计我想要替换中间的“InHu”文本的元素。

我决定用“我们❤dev.to”作为文字。

我快速抓住一个心形图标并改变颜色以匹配 InHu 品牌，然后将它们放置在彼此之上以检查它们看起来是否平衡。

在我将它们堆叠在一起之前，我将它们分组（Ctrl+ G），然后转到“图层”面板。

然后，我为每个与结束动画相关的组命名，以便以后可以轻松地使用 CSS 和 JS 引用它们。

最后完成后，我将所有物品堆叠在圆圈的中心并保存了 SVG。

第 2 步 - 将 SVG 文本复制到 jsfiddle

当您在 Illustrator 中保存 SVG 时，您可以选择获取描述图像的原始文本（前提是您使用“另存为”）。

在第二个保存屏幕上按“SVG 代码...”将打开记事本并将原始 HTML 放入记事本中，以便您轻松复制它。

然后我将其粘贴到 jsfiddle 中并开始制作动画。

步骤 3 - 制作动画

我要做的第一件事就是为徽标周围的圆圈制作动画，使其旋转。

应该足够简单：

.rotate{
animation:spin 6s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg)}
}

哦 - 这并没有像预期的那样顺利，我的圆圈在轨道上而不是旋转🤣

动图

我忘了transform-origin...哎呀！

.rotate{
    animation:spin 6s linear infinite;
    transform-origin: 50% 50%; /* 50% 50% is the center */
}
@keyframes spin {
    100% { transform: rotate(360deg)}
}

哎呀，旋转的圆圈看起来摇摇晃晃的！

现在我已经设置好了，transform-origin圆圈围绕着正确的点旋转。

问题是圆圈有一点“摆动”。

动图

这是因为我在 Illustrator 中把所有东西都居中了，但圆圈底部有点缺失。这导致中心点移动，所以我们无法在 50% 50% 处进行变换，需要进行微调。

另一个问题是我不能只调整外环的位置，因为这样其他所有东西都会偏离中心。

我所做的是在顶部画另一个圆圈，抓住中心坐标，然后计算出环距离中心有多远。

最终坐标为50.00007，50.03474

将其插入我们的系统，transform-origin我们就能获得完美平滑的旋转！

由于我比较懒，所以用 JS 制作动画

接下来我需要循环遍历文本“我们”、“❤”、“dev.to”和“InHu”。

由于这比较麻烦，所以用 JavaScript 很容易就能搞定。还记得我们之前在 Illustrator 中对项目进行分组吗？这样做的好处是，id我们可以将一个对象添加到组中，这样就可以定位了。

var we = document.querySelector("#we");
var heart = document.querySelector("#heart");
var devto = document.querySelector("#devto");
var inhu = document.querySelector("#inhu");

然后我们只需每 100 毫秒设置一个计时器并决定何时显示哪个项目。

var change = function(){
    if(count > 59){
        count = 0;
    }


    if(count == 0){
        we.classList.add('active');
        heart.classList.remove('active');
        devto.classList.remove('active');
        inhu.classList.remove('active');
    } 

     if(count == 12){
        we.classList.remove('active');
        heart.classList.add('active');
        devto.classList.remove('active');
        inhu.classList.remove('active');
    } 
     if(count == 24){
        we.classList.remove('active');
        heart.classList.remove('active');
        devto.classList.add('active');
        inhu.classList.remove('active');
    } 
         if(count == 36){
        we.classList.remove('active');
        heart.classList.remove('active');
        devto.classList.remove('active');
        inhu.classList.add('active');
    } 
    count++;
}

var timer = setInterval(change, 100);

再说一遍，因为这是一次性代码，我甚至没有删除不必要的classList.remove部分，因为这样更容易检查。

接下来我只需要设置 CSS 来改变active应用于组的类的可见性。

/* originally hidden */
#we, #heart, #devto, #inhu{
  opacity: 0;
}

/* only show if the class "active" is applied */
#we.active, #heart.active, #devto.active, #inhu.active{
    opacity: 1;
}

最后，我为不透明度添加了 0.2 秒的过渡，这样当文本发生变化时就不会显得刺眼，而是得到一种微妙的“淡入淡出”效果。

transition: opacity 0.2s linear; 

现在我们就得到了一个拼凑起来的标志动画。

步骤 4 - 捕捉动画

最后一步是抓取动画。

为此，我使用Screen To GIF。

它的使用非常简单，您启动它并获得一个选项屏幕，根据您想要做的事情为您提供选项。

在这个例子中，我们想使用“录音机”来录制部分屏幕。

单击后，我们会得到一个空框，我们可以将其放置在要记录的元素上方

您可以在底部设置要录制的帧速率，准备好后单击“录制”。

我们让动画完成一个完整的循环，然后按“停止”。

然后就会弹出编辑器屏幕。

在这个屏幕上，我们可以播放动画并找到循环点。然后，我们选择不需要的帧，并按下 键Del将其移除。

经过一些微调，我们就可以得到一个可以导出的完美循环。

最后，我们进入“文件”菜单，单击“保存”并选择我们的输出类型（在本例中为.gif）和文件位置。

然后编码器将尽可能优化您的 GIF 并为您保存。

第 5 步 - 获利！

上传.gif您的个人资料图片，然后我们就开始吧！

最后一个问题是，我现有的帖子中没有我的动画 gif - 我是不是浪费了时间？

事实证明，每个帖子都单独存储了您的徽标的路径（这对于服务器存储空间来说似乎真的很低效，但我还没有机会看看这是否只是某种缓存机制，或者这是否是 dev.to 实际工作的方式，以避免额外的查找等）

于是我简单翻了一下最近的几篇帖子（还好我还是新手😀），然后点了“编辑”，然后立刻又保存了。现在我的动态头像就出来了！

总结

这就是创建快速动画 GIF 的一种方法。

现在正如我所说的，不要为你的个人资料制作自己的动画 GIF，因为我想脱颖而出😋...我在开玩笑，如果你确实在评论中添加了动画 GIF 作为你的个人资料图片，请告诉我！

正如我所说的，如果太多人这样做，这个问题可能会被修补，但如果发生这种情况，至少这给了我一个快速的帖子，只是为了填补一些“安静的时间”，同时我最终确定我的内容发布时间表。

感谢阅读

额外福利——其他带有动态个人资料 GIF 的图片

我发现了其他一些带有动画个人资料 GIF 的人，去关注他们吧。

托马斯·Bnt☕跟随

法语 Web 开发者，但涉猎广泛。DEV 的志愿者模组。我目前正在学习 Nuxt 和数据库。—— 卡布奇诺和音乐爱好者

[已删除用户]

喜欢这篇文章吗？以下是我其他的一些作品……

如果您喜欢这篇文章，您可能还会喜欢我的其他几篇文章：

显然，如果你想知道我接下来的工作，那么你可以随时关注我：

[已删除用户]