Developer knowledge network · moderated exchange

Społeczność UnreliableCode

Badania programistów, inżynieria wsteczna i społeczność programistów

Knowledge indexNa żywo
4Categories
919Threads
2.8KPosty
Release

Custom Animated Tab Bar with Smooth Easing Transitions in Dear ImGui [v2.4 Technical Discussion]

imgui_artisan
UI Designer
MEMBER
Rozpustnik: 202
Data dołączenia: Apr 2019
Posty: 54
Dzięki: 28
1 miesięcy temu · Jul 6, 2026 6:28 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
Rozpustnik: 215
Data dołączenia: Mar 2018
Posty: 86
Dzięki: 61
1 miesięcy temu · Jul 6, 2026 11:34 PM
#2

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

segfault_sam
Member
MEMBER
Rozpustnik: 68
Data dołączenia: Mar 2019
Posty: 22
Dzięki: 57
1 miesięcy temu · Jul 7, 2026 10:00 AM
#3

Integrated into our internal menu. Smooth 60 FPS transitions.