六边形页面动画

  • 2013 年写六边形指南[1]时用d3.js[2],当时 SVG 中 CSS 过渡有问题,用 JavaScript 过渡替代,如d3.select(".grid").transition().attr("transform", "rotate(30)")会使网格旋转,文本也跟着转,需用d3.select(".grid text").transition().attr("transform", "rotate(-30)")来恢复文本;
  • 2018 年用 Vue 重写六边形指南[3]时,自己写动画通过 JavaScript 值在 0 到 1 间变化并转为 0°到 30°的角度应用到网格和文本;
  • 2016 年 SVG2 增加vector-effect: non-rotation[4]来解决旋转文本问题,但 2018 年和 2024 年测试都不生效,有Chrome Bug[8]和Firefox bug[9];
  • 之前想用 CSS 过渡[10]但受浏览器限制,2018 年后浏览器新特性和修复很多,决定再试,因为编程更易且可能更快,如从rotate(0)rotate(30),JavaScript 过渡需每帧改变所有数字,有 64350 次 HTML 更新,而 CSS 过渡只需改变类一次,有 39 次更新;
  • 先确保 CSS 过渡可行,设计 CSS 缓动函数并在在线游乐场测试[11],然后分步骤在浏览器中测试实现更改:从transform属性到transform样式仍由 JavaScript 控制、重构样式使网格旋转文本不转、从内联styleclass并移到全局 CSS、添加 CSS 过渡规则、对不能用 CSS 过渡的元素写 JavaScript 近似值并确保同步;
  • 遇到 Safari 浏览器的一个 bug,元素进入屏幕时才开始动画,太晚,通过IntersectionObserver只在可见元素上触发动画来解决;
  • 很高兴能简化实现,希望动画在更多设备上运行更平滑,但在自己电脑上无法分辨。
阅读 5
0 条评论