Menues Animation Improved

Animation.js

@@ -111,6 +111,10 @@ function newAnimation () {
           }
         }
 
+        /* Frame per Seconds */
+
+        ANIMATION_FRAME_PER_SECONDS = Math.trunc(1000 / totalTimeConsumed)
+
         /* Performance Check */
         if (SHOW_ANIMATION_PERFORMACE === true) {
           row = 0
@@ -132,6 +136,8 @@ function newAnimation () {
           printLabel(DEBUG.variable3, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
           row++
           printLabel(DEBUG.variable4, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          row++
+          printLabel('Animation Frame Per Seconds: ' + ANIMATION_FRAME_PER_SECONDS, 300, 100 + row * 30, 1, 20, UI_COLOR.TITANIUM_YELLOW)
         }
       } else {
         browserCanvas.width = 1

FloatingSpace/CircularMenuItem.js

@@ -189,8 +189,8 @@ function newCircularMenuItem () {
       radiusGrowthFactor = 4
     }
 
-    thisObject.container.frame.position.x = thisObject.container.frame.radius * radiusGrowthFactor / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
-    thisObject.container.frame.position.y = thisObject.container.frame.radius * radiusGrowthFactor / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
+    thisObject.container.frame.position.x = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
+    thisObject.container.frame.position.y = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
 
     temporaryStatusPhysics()
 

FloatingSpace/FloatingObject.js

@@ -345,41 +345,45 @@ function newFloatingObject () {
 
   function thisObjectPhysics () {
                            // The radius also have a target.
+    let ANIMATION_STEP = Math.abs(thisObject.targetRadius - thisObject.rawRadius) / 5
 
-    if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 10) {
+    if (ANIMATION_STEP === 0) { ANIMATION_STEP = 10 }
+
+    if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= ANIMATION_STEP) {
       if (thisObject.container.frame.radius < thisObject.targetRadius) {
-        thisObject.container.frame.radius = thisObject.container.frame.radius + 10
+        thisObject.container.frame.radius = thisObject.container.frame.radius + ANIMATION_STEP
       } else {
-        thisObject.container.frame.radius = thisObject.container.frame.radius - 10
+        thisObject.container.frame.radius = thisObject.container.frame.radius - ANIMATION_STEP
       }
+
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     }
 
                            // The imageSize also have a target.
 
-    if (Math.abs(thisObject.currentImageSize - thisObject.targetImageSize) >= 10) {
+    if (Math.abs(thisObject.currentImageSize - thisObject.targetImageSize) >= ANIMATION_STEP) {
       if (thisObject.currentImageSize < thisObject.targetImageSize) {
-        thisObject.currentImageSize = thisObject.currentImageSize + 10
+        thisObject.currentImageSize = thisObject.currentImageSize + ANIMATION_STEP
       } else {
-        thisObject.currentImageSize = thisObject.currentImageSize - 10
+        thisObject.currentImageSize = thisObject.currentImageSize - ANIMATION_STEP
       }
     }
 
                            // The fontSize also have a target.
 
-    if (Math.abs(thisObject.currentFontSize - thisObject.targetFontSize) >= 1) {
+    if (Math.abs(thisObject.currentFontSize - thisObject.targetFontSize) >= ANIMATION_STEP / 10) {
       if (thisObject.currentFontSize < thisObject.targetFontSize) {
-        thisObject.currentFontSize = thisObject.currentFontSize + 1
+        thisObject.currentFontSize = thisObject.currentFontSize + ANIMATION_STEP / 10
       } else {
-        thisObject.currentFontSize = thisObject.currentFontSize - 1
+        thisObject.currentFontSize = thisObject.currentFontSize - ANIMATION_STEP / 10
       }
     }
 
-    if (Math.abs(thisObject.currentHierarchyRing - thisObject.targetHierarchyRing) >= 10) {
+    if (Math.abs(thisObject.currentHierarchyRing - thisObject.targetHierarchyRing) >= ANIMATION_STEP) {
       if (thisObject.currentHierarchyRing < thisObject.targetHierarchyRing) {
-        thisObject.currentHierarchyRing = thisObject.currentHierarchyRing + 10
+        thisObject.currentHierarchyRing = thisObject.currentHierarchyRing + ANIMATION_STEP
       } else {
-        thisObject.currentHierarchyRing = thisObject.currentHierarchyRing - 10
+        thisObject.currentHierarchyRing = thisObject.currentHierarchyRing - ANIMATION_STEP
       }
     }
 

Globals.js

@@ -46,7 +46,7 @@ const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED = 5
 const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES = 3
 
 let FONT_ASPECT_RATIO = 0.32;
-
+let ANIMATION_FRAME_PER_SECONDS
 
 const GET_CONTAINER_PURPOSE = {
   MOUSE_OVER: 1,