example: add easings_box_anim

build.zig

@@ -239,6 +239,11 @@ pub fn build(b: *std.Build) !void {
             .path = "examples/shapes/easings_ball_anim.zig",
             .desc = "Renders a ball that demonstrates various easing functions",
         },
+        .{
+            .name = "easings_box_anim",
+            .path = "examples/shapes/easings_box_anim.zig",
+            .desc = "Renders a box that demonstrates various easing functions",
+        },
         .{
             .name = "following_eyes",
             .path = "examples/shapes/following_eyes.zig",

examples/shapes/easings_box_anim.zig

@@ -0,0 +1,127 @@
+const rl = @import("raylib");
+const reasing = @import("reasings.zig");
+
+//------------------------------------------------------------------------------------
+// Program main entry point
+//------------------------------------------------------------------------------------
+pub fn main() anyerror!void {
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    const screenWidth = 800;
+    const screenHeight = 450;
+
+    rl.initWindow(screenWidth, screenHeight, "raylib [shapes] example - easings box anim");
+    defer rl.closeWindow();
+
+    // Box variables to be animated with easings
+    var rec: rl.Rectangle = rl.Rectangle{
+        .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0,
+        .y = -100,
+        .height = 100,
+        .width = 100,
+    };
+    var rotation: f32 = 0.0;
+    var alpha: f32 = 1.0;
+
+    var state: i32 = 0;
+    var framesCounter: i32 = 0;
+
+    rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+
+    // Main game loop
+    while (!rl.windowShouldClose()) // Detect window close button or ESC key
+    {
+        // Update
+        //----------------------------------------------------------------------------------
+        switch (state) {
+            // Move box down to center of screen
+            0 => {
+                framesCounter += 1;
+
+                // NOTE: Remember that 3rd parameter of easing function refers to
+                // desired value variation, do not confuse it with expected final value!
+                rec.y = reasing.elasticOut(@floatFromInt(framesCounter), -100, @as(f32, @floatFromInt(rl.getScreenHeight())) / 2.0 + 100, 120);
+
+                if (framesCounter >= 120) {
+                    framesCounter = 0;
+                    state = 1;
+                }
+            },
+            // Scale box to an horizontal bar
+            1 => {
+                framesCounter += 1;
+                rec.height = reasing.bounceOut(@floatFromInt(framesCounter), 100, -90, 120);
+                rec.width = reasing.bounceOut(@floatFromInt(framesCounter), 100, @floatFromInt(rl.getScreenWidth()), 120);
+
+                if (framesCounter >= 120) {
+                    framesCounter = 0;
+                    state = 2;
+                }
+            },
+            // Rotate horizontal bar rectangle
+            2 => {
+                framesCounter += 1;
+                rotation = reasing.quadOut(@floatFromInt(framesCounter), 0.0, 270.0, 240);
+
+                if (framesCounter >= 240) {
+                    framesCounter = 0;
+                    state = 3;
+                }
+            },
+            // Increase bar size to fill all screen
+            3 => {
+                framesCounter += 1;
+                rec.height = reasing.circOut(@floatFromInt(framesCounter), 10, @floatFromInt(rl.getScreenWidth()), 120);
+
+                if (framesCounter >= 120) {
+                    framesCounter = 0;
+                    state = 4;
+                }
+            },
+            // Fade out animation
+            4 => {
+                framesCounter += 1;
+                alpha = reasing.sineOut(@floatFromInt(framesCounter), 1.0, -1.0, 160);
+
+                if (framesCounter >= 160) {
+                    framesCounter = 0;
+                    state = 5;
+                }
+            },
+            5 => {},
+            else => unreachable,
+        }
+
+        // Reset animation at any moment
+        if (rl.isKeyPressed(.space)) {
+            rec = rl.Rectangle{
+                .x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2.0,
+                .y = -100,
+                .height = 100,
+                .width = 100,
+            };
+            rotation = 0.0;
+            alpha = 1.0;
+            state = 0;
+            framesCounter = 0;
+        }
+        //----------------------------------------------------------------------------------
+
+        // Draw
+        //----------------------------------------------------------------------------------
+        rl.beginDrawing();
+        defer rl.endDrawing();
+
+        rl.clearBackground(.ray_white);
+
+        rl.drawRectanglePro(rec, rl.Vector2{
+            .x = rec.width / 2,
+            .y = rec.height / 2,
+        }, rotation, .fade(.black, alpha));
+
+        rl.drawText("PRESS [SPACE] TO RESET BOX ANIMATION!", 10, rl.getScreenHeight() - 25, 20, .light_gray);
+
+        //----------------------------------------------------------------------------------
+    }
+}