前端程序员如何转投SVG领域?( 计育韬老师高校公益巡讲答疑实录2024)

计育韬 2024-07-01 15:33:01 阅读 77

这是计育韬老师第 8 次开展面向全国高校的新媒体技术公益巡讲活动了。而在每场讲座尾声,互动答疑环节往往反映了高校师生当前最普遍的运营困境,特此计老师在现场即兴答疑之外,会尽量选择有较高价值的提问进行文字答疑梳理。

*本轮巡讲主题除了涉及 SVG 交互外,还包含了新媒体中 AI 人工智能工作流的详解,为高校师生带来包括与多家央媒的项目合作经验和复旦大学本校的案例分析,因此答疑梳理中也会出现与 AI 相关的知识点,如有任何偏颇之处也欢迎在评论区斧正。

第六期计育韬老师继续梳理了在江西高校的讲座中,关于「有前端经验的程序员如何转投SVG领域?」的问题,一起来看看计育韬老师的答复吧!

归零学习

由于 2016 年计育韬和林喆老师在制定《SVG AttributeName 白名单》时,已经剔除了部分原 W3C 中的高性能动画类型,且在微信和微博生态中不支持以 JavaScript 对 SVG 进行驱动和管理,因此 SVG 交互设计的代码体系与当下前端开发领域的知识图谱差异巨大。

加之微信生态中对<id>禁用,因此它的动画组合的逻辑都完全超乎常规动画设计思维。综上,归零学习(unlearn)对从前端转投入该领域的人来说变得至关重要。

当然,前端经验有助于开发者对结构框架(父子关系)的高效识别,但 SVG 毕竟隶属于 XML 时代下的 CSS 渲染表现,而非前端开发者烂熟于胸的 CSS-3 体系,所以计育韬老师认为只有敢于突破定式思维,从一个基本图形运动开始归零学习才能逐步掌握它的技术体系。

关于当下技术白名单的情况,可以参考:

举个例子

提到编组动画逻辑,计育韬老师在现场拿起了两瓶矿泉水举例:

“设想现在,我们计划通过点击某个按钮,让两瓶矿泉水彼此按相同距离分离。”按照常规的前端开发思路,必定是为两个瓶子标记两个<id>,随后通过 button.click 事件引发它们各自的平移。

但在



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。