menu button animation on open/close
authorEduardo <[email protected]>
Mon, 2 Oct 2023 21:31:03 +0000 (23:31 +0200)
committerEduardo <[email protected]>
Mon, 2 Oct 2023 21:31:03 +0000 (23:31 +0200)
themes/default/buttons/menu_button/MenuButton.gd
themes/default/buttons/menu_button/MenuButton.tscn

index 65ade97b72a6ee67063c6b96224bd63f790970c6..caceddd9bf04a5eab6db9559e534f4dda9cf0659 100644 (file)
@@ -2,9 +2,11 @@ extends Control
 
 signal scene_changed(scene_name)
 
-@onready var buttons = [$Button2, $Link, $Settings]
 @export var menu_opened = false
 
+@onready var buttons = [$Button2, $Link, $Settings]
+@onready var animation_player = $AnimationPlayer
+
 func _on_container_gui_input(event):
        if event is InputEventMouseButton:
                if event.pressed == true:
@@ -24,5 +26,11 @@ func _on_settings_pressed():
 ## Opens or closes the menu
 func toggle_menu():
        menu_opened = !menu_opened
+
+       if menu_opened:
+               animation_player.play("transform to close")
+       else:
+               animation_player.play_backwards("transform to close")
+
        for b in buttons:
                b.visible = menu_opened
index 1ca6184a0425c5900894b208e754c692204a7652..656ce12953d7a09384aab6482b7c264665d0d145 100644 (file)
@@ -1,4 +1,4 @@
-[gd_scene load_steps=7 format=3 uid="uid://b3077obpgfwkx"]
+[gd_scene load_steps=10 format=3 uid="uid://b3077obpgfwkx"]
 
 [ext_resource type="Script" path="res://themes/default/buttons/menu_button/MenuButton.gd" id="1_xr3em"]
 [ext_resource type="Texture2D" uid="uid://gltlg33raqr6" path="res://themes/default/resources/vector_whiteIcons.svg" id="3_imhq0"]
@@ -25,10 +25,169 @@ texture = ExtResource("3_imhq0")
 region_rect = Rect2(655, 102, 32, 32)
 modulate_color = Color(0.313726, 0.313726, 0.313726, 1)
 
