如何用JavaScript实现CSS渐变到另一渐变的动画效果

我来帮你搞定这个渐变动画的小问题！核心问题在于当distance超过300px时，你的百分比计算会变成负数，导致渐变位置低于起始状态。我们只需要给每个渐变的百分比值加一个下限判断，就能让起始渐变成为不可突破的最低状态，同时在distance降到100px时平滑过渡到目标效果。

问题分析 #

当distance > 300px时，(300-distance)/2这类计算会得到负数，这会让渐变的颜色位置异常偏移。我们需要确保所有百分比在distance≥300px时，都固定在起始状态的数值（也就是distance=300时的计算结果）。

解决方案：给百分比加下限 #

我们可以用Math.max()函数，让每个计算出的百分比不低于起始状态的值。先算出每个颜色在distance=300px时的起始百分比，然后在动态计算时取“当前计算值”和“起始值”中的较大者。

简化写法（直接嵌入判断）

直接在每个百分比计算里加入Math.max()，不需要额外函数：

$element.css('background', `linear-gradient(0deg, 
  rgba(255, 66, 42, 1) ${Math.max((300-distance)/2, 0)}%, 
  rgba(217, 60, 40, 1) ${Math.max((325.24-distance)/2, 2.62)}%, 
  rgba(174, 54, 39, 1) ${Math.max((352.1-distance)/2, 6.05)}%, 
  rgba(136, 48, 37, 1) ${Math.max((379.52-distance)/2, 9.76)}%, 
  rgba(104, 44, 36, 1) ${Math.max((407.42-distance)/2, 13.71)}%, 
  rgba(78, 40, 35, 1) ${Math.max((435.92-distance)/2, 17.96)}%, 
  rgba(58, 37, 34, 1) ${Math.max((465.26-distance)/2, 22.63)}%, 
  rgba(44, 35, 33, 1) ${Math.max((495.86-distance)/2, 27.93)}%, 
  rgba(35, 33, 33, 1) ${Math.max((528.84-distance)/2, 34.42)}%, 
  rgba(33, 33, 33, 1) ${Math.max((570.96-distance)/2, 45.48)}%
)`);

上面的固定数值（比如2.62%）是distance=300时的计算结果：(305.24-300)/2 = 2.62，其他数值以此类推。

更优雅的写法（用函数封装）

如果想让代码更易维护，可以把计算逻辑封装成函数：

// 预定义每个颜色的起始百分比（distance=300时的值）
const basePercents = [
  0,          // (300-300)/2
  2.62,       // (305.24-300)/2
  6.05,       // (312.1-300)/2
  9.76,       // (319.52-300)/2
  13.71,      // (327.42-300)/2
  17.96,      // (335.92-300)/2
  22.63,      // (345.26-300)/2
  27.93,      // (355.86-300)/2
  34.42,      // (368.84-300)/2
  45.48       // (390.96-300)/2
];

// 计算当前百分比，确保不低于起始值
function calcPercent(base, targetOffset, distance) {
  return Math.max((targetOffset - distance)/2, base);
}

// 应用渐变样式
$element.css('background', `linear-gradient(0deg, 
  rgba(255, 66, 42, 1) ${calcPercent(basePercents[0], 300, distance)}%, 
  rgba(217, 60, 40, 1) ${calcPercent(basePercents[1], 325.24, distance)}%, 
  rgba(174, 54, 39, 1) ${calcPercent(basePercents[2], 352.1, distance)}%, 
  rgba(136, 48, 37, 1) ${calcPercent(basePercents[3], 379.52, distance)}%, 
  rgba(104, 44, 36, 1) ${calcPercent(basePercents[4], 407.42, distance)}%, 
  rgba(78, 40, 35, 1) ${calcPercent(basePercents[5], 435.92, distance)}%, 
  rgba(58, 37, 34, 1) ${calcPercent(basePercents[6], 465.26, distance)}%, 
  rgba(44, 35, 33, 1) ${calcPercent(basePercents[7], 495.86, distance)}%, 
  rgba(35, 33, 33, 1) ${calcPercent(basePercents[8], 528.84, distance)}%, 
  rgba(33, 33, 33, 1) ${calcPercent(basePercents[9], 570.96, distance)}%
)`);

效果说明 #

• 当distance ≥ 300px时，所有渐变百分比都会固定在起始状态，不会再出现低于起始的偏移；
• 当distance从300px逐渐减小到100px时，每个颜色的百分比会平滑从起始值过渡到目标值，实现你想要的渐变动画效果。

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