This translation is community contributed and may not be up to date. We only maintain the English version of the documentation. Read this tutorial in English
Анимация главного меню — пример проекта
В этом примере проекта, который можно открыть из редактора или скачать с GitHub, мы показываем эффекты для оформления главного меню. Меню содержит фон и два пункта. Проект уже настроен: в нём есть menu.gui и menu.gui_script с кодом ниже. Графические ресурсы добавлены в атлас images.atlas и назначены узлам в menu.gui.
Для фона и двух пунктов меню используются одни и те же анимации, но с разными задержками. Это настраивается в init() ниже.
Первая анимация заставляет каждый узел плавно появляться, одновременно масштабируясь с 70% до 110%.
Это выполняется в anim1().
Во время следующих анимаций масштаб меняется туда и обратно: с 110% до 98%, затем до 106% и после этого до 100%. Так получается эффект упругого отскока; он реализован в anim2(), anim3() и anim4().
Для фона в конце добавлено небольшое дополнительное затухание, которое выполняется в anim5().
-- file: menu.gui_script
-- the functions animX represents the animation time-line
-- first is anim1 executed, when finished anim2 is executed, etc
-- anim1 to anim4 creates a bouncing rubber effect.
-- anim5 fades down alpha and is only used for the background
local function anim5(self, node)
if gui.get_node("background") == node then
-- special case for background. animate alpha to 60%
local to_color = gui.get_color(node)
to_color.w = 0.6
gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_OUTCUBIC, 2.4, 0.1)
end
end
local function anim4(self, node)
-- animate scale to 100%
local s = 1
gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.24, 0, anim5)
end
local function anim3(self, node)
-- animate scale to 106%
local s = 1.06
gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.24, 0, anim4)
end
local function anim2(self, node)
-- animate scale to 98%
local s = 0.98
gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.24, 0, anim3)
end
local function anim1(node, d)
-- set scale to 70%
local start_scale = 0.7
gui.set_scale(node, vmath.vector4(start_scale, start_scale, start_scale, 0))
-- get current color and set alpha to 0 to fade up
local from_color = gui.get_color(node)
local to_color = gui.get_color(node)
from_color.w = 0
gui.set_color(node, from_color)
-- animate alpha value from 0 to 1
gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_INOUTCUBIC, 0.4, d)
-- animate scale from %70 to 110%
local s = 1.1
gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUTCUBIC, 0.4, d, anim2)
end
function init(self)
-- start animations for all nodes
-- background, button-boxes and text are animated equally
-- d is the animation start delay
local d = 0.4
anim1(gui.get_node("new_game"), d)
anim1(gui.get_node("new_game_shadow"), d)
anim1(gui.get_node("new_game_button"), d)
d = 0.3
anim1(gui.get_node("quit"), d)
anim1(gui.get_node("quit_shadow"), d)
anim1(gui.get_node("quit_button"), d)
d = 0.1
anim1(gui.get_node("background"), d)
end