纯代码实现动画效果

制作历程

因为没怎么系统性的学习过，我走了不少弯路，在实现动画效果之处，我使用的是纯主题……那其实都算不上是动画了，就是个切换效果而已，就这，还浪费了我一天的时间。

再之后，我使用了animation节点来制作动画效果，花了一天。好在成果不错，但是我一共有四个控件，每个控件都要实现鼠标进入动画和离开动画的话，一共得弄八个动画，然后信号也得绑定八个……总之，这不符合我精简的美学，所以我去研究了如何使用纯代码来实现动画效果，下面这个是纯代码实现的动画效果展示（写的时候考虑到之后要优化代码，就没有重复写四遍，所以只有前两个控件有动画）：

代码实现

首先，肯定是绑定信号嘛。这个在godot中有提供，我第一次设计代码的时候一般都是以直观为主，不考虑太多的优化，所以雏形大概是这样，我放出来的是鼠标进入的部分，退出的部分反着来就好：

func _on_start_mouse_entered():  # 绑定了一个鼠标进入的信号在start按钮上
	if $ScrollContainer/VBoxContainer/StartMenu.visible == false:  # 只有startmenu节点不可见的时候才有动画效果，点击后就会固定。
		$ScrollContainer/VBoxContainer/Start/Title.add_theme_font_size_override("font_size", 35)  # 字体增大
		$ScrollContainer/VBoxContainer/Start/Title.add_theme_color_override("font_color", "#013E41")  # 颜色变深
		$ScrollContainer/VBoxContainer/Start/Title/LTitle.size = Vector2(110, 28)  # 小标题的容器尺寸增大
		$ScrollContainer/VBoxContainer/Start/Title/LTitle.position = Vector2(49.5, -14)  # 由于字体变大了，而锚点是左上角，因此位置需要做出相应的改变
		$ScrollContainer/VBoxContainer/Start/Title/LTitle.add_theme_font_size_override("font_size", 19)  # 同样的代码，就不啰嗦了
		$ScrollContainer/VBoxContainer/Start/Title/LTitle.add_theme_color_override("font_color", "#4A475C")  # 同上
		# 线条的动画效果
		var tween = get_tree().create_tween()  # 获取一个tween节点，用于制作补间动画
		$ScrollContainer/VBoxContainer/Start/Title/Line2D.scale = Vector2(0, 1)  # 线条初始缩放值为（0, 1），相当于看不见
		tween.tween_property($ScrollContainer/VBoxContainer/Start/Title/Line2D, "scale", Vector2(1,1), 0.1)  # X轴从0伸展到1，实现动画效果

然后，我查找Godot官方手册发现get_tree函数其实是没必要的，tween继承自引用计数类，跳出函数域后就会自动销毁了，create_tween可以直接绑定在节点上，所以动画部分的代码变成了：

# 线条的动画效果
$ScrollContainer/VBoxContainer/Start/Title/Line2D.scale = Vector2(0, 1)
create_tween().tween_property($ScrollContainer/VBoxContainer/Start/Title/Line2D, "scale", Vector2(1,1), 0.1)