如何用jQuery结合循环与变量定义SCSS关键帧实现背景渐变动画

首先，你遇到的核心问题是不能在对象字面量内部直接写循环，JavaScript不支持这种语法。我们需要先动态构建关键帧对象，再传递给$.keyframe.define。另外，还需要处理点击时捕获当前背景状态、计算过渡到灰色的步长，以及正确拼接径向渐变的CSS字符串。

下面是完整的解决方案：

步骤1：解析当前背景渐变状态 #

当点击页面时，我们需要先获取当前元素的计算样式，解析出两个径向渐变的位置和颜色参数：

function parseRadialGradient(gradientStr) {
  // 匹配椭圆位置和RGBA颜色
  const ellipseMatch = gradientStr.match(/ellipse at ([\d.]+%) ([\d.]+%)/);
  const rgbaMatch = gradientStr.match(/rgba\(([\d.]+), ([\d.]+), ([\d.]+), ([\d.]+)\)/);
  
  if (ellipseMatch && rgbaMatch) {
    return {
      x: ellipseMatch[1],
      y: ellipseMatch[2],
      r: parseFloat(rgbaMatch[1]),
      g: parseFloat(rgbaMatch[2]),
      b: parseFloat(rgbaMatch[3]),
      a: parseFloat(rgbaMatch[4])
    };
  }
  return null;
}

步骤2：动态构建关键帧并应用动画 #

在点击事件中，我们捕获当前状态、计算过渡步长、构建关键帧对象，最后重新定义并播放动画：

$('body').click(function() {
  // 获取当前计算的背景样式
  const computedBg = getComputedStyle(this).backgroundImage;
  // 分割两个径向渐变
  const gradientParts = computedBg.split('), radial-gradient(');
  if (gradientParts.length !== 2) return;
  
  // 清理渐变字符串格式
  const leftGradient = gradientParts[0].replace('radial-gradient(', '') + ')';
  const rightGradient = gradientParts[1].replace(')', '');
  
  // 解析两个渐变的参数
  const leftGradientData = parseRadialGradient(leftGradient);
  const rightGradientData = parseRadialGradient(rightGradient);
  
  if (!leftGradientData || !rightGradientData) return;
  
  // 目标灰色值（可根据需求调整）
  const targetGray = { r: 128, g: 128, b: 128 };
  
  // 计算每百分比的颜色变化步长
  const leftSteps = {
    r: (targetGray.r - leftGradientData.r) / 100,
    g: (targetGray.g - leftGradientData.g) / 100,
    b: (targetGray.b - leftGradientData.b) / 100
  };
  
  const rightSteps = {
    r: (targetGray.r - rightGradientData.r) / 100,
    g: (targetGray.g - rightGradientData.g) / 100,
    b: (targetGray.b - rightGradientData.b) / 100
  };
  
  // 构建关键帧对象
  const keyframeConfig = {
    name: 'backgroundChange'
  };
  
  // 循环生成0%到100%的关键帧
  for (let i = 0; i <= 100; i++) {
    // 计算当前帧的颜色值
    const currentLeftColor = {
      r: leftGradientData.r + leftSteps.r * i,
      g: leftGradientData.g + leftSteps.g * i,
      b: leftGradientData.b + leftSteps.b * i
    };
    
    const currentRightColor = {
      r: rightGradientData.r + rightSteps.r * i,
      g: rightGradientData.g + rightSteps.g * i,
      b: rightGradientData.b + rightSteps.b * i
    };
    
    // 拼接CSS背景字符串
    keyframeConfig[`${i}%`] = {
      background: `radial-gradient(ellipse at ${leftGradientData.x} ${leftGradientData.y}, rgba(${currentLeftColor.r.toFixed(2)}, ${currentLeftColor.g.toFixed(2)}, ${currentLeftColor.b.toFixed(2)}, ${leftGradientData.a}), transparent), radial-gradient(ellipse at ${rightGradientData.x} ${rightGradientData.y}, rgba(${currentRightColor.r.toFixed(2)}, ${currentRightColor.g.toFixed(2)}, ${currentRightColor.b.toFixed(2)}, ${rightGradientData.a}), transparent)`
    };
  }
  
  // 重新定义关键帧（覆盖原有同名动画）
  $.keyframe.define([keyframeConfig]);
  
  // 播放新的过渡动画（可调整时长和缓动函数）
  $(this).playKeyframe({
    name: 'backgroundChange',
    duration: '1500ms',
    timingFunction: 'ease-in-out',
    fillMode: 'forwards' // 动画结束后保持最终状态
  });
});

关键说明 #

1. 动态构建关键帧：我们先创建一个空对象keyframeConfig，然后通过循环为每个百分比添加对应的样式属性，这是解决你语法问题的核心。
2. 捕获当前状态：使用getComputedStyle获取元素当前的背景样式，再通过正则解析出渐变的位置和颜色，确保动画从当前视觉状态开始过渡。
3. 渐变字符串拼接：使用模板字符串正确拼接径向渐变的CSS语法，注意保留透明度和位置参数，确保生成的样式符合标准CSS格式。
4. 覆盖原有动画：由于我们使用了和原SCSS动画相同的名称backgroundChange，新定义的关键帧会覆盖原有动画，点击后会平滑过渡到灰色。

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