Developer knowledge network · moderated exchange

UnreliableCode コミュニティ

開発者リサーチ、リバース エンジニアリング、コーディング コミュニティ

Release

Custom Animated Tab Bar with Smooth Easing Transitions in Dear ImGui

imgui_artisan
UI Designer
MEMBER
担当者: 202
参加日: Apr 2019
投稿: 54
ありがとう: 28
1 か月前 · 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 か月前 · 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 か月前 · Jul 7, 2026 12:55 PM
#3

Integrated into our internal menu. Smooth 60 FPS transitions.