如何实现支持小数的数字滚动动画

Hey there, let's fix that decimal issue in your number scroll animation! Your current code works great for integers, but since you're incrementing by 1 each time, it's skipping all the decimal values between your start and end target (like 79.57). Let's break down what's wrong and how to fix it.

What's Wrong With the Original Code? #

Your current code has two main issues:

• You're using rNo++ which adds 1 every iteration—this jumps right over decimal values entirely.
• The wTime calculation is tied to the integer range between start and end, which doesn't work when your target is a decimal. Plus, incrementing endPoints++ pushes your target past the actual value you want to reach.

The Fixed Code #

Here's a revised version that handles decimals smoothly, with consistent animation timing:

string resultPoints = ""; // Animation result display
float startPoints = 0f; // Starting value
float endPoints = 79.57f; // Target decimal value
float currentValue = startPoints;
float totalAnimationTime = 1.2f; // Total time you want the animation to take (in seconds)
float stepIncrement = 0.01f; // Small step to smooth decimal transitions

// Calculate how many steps we need and the wait time per step
float totalSteps = Mathf.Abs(endPoints - startPoints) / stepIncrement;
float waitPerStep = totalAnimationTime / totalSteps;

// Check if we're moving up or down in value
bool isGoingUp = endPoints > startPoints;

while ((isGoingUp && currentValue < endPoints) || (!isGoingUp && currentValue > endPoints))
{
    // Safely move towards the target without overshooting
    currentValue = Mathf.MoveTowards(currentValue, endPoints, stepIncrement);
    // Format to 2 decimal places to match your target (adjust as needed)
    resultPoints = currentValue.ToString("F2");
    
    yield return new WaitForSeconds(waitPerStep);
}

// Make sure we end exactly at the target value
resultPoints = endPoints.ToString("F2");

What Changed & Why? #

• Small Step Increment: Instead of adding 1 each time, we use stepIncrement = 0.01f to move in tiny chunks, which lets us show every decimal value along the way. You can tweak this number—smaller steps mean smoother animation, larger steps mean faster movement.
• Total Time Control: By setting totalAnimationTime, you decide how long the entire transition takes, no matter how big or small the value range is. This keeps the animation speed consistent across different target values.
• No Overshooting: Mathf.MoveTowards ensures we never go past the target value, which is super important for landing exactly on 79.57 instead of something like 80.
• Flexible Formatting: ToString("F2") formats the number to two decimal places, but you can change this to "F1" for one decimal, "F0" for integers, or even leave it out if you want all decimal places.
• Works Both Ways: The isGoingUp check makes the animation work whether you're going from 0 to 79.57 or 79.57 back to 0.

If you'd prefer the animation to move at a set speed (like 30 units per second) instead of a fixed total time, you can adjust the wait time calculation like this:

float unitsPerSecond = 30f; // Move 30 units every second
float waitPerStep = stepIncrement / unitsPerSecond;

This way, the animation will always move at the same rate, regardless of how far it has to go.

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