Имитация правила @keyframes с использованием только Javascript - PullRequest
Новая
       41

Имитация правила @keyframes с использованием только Javascript

0 голосов
/ 12 июня 2019

Я пытаюсь создать функцию, которая использует процент для получения числа.Идея состоит в том, чтобы получить что-то вроде этого: 0%: 100px 50%: 200px 75%: 210px

Так что, когда я запускаю свою функцию с процентом, равным 25%, она смешивает 0 и 50 вместе, то же самое для более 50%.

Звучит довольно сложно, общая идея состоит в том, чтобы создать что-то, используя только JS, что упростит числа, переходящие от 0 до 100%

Я пытался использовать регулярный процентный расчет,тем не менее, он не работает для 3 или более переменных.

1 Ответ

0 голосов
/ 12 июня 2019

Так что, если вы не возражаете, я позволил себе превратить ваш процент в объект JSON: 

let input = {
  0: 100,
  50: 200,
  75: 210,
};

Затем мы можем сделать что-то подобное, если предположить, что проценты всегда являются целыми числами:

let output = {};
let previous = null;
// for each whole percent
for(let keyPercent in input)
{
  // cast to number
  let currPercent = parseFloat(keyPercent);
  // get value of percent
  let currValue = input[currPercent];
  if (currValue != null) { // if value is present
    if (previous != null) { // and previous value is not null
      // find the step size (valDiff) / (percentDiff)
      let step = (currValue - previous.value) / (currPercent - previous.percent);
      // count to multiply by step
      let count = 0;
      // this produces the percent value for every step between previous.percent and currPercent
      for (let prevPercent = previous.percent; prevPercent <= currPercent; prevPercent += 1) {
        output[prevPercent] = previous.value + (step * count);
        count += 1;
      }
    }
    // set previous value
    previous = { percent: currPercent, value: currValue };
  }
}
console.log(output);

это выводит что-то вроде: 

0: 100
1: 102
2: 104
...
48: 196
49: 198
50: 200
51: 200.4
52: 200.8
...
73: 209.2
74: 209.6
75: 210

Дайте мне знать, если вам нужны какие-либо разъяснения.

Примечание: комментариисделаны в коде

...