仅使用Javascript模仿@keyframes规则

时间:2019-06-12 15:22:04

标签: javascript keyframe easing jquery-easing easing-functions

我正在尝试创建一个使用百分比获取数字的函数。 这个想法是这样的: 0%:100像素 50%:200px 75%:210px

因此,当我以25%的百分比运行函数时,它将0和50混合在一起,超过50%的比例相同。

听起来很复杂,总体思路是仅使用JS创建内容,以简化数字从0到100%的变化

我尝试使用常规百分比计算,但实际上不适用于3个或更多变量。

1 个答案:

答案 0 :(得分:0)

因此,如果您不介意,我可以自由地将您的百分比转换为JSON对象:

descriptionTextView.invalidateIntrinsicContentSize()

如果我们假设百分比始终是整数,则可以执行以下操作:

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

让我知道是否需要任何澄清。

注意:注释是通过代码进行的