大家好,我是交互设计师计育韬。前不久,我在《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 交互设计技术规范》
上一篇:开源证券:给予中国重汽买入评级
下一篇:没有了