SVGHMI: re-organize animate() to ensure that page fade-out is always visible, also make fade-out curve more aggressive to enhance visual feedback.
--- a/svghmi/svghmi.js Fri Jul 08 11:58:10 2022 +0200
+++ b/svghmi/svghmi.js Tue Jul 12 12:12:52 2022 +0200
@@ -59,32 +59,49 @@
// Called on requestAnimationFrame, modifies DOM
var requestAnimationFrameID = null;
function animate() {
- // Do the page swith if any one pending
- if(page_switch_in_progress){
- if(current_subscribed_page != current_visible_page){
- switch_visible_page(current_subscribed_page);
- }
-
- page_switch_in_progress = false;
-
- if(page_fading_in_progress){
- svg_root.classList.remove("fade-out-page");
- page_fading_in_progress = false;
- }
- }
-
- while(widget = need_cache_apply.pop()){
- widget.apply_cache();
- }
-
- if(jumps_need_update) update_jumps();
-
- apply_updates();
-
- pending_widget_animates.forEach(widget => widget._animate());
- pending_widget_animates = [];
+ let rearm = true;
+ do{
+ if(page_fading == "pending" || page_fading == "forced"){
+ if(page_fading == "pending")
+ svg_root.classList.add("fade-out-page");
+ page_fading = "in_progress";
+ if(page_fading_args.length)
+ setTimeout(function(){
+ switch_page(...page_fading_args);
+ },1);
+ break;
+ }
+
+ // Do the page swith if pending
+ if(page_switch_in_progress){
+ if(current_subscribed_page != current_visible_page){
+ switch_visible_page(current_subscribed_page);
+ }
+
+ page_switch_in_progress = false;
+
+ if(page_fading == "in_progress"){
+ svg_root.classList.remove("fade-out-page");
+ page_fading = "off";
+ }
+ }
+
+ while(widget = need_cache_apply.pop()){
+ widget.apply_cache();
+ }
+
+ if(jumps_need_update) update_jumps();
+
+ apply_updates();
+
+ pending_widget_animates.forEach(widget => widget._animate());
+ pending_widget_animates = [];
+ rearm = false;
+ } while(0);
requestAnimationFrameID = null;
+
+ if(rearm) requestHMIAnimation();
}
function requestHMIAnimation() {
@@ -212,14 +229,17 @@
}
-var page_fading_in_progress = false;
+var page_fading = "off";
+var page_fading_args = "off";
function fading_page_switch(...args){
- svg_root.classList.add("fade-out-page");
- page_fading_in_progress = true;
-
- setTimeout(function(){
- switch_page(...args);
- },1);
+ if(page_fading == "in_progress")
+ page_fading = "forced";
+ else
+ page_fading = "pending";
+ page_fading_args = args;
+
+ requestHMIAnimation();
+
}
document.body.style.backgroundColor = "black";
--- a/svghmi/widget_jump.ysl2 Fri Jul 08 11:58:10 2022 +0200
+++ b/svghmi/widget_jump.ysl2 Tue Jul 12 12:12:52 2022 +0200
@@ -145,7 +145,7 @@
emit "cssdefs:jump"
||
.fade-out-page {
- animation: fadeOut 0.6s both;
+ animation: cubic-bezier(0, 0.8, 0.6, 1) fadeOut 0.6s both;
}
@keyframes fadeOut {