Как я могу определить ключевые кадры SCSS с JQuery, где используются цикл for и переменные? - PullRequest
Новая
       27

Как я могу определить ключевые кадры SCSS с JQuery, где используются цикл for и переменные?

0 голосов
/ 01 июня 2018

Я сейчас пытаюсь создать анимацию, которая превращает фон в серый.Для этого мне нужно знать, какой фон был раньше.К счастью, я могу сделать это в 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, а также синтаксис определения радиального градиента.

Заранее спасибо!

1 Ответ

0 голосов
/ 01 июня 2018

Вы можете сделать что-то вроде этого ( при условии, что все переменные существуют в вашем коде ) 

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