Перед использованием анимации в скинах, вы должны описать ее в разделе animation. В своем скине вы можете использовать столько анимированных элементов, сколько вам угодно и назначать им любые имена. Рассмотрим пример:

...
  <skin>
    <animation name="anim1">
        <render image="frame0.jpg"/>
        <render image="frame1.jpg"/>
        <render image="frame2.jpg"/>
        <sequence name="on_Start">
          <frame render="0"/>
          <frame render="1"/>
          <frame render="2"/>
          <frame render="1"/>
          <frame render="0"/>
        </sequence>
    </animation>
    <paint animation="anim1"/>
  </skin>
...

Первым шагом задаем возможные состояния кадров (пожалуйста, обращайтесь к разделам render).
В приведенном выше примере, в анимации содержится 3 состояния кадров, которые используют 3 изображения - "frame0.jpg", "frame1.jpg" и "frame2.jpg".
Состояния кадров автоматически нумеруются, начиная с нуля.
Если кадры анимации собираются в одну картинку, то используются атрибуты "u" и "v" что бы задать смещения кадров в текстуре:

...
  <skin>
    <animation name="anim1">
        <render image="button.jpg" u="0" v="0"/>
        <render image="button.jpg" u="0" v="64"/>
        <render image="button.jpg" u="0" v="128"/>
        <sequence name="on_Start">
          <frame render="0"/>
          <frame render="1"/>
          <frame render="2"/>
          <frame render="1"/>
          <frame render="0"/>
        </sequence>
    </animation>
    <paint animation="anim1"/>
  </skin>
...

Следующим шагом задаем последовательности кадров (см. секции sequence и frame).
Последовательность содержит несколько состояний кадров с соответствующим индексом.
Имена последовательностей для разных виджетов могут быть разные.
Будьте осторожны - если сделаете ошибку в имени, виджет никогда не запустит вашу последовательность.
В примере выше есть только одна последовательность - "on_Start". она включает 5 кадров.
В результате вы увидите следующую последовательность состояний кадров: 0, 1, 2 ,1 ,0.
Скорость анимации контролируется атрибутом "fps" (кадров в секунду) для каждого кадра.
Если пропустите этот атрибут, "fps" будет по умолчанию равен "30".

...
    <sequence name="on_Start">
      <frame render="0" fps="15"/>
      <frame render="1" fps="20"/>
      <frame render="2" fps="25"/>
      <frame render="1" fps="0.1"/>
      <frame render="0"/>
    </sequence>
...

Некоторые виджеты используют анимацию для отображения процентных индикаторов (например, прогресс какого-то процесса - загрузки, заполненности и т.д.). В этом случае вместо секции sequence используется секция indicator:

...
    <animation name="indicator1">
        <render image="img1.jpg"/>
        <render image="img2.jpg"/>
        <render image="img3.jpg"/>
        <render image="img4.jpg"/>
        <indicator name="progress"/>
    </animation>
...