Add Transition Animation

README.md

@@ -61,6 +61,7 @@ You can find more examples in `./examples/` folder.
     * Folder Open Dialog
     * Notification Support
 * Anchor System
+* Transition Animations (Supports Anchors)
 
 ## To-Do List
 
@@ -87,7 +88,6 @@ You can find more examples in `./examples/` folder.
 * Column Chart
 * Gauge chart
 * Area Graph
-* Transition Animations
 
 ## Installation
 

examples/transition_example.v

@@ -0,0 +1,15 @@
+import malisipi.mui as m
+import rand
+
+fn move_image(event_details m.EventDetails,mut app &m.Window, app_data voidptr){
+	unsafe{
+		go m.move_object(mut app, "image", [rand.int_in_range(0,500) or {0},rand.int_in_range(0,500) or {0}], 1)
+	}
+}
+
+mut app:=m.create(m.WindowConfig{ title:"Transition - MUI Example", height:600, width:600 })
+
+app.image(id:"image", x:300, y:300, height:100, width:100, path:"v-logo.png")
+app.button(id:"move", x:30, y:30, height:30, width:70, text:"Move", onclick:move_image)
+
+m.run(mut app)

examples/transition_example_with_anchor.v

@@ -0,0 +1,14 @@
+import malisipi.mui as m
+
+fn move_image(event_details m.EventDetails,mut app &m.Window, app_data voidptr){
+	unsafe{
+		go m.move_object(mut app, "image", ["# 25", "10%y +25"], 5)
+	}
+}
+
+mut app:=m.create(m.WindowConfig{ title:"Transition With Anchor - MUI Example", height:600, width:600 })
+
+app.image(id:"image", x:"5%x +15", y:"# 25", height:100, width:100, path:"v-logo.png")
+app.button(id:"move", x:30, y:30, height:30, width:70, text:"Move", onclick:move_image)
+
+m.run(mut app)

transitions.v

@@ -0,0 +1,37 @@
+module mui
+
+import time
+
+const (
+    transition_fps=60
+    transition_time=f64(1)/transition_fps
+)
+
+[unsafe]
+pub fn move_object(mut app &Window, object_id string, new_pos []int|string, move_time f64){
+    unsafe {
+        mut object:=app.get_object_by_id(object_id)[0]
+        total_step:=move_time/transition_time
+        old_x_raw,old_y_raw:=object["x_raw"].str,object["y_raw"].str
+
+        for now_step in 0..int(total_step) {
+            real_size:=app.gg.window_size()
+            window_info:=[real_size.width-app.x_offset-app.xn_offset,real_size.height-app.y_offset-app.yn_offset,real_size.width,real_size.height,app.scroll_x,app.scroll_y].clone()
+
+            calc_old_pos:=calc_points(window_info,old_x_raw,old_y_raw,object["w"].num,object["h"].num)
+            calc_new_pos:=calc_points(window_info,new_pos[0],new_pos[1],object["w"].num,object["h"].num)
+            object["x_raw"].str=int(calc_old_pos[0]+f32(calc_new_pos[0]-calc_old_pos[0])/total_step*now_step).str()
+            object["y_raw"].str=int(calc_old_pos[1]+f32(calc_new_pos[1]-calc_old_pos[1])/total_step*now_step).str()
+            time.sleep(transition_time*time.second)
+        }
+        for w,last_x_y in new_pos{
+            match last_x_y{
+                int{
+                    object[["x_raw","y_raw"][w]].str=last_x_y.str()
+                } string {
+                    object[["x_raw","y_raw"][w]].str=last_x_y
+                }
+            }
+        }
+    }
+}