add app open/close animations using RCSS
- app-opening: 0.2s quadratic-out scale from 0.9 to 1.0 - app-closing: 0.15s quadratic-in scale from 1.0 to 0.9 - Avoided back-out easing to prevent flickering
This commit is contained in:
@@ -60,9 +60,6 @@ function loadAppContent_internal(app_id, app_path, skip_animation)
|
||||
|
||||
-- Load app content using C++ function
|
||||
if loadAppContent then
|
||||
-- Hide container before loading to prevent flash
|
||||
app_container:SetClass("app-hidden", true)
|
||||
|
||||
local success = loadAppContent(app_container, app_path)
|
||||
showLoading(false)
|
||||
|
||||
@@ -71,8 +68,17 @@ function loadAppContent_internal(app_id, app_path, skip_animation)
|
||||
current_app_path = app_path
|
||||
print("[Shell] App loaded: " .. app_id)
|
||||
|
||||
-- Show container after content is loaded
|
||||
app_container:SetClass("app-hidden", false)
|
||||
-- Play opening animation (unless skipped for initial load)
|
||||
if not skip_animation then
|
||||
app_container:SetClass("app-closing", false)
|
||||
app_container:SetClass("app-opening", true)
|
||||
-- Remove animation class after it completes
|
||||
if setTimeout then
|
||||
setTimeout(function()
|
||||
app_container:SetClass("app-opening", false)
|
||||
end, 200)
|
||||
end
|
||||
end
|
||||
|
||||
-- If home was loaded, populate apps dynamically
|
||||
if app_id == "home" then
|
||||
@@ -132,10 +138,19 @@ end
|
||||
|
||||
-- ===== NAVIGATION =====
|
||||
|
||||
-- Execute callback for navigation (animations removed to fix flash)
|
||||
-- Play closing animation then execute callback
|
||||
local function playCloseAnimation(callback)
|
||||
-- Just execute callback immediately - loadAppContent handles hiding
|
||||
if callback then callback() end
|
||||
if app_container and setTimeout then
|
||||
app_container:SetClass("app-opening", false)
|
||||
app_container:SetClass("app-closing", true)
|
||||
-- Wait for animation to complete before loading new content
|
||||
setTimeout(function()
|
||||
if callback then callback() end
|
||||
end, 150)
|
||||
else
|
||||
-- No animation support, execute immediately
|
||||
if callback then callback() end
|
||||
end
|
||||
end
|
||||
|
||||
-- Go back to previous app
|
||||
|
||||
@@ -51,9 +51,37 @@
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
/* App visibility - simple hide/show without complex animations */
|
||||
.app-hidden {
|
||||
/* App open/close animations */
|
||||
.app-opening {
|
||||
animation: 0.2s quadratic-out app-open;
|
||||
}
|
||||
|
||||
.app-closing {
|
||||
animation: 0.15s quadratic-in app-close;
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
@keyframes app-open {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes app-close {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1.0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
/* System navigation bar at bottom - always visible */
|
||||
|
||||
Reference in New Issue
Block a user