javascript - 如何在使用 for 循环和变量的 JQuery 中定义 SCSS 关键帧？

Question

我目前正在尝试创建一个将背景淡化为灰色的动画。为此，我需要知道之前的背景是什么。幸运的是，我可以在 Javascript/JQuery 中执行此操作（我正在使用 JQuery 执行此操作，因为我相信它更容易）。目前，网页的背景随着时间的推移随着 SCSS 的变化而变化，但根据动画中的时间，每当点击页面时，动画将变为灰色。

以前我用 SCSS 做到了这一点：

@keyframes backgroundChange{

@for $i from 0 through 900{

    $percentage: $i * 0.11111111111111111111111111111111111111; 
    //defines what percentage to display a frame

    ...

    #{$percentage * 1%} {
    //This is like saying '$percentage%': ...

        @if $i < 100 {

            background: radial-gradient(ellipse at $xLeftPercent $yLeftPercent, rgba(218.75,62.5 + $i * 0.625,62.5, 0.5), transparent),
                        radial-gradient(ellipse at $xRightPercent $yRightPercent, rgba(140,80 + $i * 0.4,40, 0.5), transparent);

            ...

如您所见，我的动画淡化了径向渐变的颜色和位置。我想做同样的事情，方法是从动画所在的地方淡出到渐变淡出到灰色。我在如何在 JQuery 中解决这个问题时遇到了问题。我将替换相同的关键帧，所以我怀疑它会类似于以下内容：

$.keyframe.define([{

    name: 'backgroundChange',

    for (i=0; i<=100; i++){

        `${i}%`: {background: radial-gradient(ellipse at `${xLeftPercent}` `${yLeftPercent}`, rgba(leftR + leftRStep * i,leftG + leftGStep * i,leftB + leftBStep * i, 0.5), transparent),
                              radial-gradient(ellipse at `${xRightPercent}` `${yRightPercent}`, rgba(rightR + rightRStep * i,rightG + rightGStep * i,rightB + rightBStep * i, 0.5), transparent)}

    }

}]);

我的方法的问题是关键帧定义是预期的，例如：

$.keyframe.define([{

    name: 'backgroundChange',

    '0%': ...,
    '1%': ...,

          ...,

    '100%': ...
}]);

我真的可以使用这个 for 循环的语法帮助，以及定义径向梯度的语法。

提前致谢！

标签： javascriptjquerycssanimationcss-animations

Answer 1

你可以做这样的事情（假设所有变量都存在于你的代码中）

var xLeftPercent = 0,
    yLeftPercent = 0,
    leftR = 0,
    leftRStep = 1,
    leftG = 0,
    leftGStep = 1,
    leftB = 0,
    leftBStep = 1,
    xRightPercent = 0,
    yRightPercent = 0,
    rightR = 0,
    rightRStep = 1,
    rightG = 0,
    rightGStep = 1,
    rightB = 0,
    rightBStep = 1;

var keyframe = {name:'backgroundChange'},
    frames = Array(101).fill().map((v,i)=>(
    {[`${i}%`]:`{ background: radial-gradient(ellipse at ${xLeftPercent} ${yLeftPercent}, rgba(${leftR + leftRStep * i},${leftG + leftGStep * i},${leftB + leftBStep * i}, 0.5), transparent),
radial-gradient(ellipse at ${xRightPercent} ${yRightPercent}, rgba(${rightR + rightRStep * i},${rightG + rightGStep * i},${rightB + rightBStep * i}, 0.5), transparent)}`}
    ));
    
Object.assign(keyframe, ...frames);

// uncomment the following in your code
//$.keyframe.define([keyframe]);

console.log(keyframe);