Anime

Anime - это возможность воспроизводить послойные анимации через тег anime.

Файл anime

Файл anime - это текстовый файл, который описывает последовательности преобразований слоев.

Последовательность

Чтобы за одну секунду сдвинуть окно сообщений на 100 пикселей вправо, запишите в файле anime следующую последовательность.

# Блок описывает последовательность для анимации.
# Имя блока может быть любым и ни на что не влияет.
move {
    # Это указатель слоя.
    layer: msg;

    # Это указатели времени. (в секундах)
    start: 0.0;
    end: 1.0;

    # Это указатели исходной позиции. 'r0' означает относительное значение '0'.
    from-x: r0;
    from-y: r0;

    # Это указатель исходной прозрачности.
    from-a: 255;

    # Это указатели конечной позиции. 'r100' означает относительное значение '100'.
    to-x: r100;
    to-y: r0;

    # Это указатель конечной прозрачности.
    to-a: 255;
}

Структура слоев

Ниже приведена структура слоев в порядке снизу вверх.

Масштабирование и поворот

# Увеличить масштаб слоя `effect1` до 2.0x и повернуть на 360 градусов за 3 секунды.
test1 {
    layer: effect1;
 
    start: 0.0;
    end: 3.0;

    from-x: 0;
    from-y: 400;
    from-a: 255;

    to-x: 0;
    to-y: 400;
    to-a: 255;

    # Центр масштабирования и поворота
    center-x: 600;
    center-y: 100;

    # Коэффициенты масштабирования
    from-scale-x: 1.0;
    from-scale-y: 1.0;
    to-scale-x: 2.0;
    to-scale-y: 2.0;
 
    # Поворот (+ вправо, - влево)
    from-rotate: 0.0;
    to-rotate: -360;
}

# Обратное действие.
test2 {
    layer: effect1;

    start: 3.0;
    end: 6.0;

    from-x: 0;
    from-y: 400;
    from-a: 255;

    to-x: 0;
    to-y: 400;
    to-a: 255;

    center-x: 600;
    center-y: 100;

    from-scale-x: 2.0;
    to-scale-x: 1.0;

    from-scale-y: 2.0;
    to-scale-y: 1.0;

    from-rotate: -360;
    to-rotate: 0;
}