Table of Contents

Using Easing Functions: Animating Position and Material Color

Easing functions are used in animations to create smooth transitions between values over a specified time. In this tutorial, we'll explore how to use easing functions not only to move a 3D object but also to interpolate its material color. This will allow us to create animations that blend both movement and visual effects.

What You'll Learn

  • How to create a 3D primitive (sphere).
  • How to implement easing functions for smooth transitions in animations.
  • How to animate the movement of a 3D object using easing functions.
  • How to interpolate and change the material color of a 3D object dynamically.

Code Walkthrough

using Stride.CommunityToolkit.Bepu;
using Stride.CommunityToolkit.Engine;
using Stride.CommunityToolkit.Mathematics;
using Stride.CommunityToolkit.Rendering.ProceduralModels;
using Stride.Core.Mathematics;
using Stride.Engine;
using Stride.Games;
using Stride.Input;
using Stride.Rendering.Materials;

// Time elapsed since the start of the animation
var elapsed = TimeSpan.Zero;

// Duration of the animation (2 seconds)
var duration = TimeSpan.FromSeconds(2);

// Target position (where the object will ease to)
var bottom = new Vector3(0, 2, 0);

// Starting position of the object
var startPosition = new Vector3(0, 8, 0);

// 3D entity to be animated
var entity = new Entity();

// Colour to interpolate to
Color color = Color.White;

using var game = new Game();

game.Run(new SceneSetup3D().UseBepu(), start: Start, update: Update);

void Start(Scene scene)
{
    // Create a 3D sphere primitive and assign the material to it
    entity = game.CreatePrimitive(Primitive3D.Sphere(), new BepuPhysicsOptions
    {
        Material = game.CreateMaterial(Color.White),
        Body = BodyMode.Kinematic,
    });

    // Add the sphere entity to the root scene
    entity.Scene = scene;

    var random = new Random();

    // Generate a random color to interpolate to
    color = random.NextColor();
}

// Update the scene every frame (for animations and input handling)
void Update(Scene scene, GameTime time)
{
    game.DebugTextSystem.Print("Press Space to reset", new Int2(5, 10));

    // Calculate the progress of the animation as a ratio between 0 and 1
    var progress = (float)(elapsed.TotalSeconds / duration.TotalSeconds);

    if (progress > 1.0f)
    {
        progress = 1.0f;
    }

    // Interpolate the position of the object using a quintic easing function
    var position = MathUtilEx.Interpolate(startPosition, bottom, progress, EasingFunction.QuinticEaseOut);

    Console.WriteLine(position);

    // Apply the new position to the entity
    entity.Transform.Position = position;

    // Interpolate the color using a linear easing function
    var diffuse = MathUtilEx.Interpolate(Color.White, color, progress, EasingFunction.Linear);

    // Apply the interpolated color to the material
    entity.Get<ModelComponent>().SetMaterialParameter(MaterialKeys.DiffuseValue, diffuse);

    // Update the elapsed time with the time since the last frame
    elapsed += time.Elapsed;

    // Reset the animation when the spacebar is pressed
    if (game.Input.IsKeyPressed(Keys.Space))
    {
        elapsed = TimeSpan.Zero;
    }
}

Code Breakdown

  • Position Animation: The MathUtilEx.Interpolate method is used with a quintic easing function to smoothly transition the sphere's position from its start to its end position.
  • Material Color Animation: The same interpolation approach is applied to change the color of the sphere’s material. A linear easing function is used to gradually change the color from white to a randomly generated color.
  • Resetting the Animation: The animation is reset each time the spacebar is pressed, allowing the movement and color transition to start over.

Running the Code

When you run the code, you'll see a 3D sphere smoothly moving from the starting position (8 units above the ground) to the bottom (2 units above the ground) over a duration of 2 seconds. At the same time, the sphere’s material color will gradually change from white to a randomly generated color. Press the spacebar to restart the animation: the sphere jumps back to the top and turns white again.

Summary

In this tutorial, you learned how to animate both the position and material color of a 3D object using easing functions. This technique allows you to create smooth and visually appealing transitions, which are essential for creating polished game experiences.

Going further

  • New to easing? Start with the Easing Basics example: the same motion written four ways, from plain maths to a Tween, with each lane's code on screen.
  • The same call reads more naturally from the curve itself: EasingFunction.QuinticEaseOut.Interpolate(startPosition, bottom, progress), and EasingFunction.QuinticEaseOut.Ease(progress) gives the bare 0 to 1 value. Both clamp progress to [0, 1], so the if (progress > 1) guard above is a habit, not a need.
  • To see every curve at once, with its graph and the motion it produces side by side, run the Easing Cheat Sheet example and press 1, 2 and 3 to compare the ease-in, ease-out and in-out families.
  • The curves are the classic set from Robert Penner's easing functions plus SmoothStep and SmootherStep; each Easing method documents the equation it is modelled after.
Edit this page