计育韬:小工具开源——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 交互设计技术规范》

相关内容

热门资讯

记者手记|时代大潮里的笃行与担... 来源:新华社记者手记|时代大潮里的笃行与担当新华社记者韩梁 朱瑞卿 伍岳9月的新德里草木葱郁,阳光热...
被骂 “君子之贼” 高若讷有点...     ◎宋慧敏    北宋景祐三年(1036年)一个春日,谏官高若讷接到一封信,写信人是刚刚入朝任...
烂缦胡同:烟火气里涌动青春创业...     近日,在“全国文化中心建设巡礼”主题采访活动中,北京青年报记者走进北京市西城区牛街街道烂缦胡...
科技赋能实体 金融护航出海     9月9日至13日,2026年中国国际服务贸易交易会(以下简称服贸会)在北京首钢园举办,今年的...
湖北大学最新或2023(历届)...   1、考生自最新或2023(历届)4月1日起可在湖北大学招生信息网(http://zsxx.hub...