为了做个动画 SVG,我手工写的分镜头
创始人
2024-03-02 04:38:09
0

可能很多同学注意到了,我们的公众号文章前一段时间悄悄的变化了一些版式,最明显的就说各级标题从原来的渐变色条状变成了如今的样式:居中,无底色,以图标做分隔。喏,就是这样的:

这是一个示例的一级标题哈

这里可能有细心的同学会发现,这个图标是会动的,而且是一个“俄罗斯方块”游戏。是的,其实这个图标的原型来自于我之前给 Linux 中国设计的新徽标——当时还举办过徽标征集大赛,只是后来大家都觉得老的徽标更适应,所以没有更换。

不过我个人是挺喜欢这个样式的,所以这里就将它引入进来做标题图标了。

最初是将一个静态的 PNG 图片放到这里的,大家可以注意到开始有几天的公众号文章里面是用的静态的图标;然后几天后,我突然有了一些童心,觉得既然是模仿“俄罗斯方块”游戏的风格,为什么不能动起来呢?

说实在的,老王我是真没有动画基础,哦不,连美工基础都没有。虽然我能用一些软件拼凑出一些简单的洋葱头动画,但是要做到比较复杂和较多的帧数,那么动画 GIF 文件就会比较大。

正好我还会一点点 AI,于是用 AI 重新绘制了这个图标,并导出了 SVG 文件——我知道,这是纯文本的。然后我就可以用我心爱的文本编辑器(你猜是什么编辑器)打开直接修改代码了。

用编辑器打开后,啊哦,这里的数字都很不精确啊——不,很精确啊,都保留了小数点后好多位呢。有点强迫症的我给它们归并到一个比较舒服的整数和倍数上。

然后,怎么动起来呢?没学过,只能现去网上学习 SVG 动画的指令,一边看着别人做的极炫的动画流口水,一边反复地试错。

终于,能自己动了。但是又发现,这动画真是一帧一个状态啊,怎么计算呢?这个时候感觉自己的脑力不够了,于是就找张纸开始画分镜头图,反反复复地画了好几张。这是最终定稿的一张,就这也经过了大量涂改。

然后,最终的 SVG 代码大概是这样的:

虽然我还想加入一些更有趣的变化,比如旋转方向什么的,但是会搞得太复杂了。总之,这是老王第一次做 SVG 动画,肯定有很多浅陋之处,贻笑大方了。

最后,说一句,分镜头真的很痛苦,要一个个数据计算,一个数据错了,后面全错了。

顺便,这个 SVG 文件可以在这里下载: https://linux.cn/static/image/common/linux-logo-2019-t.svg

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

热门资讯

使用 KRAWL 扫描 Kub... 用 KRAWL 脚本来识别 Kubernetes Pod 和容器中的错误。当你使用 Kubernet...
Helix:高级 Linux ... 说到 基于终端的文本编辑器,通常 Vim、Emacs 和 Nano 受到了关注。这并不意味着没有其他...
通过 SaltStack 管理... 我在搜索Puppet的替代品时,偶然间碰到了Salt。我喜欢puppet,但是我又爱上Salt了:)...
Epic 游戏商店现在可在 S... 现在可以在 Steam Deck 上运行 Epic 游戏商店了,几乎无懈可击! 但是,它是非官方的。...
如何在 Github 上创建一... 学习如何复刻一个仓库,进行更改,并要求维护人员审查并合并它。你知道如何使用 git 了,你有一个 G...
2024 开年,LLUG 和你... Hi,Linuxer,2024 新年伊始,不知道你是否已经准备好迎接新的一年~ 2024 年,Lin...
Bazzite:专为 Stea... 为 Linux 桌面或者 Steam Deck 做好游戏准备,听起来都很刺激!对于一个专为 Linu...
Motrix:一个漂亮的跨平台... 一个开源的下载管理器,提供了一个简洁的用户界面,同时提供了跨平台操作的所有基本功能。在这里了解关于它...
Bash 脚本中如何使用 he... here 文档 here document (LCTT 译注:here 文档又称作 heredoc ...
使用 dialog 和 jq ... 为何选择文字用户界面(TUI)?许多人每日都在使用终端,因此, 文字用户界面 Text User I...