计育韬:小工具开源——SVG反比补偿动画计算器
创始人
2026-05-09 18:23:41

大家好,我是交互设计师计育韬。前不久,我在《SVG 伸长图文 3.0 时代——谈谈非线性的双曲线反比补偿动画应用》谈到了采用高密度反比补偿的数学策略,实现 SVG 内容动画与展开动画同层的方法。

得益于移动端硬件性能的不断提升,就目前观察情况看动辄数百的步数看似天文数字,在实际渲染中其实表现不俗,不过细心的读者肯定注意到了,当时我推荐的是等距步长取值

这里说一声抱歉,在实际开发时,等距取值在总变化量较大的情况下容易产生反比函数在前段变化极快而初始补偿强度不足,进而画面持续抖动的问题。由此计老师想到,结合 keyTime = (i/steps)^exponent 设计一个前密后疏的散布方式,使得动画初期的补偿更为充分。

之后我将这些约束规则和一部分预生成的补偿参数交给 Agent 工具 Cola(Deepseek V4 模型条件),它很快学到了 SVG 领域下这种反比补偿策略的精髓,并支持一键部署到 Github 上。当然,具体的操作界面我额外做了一些风格优化,适合 PC 端开发进程中的 SVG 创作者:

现在你可以访问以下仓库在线求取参数值,并支持添加多段变化:

https://jzcreative.github.io/svg-inverse-compensation/

如有任何使用问题可以留言告诉我。

Parameter Reference

-END-

计育韬

复旦大学思想政治教育系学士

复旦大学哲学学院企业家哲学班(九期)

微信官方 SVG AttributeName 开发者

上海市青年企业家协会会员

上海市信息化青年人才协会会员

上海市知识分子联谊会会员

上海市青年创业家协会会员

上海市新的社会阶层人士联谊会会员

人工智能训练师(高级)

著有

设计学图书《Prezi 完全解读:从入门到精通》

传播学图书《硬核运营:技术流新媒体养成》

起草

T/CASME 1609—2024

中华人民共和国《融媒体 SVG 交互设计技术规范》

相关内容

热门资讯

俄外交部:互免签证成为推动俄中... 当地时间7月27日,俄罗斯外交部发言人扎哈罗娃在例行记者会上表示,俄中实行互免签证政策成为推动双方全...
大件闯深海 岚港逐新潮 拂晓,海天交界处漾开淡淡的鱼肚白,平潭金井港区已是机器轰鸣。滚装船稳稳靠向泊位,岸桥长臂往复起落,集...
事关未成年人!福建9月1日起施... 7月24日,省人大常委会会议表决通过《福建省预防未成年人犯罪条例》,将于9月1日起施行。《条例》聚焦...
“共享福伞”运营点服务约30万...   记者26日获悉,由福州城投集团所属福州市江北智慧城市建设运营有限公司运营的“共享福伞”项目——“...