Developer knowledge network ยท moderated exchange

Komunitas Kode Tidak Dapat Diandalkan

Riset Pengembang, Rekayasa Terbalik & Komunitas Pengkodean

Knowledge indexHidup
4Categories
919Threads
2.8KPostingan
Release

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

imgui_artisan
UI Designer
MEMBER
Reputasi: 202
Tanggal Bergabung: Apr 2019
Postingan: 54
Terima kasih: 28
1 bulan yang lalu ยท 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
Reputasi: 215
Tanggal Bergabung: Mar 2018
Postingan: 86
Terima kasih: 61
1 bulan yang lalu ยท Jul 6, 2026 11:34 PM
#2

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

segfault_sam
Member
MEMBER
Reputasi: 68
Tanggal Bergabung: Mar 2019
Postingan: 22
Terima kasih: 57
1 bulan yang lalu ยท Jul 7, 2026 10:00 AM
#3

Integrated into our internal menu. Smooth 60 FPS transitions.