Animate image effect properties (#836)

* Added auto animation system

* Animation to dialog

* Added Animated properties

* animate ranges

* formatting

* Fix missing commit

* Formatting

src/Classes/ImageEffect.gd

@@ -13,6 +13,12 @@ var preview_texture := ImageTexture.new()
 var preview: TextureRect
 var selection_checkbox: CheckBox
 var affect_option_button: OptionButton
+var animate_options_container: Node
+var animate_menu: PopupMenu
+var initial_button: Button
+var animate_bool = []
+var initial_values: PoolRealArray = []
+var selected_idx: int = 0  # the current selected cel to apply animation to
 var confirmed := false
 
 
@@ -33,6 +39,11 @@ func _ready() -> void:
 		selection_checkbox.connect("toggled", self, "_on_SelectionCheckBox_toggled")
 	if affect_option_button:
 		affect_option_button.connect("item_selected", self, "_on_AffectOptionButton_item_selected")
+	if animate_menu:
+		set_animate_menu(0)
+		animate_menu.connect("id_pressed", self, "_update_animate_flags")
+	if initial_button:
+		initial_button.connect("pressed", self, "set_initial_values")
 
 
 func _about_to_show() -> void:
@@ -50,6 +61,7 @@ func _about_to_show() -> void:
 
 
 func _confirmed() -> void:
+	selected_idx = 0
 	confirmed = true
 	var project: Project = Global.current_project
 	if affect == SELECTED_CELS:
@@ -94,13 +106,40 @@ func _confirmed() -> void:
 
 
 func commit_action(_cel: Image, _project: Project = Global.current_project) -> void:
-	pass
+	if confirmed and affect == SELECTED_CELS:
+		selected_idx += 1
 
 
 func set_nodes() -> void:
 	pass
 
 
+func set_animate_menu(elements: int) -> void:
+	initial_values.resize(elements)
+	initial_values.fill(0)
+	animate_bool.resize(elements)
+	animate_bool.fill(false)
+
+
+func set_initial_values() -> void:
+	pass
+
+
+func get_animated_value(project: Project, final: float, property_idx: int):
+	if animate_bool[property_idx] == true and confirmed:
+		var first: Vector2 = Vector2(initial_values[property_idx], 0)
+		var second: Vector2 = Vector2(final, 0)
+		var interpolation = float(selected_idx) / project.selected_cels.size()
+		return first.linear_interpolate(second, interpolation).x
+	else:
+		return final
+
+
+func _update_animate_flags(id: int) -> void:
+	animate_bool[id] = !animate_bool[id]
+	animate_menu.set_item_checked(id, animate_bool[id])
+
+
 func _commit_undo(action: String, undo_data: Dictionary, project: Project) -> void:
 	var redo_data := _get_undo_data(project)
 
@@ -145,6 +184,7 @@ func _on_SelectionCheckBox_toggled(_button_pressed: bool) -> void:
 
 func _on_AffectOptionButton_item_selected(index: int) -> void:
 	affect = index
+	animate_options_container.visible = bool(affect == SELECTED_CELS)
 	update_preview()
 
 

src/UI/Dialogs/ImageEffects/DropShadowDialog.gd

@@ -1,5 +1,6 @@
 extends ImageEffect
 
+enum Animate { OFFSET_X, OFFSET_Y }
 var offset := Vector2(5, 5)
 var color := Color.black
 var shader: Shader = load("res://src/Shaders/DropShadow.tres")
@@ -21,15 +22,33 @@ func set_nodes() -> void:
 	preview = $VBoxContainer/AspectRatioContainer/Preview
 	selection_checkbox = $VBoxContainer/OptionsContainer/SelectionCheckBox
 	affect_option_button = $VBoxContainer/OptionsContainer/AffectOptionButton
+	animate_options_container = $VBoxContainer/AnimationOptions
+	animate_menu = $"%AnimateMenu".get_popup()
+	initial_button = $"%InitalButton"
+
+
+func set_animate_menu(_elements) -> void:
+	# set as in enum
+	animate_menu.add_check_item("Offset X", Animate.OFFSET_X)
+	animate_menu.add_check_item("Offset Y", Animate.OFFSET_Y)
+	.set_animate_menu(Animate.size())
+
+
+func set_initial_values() -> void:
+	initial_values[Animate.OFFSET_X] = offset.x
+	initial_values[Animate.OFFSET_Y] = offset.y
 
 
 func commit_action(cel: Image, project: Project = Global.current_project) -> void:
+	.commit_action(cel, project)
+	var offset_x = get_animated_value(project, offset.x, Animate.OFFSET_X)
+	var offset_y = get_animated_value(project, offset.y, Animate.OFFSET_Y)
 	var selection_tex := ImageTexture.new()
 	if selection_checkbox.pressed and project.has_selection:
 		selection_tex.create_from_image(project.selection_map, 0)
 
 	var params := {
-		"shadow_offset": offset,
+		"shadow_offset": Vector2(offset_x, offset_y),
 		"shadow_color": color,
 		"selection": selection_tex,
 	}

src/UI/Dialogs/ImageEffects/DropShadowDialog.tscn

@@ -15,7 +15,7 @@ script = ExtResource( 2 )
 margin_left = 8.0
 margin_top = 8.0
 margin_right = 286.0
-margin_bottom = 316.0
+margin_bottom = 334.0
 
 [node name="AspectRatioContainer" type="AspectRatioContainer" parent="VBoxContainer"]
 margin_right = 278.0
@@ -123,6 +123,40 @@ text = "Selected cels"
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 selected = 0
 
+[node name="AnimationOptions" type="HBoxContainer" parent="VBoxContainer"]
+margin_top = 388.0
+margin_right = 326.0
+margin_bottom = 422.0
+
+[node name="Label" type="Label" parent="VBoxContainer/AnimationOptions"]
+margin_top = 10.0
+margin_right = 62.0
+margin_bottom = 24.0
+text = "Animate :"
+
+[node name="PanelContainer" type="PanelContainer" parent="VBoxContainer/AnimationOptions"]
+margin_left = 66.0
+margin_right = 205.0
+margin_bottom = 34.0
+size_flags_horizontal = 3
+
+[node name="AnimateMenu" type="MenuButton" parent="VBoxContainer/AnimationOptions/PanelContainer"]
+unique_name_in_owner = true
+margin_left = 7.0
+margin_top = 7.0
+margin_right = 132.0
+margin_bottom = 27.0
+focus_mode = 2
+text = "Properties"
+flat = false
+
+[node name="InitalButton" type="Button" parent="VBoxContainer/AnimationOptions"]
+unique_name_in_owner = true
+margin_left = 209.0
+margin_right = 326.0
+margin_bottom = 34.0
+text = "Set initial values"
+
 [connection signal="value_changed" from="VBoxContainer/OptionsContainer/XSpinBox" to="." method="_on_XSpinBox_value_changed"]
 [connection signal="value_changed" from="VBoxContainer/OptionsContainer/YSpinBox" to="." method="_on_YSpinBox_value_changed"]
 [connection signal="color_changed" from="VBoxContainer/OptionsContainer/ShadowColor" to="." method="_on_OutlineColor_color_changed"]

src/UI/Dialogs/ImageEffects/HSVDialog.gd

@@ -1,5 +1,6 @@
 extends ImageEffect
 
+enum Animate { HUE, SATURATION, VALUE }
 var shader: Shader = preload("res://src/Shaders/HSV.shader")
 var live_preview := true
 
@@ -25,17 +26,38 @@ func set_nodes() -> void:
 	preview = $VBoxContainer/AspectRatioContainer/Preview
 	selection_checkbox = $VBoxContainer/AffectHBoxContainer/SelectionCheckBox
 	affect_option_button = $VBoxContainer/AffectHBoxContainer/AffectOptionButton
+	animate_options_container = $VBoxContainer/AnimationOptions
+	animate_menu = $"%AnimateMenu".get_popup()
+	initial_button = $"%InitalButton"
+
+
+func set_animate_menu(_elements) -> void:
+	# set as in enum
+	animate_menu.add_check_item("Hue", Animate.HUE)
+	animate_menu.add_check_item("Saturation", Animate.SATURATION)
+	animate_menu.add_check_item("Value", Animate.VALUE)
+	.set_animate_menu(Animate.size())
+
+
+func set_initial_values() -> void:
+	initial_values[Animate.HUE] = hue_slider.value
+	initial_values[Animate.SATURATION] = sat_slider.value
+	initial_values[Animate.VALUE] = val_slider.value
 
 
 func commit_action(cel: Image, project: Project = Global.current_project) -> void:
+	.commit_action(cel, project)
+	var hue = get_animated_value(project, hue_slider.value / 360, Animate.HUE)
+	var sat = get_animated_value(project, sat_slider.value / 360, Animate.SATURATION)
+	var val = get_animated_value(project, val_slider.value / 360, Animate.VALUE)
 	var selection_tex := ImageTexture.new()
 	if selection_checkbox.pressed and project.has_selection:
 		selection_tex.create_from_image(project.selection_map, 0)
 
 	var params := {
-		"hue_shift_amount": hue_slider.value / 360,
-		"sat_shift_amount": sat_slider.value / 100,
-		"val_shift_amount": val_slider.value / 100,
+		"hue_shift_amount": hue,
+		"sat_shift_amount": sat,
+		"val_shift_amount": val,
 		"selection": selection_tex,
 		"affect_selection": selection_checkbox.pressed,
 		"has_selection": project.has_selection

src/UI/Dialogs/ImageEffects/HSVDialog.tscn

@@ -25,13 +25,13 @@ margin_bottom = 380.0
 
 [node name="AspectRatioContainer" type="AspectRatioContainer" parent="VBoxContainer"]
 margin_right = 332.0
-margin_bottom = 232.0
+margin_bottom = 200.0
 size_flags_vertical = 3
 
 [node name="Preview" type="TextureRect" parent="VBoxContainer/AspectRatioContainer"]
-margin_left = 50.0
-margin_right = 282.0
-margin_bottom = 232.0
+margin_left = 66.0
+margin_right = 266.0
+margin_bottom = 200.0
 rect_min_size = Vector2( 200, 200 )
 expand = true
 stretch_mode = 5
@@ -44,9 +44,9 @@ margin_right = 0.0
 margin_bottom = 0.0
 
 [node name="LiveSettings" type="HBoxContainer" parent="VBoxContainer"]
-margin_top = 236.0
+margin_top = 204.0
 margin_right = 332.0
-margin_bottom = 260.0
+margin_bottom = 228.0
 alignment = 1
 
 [node name="LiveCheckbox" type="CheckBox" parent="VBoxContainer/LiveSettings"]
@@ -70,31 +70,31 @@ prefix = "Preview delay:"
 suffix = "ms"
 
 [node name="HueSlider" parent="VBoxContainer" instance=ExtResource( 3 )]
-margin_top = 264.0
+margin_top = 232.0
 margin_right = 332.0
-margin_bottom = 288.0
+margin_bottom = 256.0
 min_value = -180.0
 max_value = 180.0
 prefix = "Hue:"
 
 [node name="SaturationSlider" parent="VBoxContainer" instance=ExtResource( 3 )]
-margin_top = 292.0
+margin_top = 260.0
 margin_right = 332.0
-margin_bottom = 316.0
+margin_bottom = 284.0
 min_value = -100.0
 prefix = "Saturation:"
 
 [node name="ValueSlider" parent="VBoxContainer" instance=ExtResource( 3 )]
-margin_top = 320.0
+margin_top = 288.0
 margin_right = 332.0
-margin_bottom = 344.0
+margin_bottom = 312.0
 min_value = -100.0
 prefix = "Value:"
 
 [node name="AffectHBoxContainer" type="HBoxContainer" parent="VBoxContainer"]
-margin_top = 348.0
+margin_top = 316.0
 margin_right = 332.0
-margin_bottom = 372.0
+margin_bottom = 340.0
 
 [node name="SelectionCheckBox" type="CheckBox" parent="VBoxContainer/AffectHBoxContainer"]
 margin_right = 164.0
@@ -114,6 +114,40 @@ text = "Selected cels"
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 selected = 0
 
+[node name="AnimationOptions" type="HBoxContainer" parent="VBoxContainer"]
+margin_top = 388.0
+margin_right = 326.0
+margin_bottom = 422.0
+
+[node name="Label" type="Label" parent="VBoxContainer/AnimationOptions"]
+margin_top = 10.0
+margin_right = 62.0
+margin_bottom = 24.0
+text = "Animate :"
+
+[node name="PanelContainer" type="PanelContainer" parent="VBoxContainer/AnimationOptions"]
+margin_left = 66.0
+margin_right = 205.0
+margin_bottom = 34.0
+size_flags_horizontal = 3
+
+[node name="AnimateMenu" type="MenuButton" parent="VBoxContainer/AnimationOptions/PanelContainer"]
+unique_name_in_owner = true
+margin_left = 7.0
+margin_top = 7.0
+margin_right = 132.0
+margin_bottom = 27.0
+focus_mode = 2
+text = "Properties"
+flat = false
+
+[node name="InitalButton" type="Button" parent="VBoxContainer/AnimationOptions"]
+unique_name_in_owner = true
+margin_left = 209.0
+margin_right = 326.0
+margin_bottom = 34.0
+text = "Set initial values"
+
 [node name="WaitApply" type="Timer" parent="."]
 wait_time = 0.1
 one_shot = true

src/UI/Dialogs/ImageEffects/OutlineDialog.gd

@@ -1,5 +1,6 @@
 extends ImageEffect
 
+enum Animate { THICKNESS }
 var color := Color.red
 var thickness := 1
 var pattern := 0
@@ -25,12 +26,28 @@ func set_nodes() -> void:
 	preview = $VBoxContainer/AspectRatioContainer/Preview
 	selection_checkbox = $VBoxContainer/OptionsContainer/SelectionCheckBox
 	affect_option_button = $VBoxContainer/OptionsContainer/AffectOptionButton
+	animate_options_container = $VBoxContainer/AnimationOptions
+	animate_menu = $"%AnimateMenu".get_popup()
+	initial_button = $"%InitalButton"
+
+
+func set_animate_menu(_elements) -> void:
+	# set as in enum
+	animate_menu.add_check_item("Thickness", Animate.THICKNESS)
+	.set_animate_menu(Animate.size())
+
+
+func set_initial_values() -> void:
+	initial_values[Animate.THICKNESS] = thickness
 
 
 func commit_action(cel: Image, project: Project = Global.current_project) -> void:
+	.commit_action(cel, project)
+	var anim_thickness = get_animated_value(project, thickness, Animate.THICKNESS)
+
 	if !shader:  # Web version
 		DrawingAlgos.generate_outline(
-			cel, selection_checkbox.pressed, project, color, thickness, false, inside_image
+			cel, selection_checkbox.pressed, project, color, anim_thickness, false, inside_image
 		)
 		return
 
@@ -40,7 +57,7 @@ func commit_action(cel: Image, project: Project = Global.current_project) -> voi
 
 	var params := {
 		"color": color,
-		"width": thickness,
+		"width": anim_thickness,
 		"pattern": pattern,
 		"inside": inside_image,
 		"selection": selection_tex,