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循环语法的帮助，以及定义径向渐变的语法。

提前致谢！

Answer 1

您可以这样做（假设您的代码中存在所有变量）

＆＃13;

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);

＆＃13;

如何使用JQuery定义SCSS关键帧，其中使用for循环和变量？

1 个答案: