Часть 19. Анимирование <image> и <label>
Теперь разберем, как анимировать <image> и <label>. За анимацию отвечает тег <lerp>, то бишь Линейная Интерполяция. Позволяет делать плавные циклические или нециклические движения (повороты, перемещения и т.д.)
Это самый необычный тег, внутрь него вкладываются т.н. Теги-Контейнеры, которые описывают начальную (from) и конечную (to) точку анимации. Тег <lerp> вместе со своими контейнерами добавляется внутрь <image>
Атрибуты
Сначала рассмотрим атрибуты самого <lerp>
| Атрибут | Значение | Описание |
| loop | true/false По умолчанию: true | Включить/выключить циклический повтор анимации |
| reverse | true/false По умолчанию: true | Включить/выключить возврат из конечной позиции (to) в стартовую (from). Если false, то после того, как элемент дойдет до конечной позии (to), он моментально прыгнет в начальную позицию (from) |
| speed | Число | Задает скорость анимации. Чем больше, тем быстрее |
| start | Число Значение в секундах | Задержка перед началом анимации в секундах |
| wait | Число Значение в секундах | Задержка при достижении крайних точек (from/to). То бишь, дошел до to, выждал N-секунд, вернулся к from, опять выждал N-секунд и пошел к to и так по кругу |
Контейнеры <from> и <to>
Внутри контейнеров-тегов обязательно указываются все 3 вложенных тега. Даже если один из них никак не меняется
| Тег | Атрибуты | Пояснение |
| <persist/> | — | То же самое, что и атрибут persist, но в виде тега. Используйте, если добавляете вложенные теги |
| <scale/> | x= и y=Задает размер картинки в пикселях по XY координатам <scale x="20" y="20" /> | Масштабирование картинки по x и y |
| <rotation/> | angle | Угол поворота в градусах (от -360 до +360) |
| <position/> | x=, y=, z= Задает позицю по XYZ координатам. Z — бесполезна, отставляйте 0 <position x="240" y="-20" z="0" /> | Позиция по XYZ отностильно точки привязки (атрибут location) |
Использование
Пример (только спрайт) из официального стартового квеста Tutotrial.
Рука, указывающая на кнопку Журнала (шаг ask_log):
<image atlas="GUI" sprite="Hand" location="QuestLogButton">
<lerp loop="true" reverse="true" speed="2">
<from>
<position x="-160" y="-105"/>
<rotation angle="30"/>
<scale x="64" y="64"/>
</from>
<to>
<position x="-160" y="-135"/>
<rotation angle="30"/>
<scale x="64" y="64"/>
</to>
</lerp>
<persist/></image>
Пример (только текст) из квеста для карты SkyGrid. Проносящийся по экрану текст:
[Карта еще не выпущена]
Пример комбинированный (текст + спрайт):
<label pivot="Center" location="HUD" lang="RU">
Ай-Ай! Так [FF0000]нельзя[-]!
<position x="0" y="80" z="0"/>
<scale x="20" y="20"/>
<color r="1" g="1" b="1" a="1"/>
<persist/></label><image atlas="GUI" sprite="Hand" location="HUD">
<lerp loop="true" reverse="true" speed="1.5">
<from>
<position x="0" y="0" z="0"/>
<rotation angle="-15"/>
<scale x="64" y="64"/>
</from>
<to>
<position x="0" y="0" z="0"/>
<rotation angle="15"/>
<scale x="64" y="64"/>
</to>
</lerp>
<persist/></image><label pivot="Center" location="HUD" lang="RU">
Подойди и извинись!
<position x="0" y="-80" z="0"/>
<scale x="18" y="18"/>
<color r="1" g="1" b="1" a="1"/>
<persist/></label>
Как выглядит:
