如何使用Quadratic easing函数生成指定区间与步数的数值序列？

Got it, let's break this down step by step to get your quadratic easing sequence sorted. The quadratic ease-in function you mentioned (quad_easing(t) = t * t) creates a slow-start, accelerating curve over the 0-1 range. To adapt this to your 5-to-90 interval with exactly 10 steps, we just need to map the eased values to your target range correctly.

Step-by-Step Breakdown #

• Calculate the total range: The span between your start (5) and end (90) is 90 - 5 = 85. This is the value we’ll scale our eased 0-1 values to.
• Pick the right t values for each step: Since we need 10 steps, there are 9 equal intervals between 0 and 1. Each t will be n/9 where n ranges from 0 to 9 (inclusive). For example:
  • First step: t = 0/9 = 0 (gives your starting value 5)
  • Middle step (5th): t = 4/9 ≈ 0.444
  • Final step: t = 9/9 = 1 (gives your end value 90)
• Map eased values to your range: For each t, compute the eased value with quad_easing(t), multiply by the total range (85), then add the starting value (5). The formula for each step is:

  final_value = 5 + (t * t) * 85
  

Code Implementation (JavaScript) #

Here’s a clean code snippet to generate the sequence directly:

const quadEasing = (t) => t * t;
const start = 5;
const end = 90;
const totalSteps = 10;
const range = end - start;
const easingSequence = [];

// Loop through each step (0 to 9 for 10 total values)
for (let stepIndex = 0; stepIndex < totalSteps; stepIndex++) {
  const t = stepIndex / (totalSteps - 1); // Normalize step to 0-1 range
  const easedProgress = quadEasing(t);
  const finalValue = start + easedProgress * range;
  easingSequence.push(finalValue);
}

console.log(easingSequence);

Generated Sequence #

Running this code gives you the following sequence (rounded to 2 decimal places for readability):
[5, 6.06, 9.22, 14.5, 21.89, 31.39, 43, 56.72, 72.56, 90]

If you’d prefer integer values, just wrap finalValue in Math.round():
[5, 6, 9, 15, 22, 31, 43, 57, 73, 90]

Why This Works #

We first normalize each step position to the 0-1 range the easing function expects, apply the quadratic curve to get the "accelerated progress", then scale that progress to fit your 5-to-90 interval. This ensures the sequence follows the classic slow-start quadratic curve while hitting your exact start/end points with the exact number of steps you need.

内容的提问来源于stack exchange，提问作者pizza0502