+[sub_resource type="Animation" id="Animation_4f44d"]
+resource_name = "transform to close"
+length = 0.2
+tracks/0/type = "value"
+tracks/0/imported = false
+tracks/0/enabled = true
+tracks/0/path = NodePath("Container/Panel:rotation")
+tracks/0/interp = 1
+tracks/0/loop_wrap = true
+tracks/0/keys = {
+"times": PackedFloat32Array(0, 0.2),
+"transitions": PackedFloat32Array(1, 1),
+"update": 0,
+"values": [0.0, 0.785398]
+}
+tracks/1/type = "value"
+tracks/1/imported = false
+tracks/1/enabled = true
+tracks/1/path = NodePath("Container/Panel2:size")
+tracks/1/interp = 1
+tracks/1/loop_wrap = true
+tracks/1/keys = {
+"times": PackedFloat32Array(0, 0.2),
+"transitions": PackedFloat32Array(1, 1),
+"update": 0,
+"values": [Vector2(50, 10), Vector2(2, 10)]
+}
+tracks/2/type = "value"
+tracks/2/imported = false
+tracks/2/enabled = true
+tracks/2/path = NodePath("Container/Panel2:position")
+tracks/2/interp = 1
+tracks/2/loop_wrap = true
+tracks/2/keys = {
+"times": PackedFloat32Array(0, 0.2),
+"transitions": PackedFloat32Array(1, 1),
+"update": 0,
+"values": [Vector2(0, 20), Vector2(24, 20)]
+}
+tracks/3/type = "value"
+tracks/3/imported = false
+tracks/3/enabled = true
+tracks/3/path = NodePath("Container/Panel3:rotation")
+tracks/3/interp = 1
+tracks/3/loop_wrap = true
+tracks/3/keys = {
+"times": PackedFloat32Array(0, 0.2),
+"transitions": PackedFloat32Array(1, 1),
+"update": 0,
+"values": [0.0, -0.785398]
+}
+tracks/4/type = "value"
+tracks/4/imported = false
+tracks/4/enabled = true
+tracks/4/path = NodePath("Container/Panel3:position")
+tracks/4/interp = 1
+tracks/4/loop_wrap = true
+tracks/4/keys = {
+"times": PackedFloat32Array(0, 0.2),
+"transitions": PackedFloat32Array(1, 1),
+"update": 0,
+"values": [Vector2(0, 35), Vector2(5, 34)]
+}
+tracks/5/type = "value"
+tracks/5/imported = false
+tracks/5/enabled = true
+tracks/5/path = NodePath("Container/Panel:position")
+tracks/5/interp = 1
+tracks/5/loop_wrap = true
+tracks/5/keys = {
+"times": PackedFloat32Array(0, 0.2),
+"transitions": PackedFloat32Array(1, 1),
+"update": 0,
+"values": [Vector2(0, 5), Vector2(6, 6)]
+}
+
+[sub_resource type="Animation" id="Animation_12sbk"]
+length = 0.001
+tracks/0/type = "value"
+tracks/0/imported = false
+tracks/0/enabled = true
+tracks/0/path = NodePath("Container/Panel:rotation")
+tracks/0/interp = 1
+tracks/0/loop_wrap = true
+tracks/0/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 0,
+"values": [0.0]
+}
+tracks/1/type = "value"
+tracks/1/imported = false
+tracks/1/enabled = true
+tracks/1/path = NodePath("Container/Panel2:size")
+tracks/1/interp = 1
+tracks/1/loop_wrap = true
+tracks/1/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 0,
+"values": [Vector2(50, 10)]
+}
+tracks/2/type = "value"
+tracks/2/imported = false
+tracks/2/enabled = true
+tracks/2/path = NodePath("Container/Panel2:position")
+tracks/2/interp = 1
+tracks/2/loop_wrap = true
+tracks/2/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 0,
+"values": [Vector2(0, 20)]
+}
+tracks/3/type = "value"
+tracks/3/imported = false
+tracks/3/enabled = true
+tracks/3/path = NodePath("Container/Panel3:rotation")
+tracks/3/interp = 1
+tracks/3/loop_wrap = true
+tracks/3/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 0,
+"values": [0.0]
+}
+tracks/4/type = "value"
+tracks/4/imported = false
+tracks/4/enabled = true
+tracks/4/path = NodePath("Container/Panel3:position")
+tracks/4/interp = 1
+tracks/4/loop_wrap = true
+tracks/4/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 0,
+"values": [Vector2(0, 35)]
+}
+tracks/5/type = "value"
+tracks/5/imported = false
+tracks/5/enabled = true
+tracks/5/path = NodePath("Container/Panel:position")
+tracks/5/interp = 1
+tracks/5/loop_wrap = true
+tracks/5/keys = {
+"times": PackedFloat32Array(0),
+"transitions": PackedFloat32Array(1),
+"update": 0,
+"values": [Vector2(0, 5)]
+}
+
+[sub_resource type="AnimationLibrary" id="AnimationLibrary_1k3t5"]
+_data = {
+"RESET": SubResource("Animation_12sbk"),
+"transform to close": SubResource("Animation_4f44d")
+}
+
 [node name="MenuButton" type="Control"]
 layout_mode = 3
 anchors_preset = 0
 script = ExtResource("1_xr3em")
+metadata/_edit_vertical_guides_ = [25.0, -25.0]
+metadata/_edit_horizontal_guides_ = [-20.0, 20.0]
 
 [node name="Container" type="Control" parent="."]
 layout_mode = 1
@@ -49,6 +208,7 @@ layout_mode = 2
 offset_top = 5.0
 offset_right = 50.0
 offset_bottom = 15.0
+pivot_offset = Vector2(5, 5)
 mouse_filter = 2
 theme_override_styles/panel = SubResource("StyleBoxFlat_kocyh")
 
@@ -65,6 +225,7 @@ layout_mode = 2
 offset_top = 35.0
 offset_right = 50.0
 offset_bottom = 45.0
+pivot_offset = Vector2(5, 5)
 mouse_filter = 2
 theme_override_styles/panel = SubResource("StyleBoxFlat_kocyh")
 
@@ -95,6 +256,11 @@ offset_right = 24.0
 offset_bottom = 256.0
 theme_override_styles/normal = SubResource("StyleBoxTexture_jrhwr")
 
+[node name="AnimationPlayer" type="AnimationPlayer" parent="."]
+libraries = {
+"": SubResource("AnimationLibrary_1k3t5")
+}
+
 [connection signal="gui_input" from="Container" to="." method="_on_container_gui_input"]
 [connection signal="pressed" from="Link" to="." method="_on_link_pressed"]
 [connection signal="pressed" from="Settings" to="." method="_on_settings_pressed"]