关于用SCSS函数实现关键帧动画时间转百分比的技术问询

嘿，这个手动计算关键帧百分比的痛点我太感同身受了——每次改动画时长都要重新算一遍所有时间点的比例，简直是在浪费时间！你想到用SCSS函数来解决这个问题的思路完全正确，我帮你补全并优化一下这个函数，让它更实用：

完整的SCSS函数实现 #

@function secPerc($currentTime, $totalTime) {
  // 增加健壮性判断，避免除以0的错误
  @if $totalTime <= 0 {
    @warn "总动画时长不能为0或负数，请检查传入的参数！";
    @return 0%;
  }
  // 计算并返回百分比值，直接带%单位
  @return ($currentTime * 100%) / $totalTime;
}

实际使用示例 #

假设你要做一个总时长为12秒的复杂关键帧动画，需要在2秒、7秒、12秒处设置关键帧，直接调用这个函数就能自动计算百分比：

@keyframes fancyAnimation {
  #{secPerc(0, 12)} {
    opacity: 0;
    transform: scale(0.8);
  }
  #{secPerc(2, 12)} {
    opacity: 1;
    transform: scale(1);
  }
  #{secPerc(7, 12)} {
    transform: scale(1.2) rotate(5deg);
  }
  #{secPerc(12, 12)} {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
  }
}

为什么这能解决你的问题？ #

• 无需手动计算：所有时间点的百分比都由函数自动算出，省去了表格计算和复制粘贴的繁琐步骤
• 修改成本极低：如果后续需要调整动画总时长（比如从12秒改成9秒），只需要把所有secPerc函数的第二个参数改成9，所有关键帧的百分比会自动更新，不用逐个修改
• 更健壮：加入了参数校验，避免因误传0或负数时长导致的编译错误，还会给出明确的警告提示

内容的提问来源于stack exchange，提问作者Kaijin