Developer knowledge network · moderated exchange

مجتمع الكود غير الموثوق به

أبحاث المطورين، مجتمع الهندسة العكسية والترميز

Knowledge indexيعيش
4Categories
919Threads
2.8Kدعامات
Release

Custom Animated Tab Bar with Smooth Easing Transitions in Dear ImGui

imgui_artisan
UI Designer
MEMBER
مندوب: 202
تاريخ الانضمام: Apr 2019
دعامات: 54
شكرًا: 28
1 months ago · Jul 6, 2026 8:53 PM
#1

Fluid tab animation system using exponential easing in C++:

CPP
float Lerp(float a, float b, float t) { return a + (b - a) * t; }

void DrawAnimatedTabBar(int& activeTab, const std::vector<const char*>& tabs) {
    static float indicatorPos = 0.0f;
    static float indicatorWidth = 80.0f;
    
    float targetPos = activeTab * 90.0f;
    indicatorPos = Lerp(indicatorPos, targetPos, ImGui::GetIO().DeltaTime * 12.0f);
    
    ImDrawList* dl = ImGui::GetWindowDrawList();
    ImVec2 p = ImGui::GetCursorScreenPos();
    
    // Draw animated glow indicator line
    dl->AddRectFilled(ImVec2(p.x + indicatorPos, p.y + 35.0f), ImVec2(p.x + indicatorPos + indicatorWidth, p.y + 38.0f), IM_COL32(0, 200, 255, 255), 2.0f);
    
    for (int i = 0; i < (int)tabs.size(); i++) {
        if (ImGui::Button(tabs[i], ImVec2(85, 30))) activeTab = i;
        ImGui::SameLine();
    }
    ImGui::NewLine();
}
vtable_slayer
Senior Reverser
MEMBER
مندوب: 215
تاريخ الانضمام: Mar 2018
دعامات: 86
شكرًا: 61
1 months ago · Jul 6, 2026 10:21 PM
#2

The sliding indicator bar looks like modern Electron / Flutter apps. Huge visual upgrade.

segfault_sam
Member
MEMBER
مندوب: 68
تاريخ الانضمام: Mar 2019
دعامات: 22
شكرًا: 57
1 months ago · Jul 7, 2026 12:55 PM
#3

Integrated into our internal menu. Smooth 60 FPS transitions.