Слои и анимации

Слои

Слои нужны, чтобы наводить порядок в рисунке и собирать из кадров анимацию.

Многослойный рисунок без анимации. Новый слой #12 набран жирным — значит, он ваш.

Два слоя есть на холсте всегда, и их нельзя ни удалить, ни изменить: fg (передний план) и bg (фон).

Свой слой создаётся кнопкой Добавить… (Add…) на панели слоёв — она предложит разместить его над текущим или под ним.

Собственные слои легко узнать: их номер набран жирным.

Номер слоя показывает порядок создания, а не позицию в стопке.

Удалить свой слой можно кнопкой Удалить кадр, но только когда на нём остался последний кадр. Как и другие изменения кадров, это можно отменить: кадр вернётся вместе с линиями.

Внимание

Будьте осторожны, когда рисуете не на fg, не на bg и не на своих слоях: владелец слоя может удалить вашу работу. Лучше создайте для рисования свой слой.

Отдельные линии можно перекидывать между слоями и кадрами — за это отвечает Переместить на кадр в инструменте «Выделение».

Анимации

Хотя инструментов пока немного, анимация может заметно преобразить ваши рисунки.

Старая анимация на scribble.pub — 4 кадра в секунду

Список слоёв работает ещё и как таймлайн анимации.

Частота кадров пока фиксированная — 8 кадров в секунду, то есть каждый кадр висит на экране 125 мс. Чтобы замедлить анимацию, задержите кадр кнопкой Повторить кадр.

Повтор — это не копия

Повторить кадр не заводит второй кадр, а показывает тот же самый ещё раз в другом месте таймлайна. Поэтому стоит дорисовать что-то в одном повторе — и это тут же появится во всех остальных.

Количество кадров на слоях может быть разным. О том, как они зацикливаются, — ниже.

Редактировать можно кадр в любой позиции. Скажем, в анимации из 4 кадров удаление кадра на 7-м тике удалит третий кадр: 7-й тик — это третий тик второго цикла.

Анимация живёт на своём слое

Добавлять кадры можно только на свой слой. Ни на стандартные fg и bg, ни на чужие слои кадр не поставить, так что любая анимация начинается с создания слоя — см. Слои выше.

Как создать простую анимацию

Маятник Ньютона — то, что у нас получится.

Мы не просто соберём эту анимацию по шагам, но и посмотрим, где всё может пойти не так и как это исправить.

Прежде чем начать

Есть идея туториала получше или пара приёмов, которыми хочется поделиться? Или вы уже сняли видео для YouTube, Instagram или TikTok о том, как рисуете у нас анимации?

Покажите! Расскажите сообществу или отметьте нас в Bluesky, X (Twitter), Instagram или TikTok — посмотрим и обязательно расскажем о вас.

Шаг 1 из 15

Нарисуйте неподвижную часть

Начните с того, что двигаться не будет. Эти три шара останутся на месте до самого конца.

Добавьте слой

На боковой панели откройте Слои и анимации (Layers and animations). Нажмите , выберите public layer (публичный слой), а затем above (сверху).

Первый анимированный элемент мы нарисуем в кадре 1 нового слоя.

Нарисуйте первый кадр анимации

Нарисуйте левый шар в его начальной позиции — вверху слева. В туториале мы берём синий, чтобы отличать этот слой от неподвижного фона.

Добавьте ещё один кадр

Нажмите Добавить… и выберите frame right (кадр справа).

Первый кадр замигает — это играет анимация. Нажмите паузу, чтобы не отвлекала.

Нарисуйте второй кадр

Включите кальку (Onion skinning) — появятся полупрозрачные силуэты предыдущих кадров (сколько именно, зависит от выбранной настройки). Это поможет правильно расположить второй шар.

Нарисуйте шар в середине падения.

Добавьте и нарисуйте третий кадр

Добавьте справа третий кадр и нарисуйте шар в нижней точке — там, где он ударяется о соседний.

Повторите средний кадр

Осталось вернуть шар назад. Выберите на таймлайне второй кадр, нажмите повторить кадр и перетащите появившийся кадр в конец слоя.

Посмотрите, что вышло

Нажмите воспроизведение и выключите кальку — левый шар качается.

Это ещё не маятник Ньютона, но простые анимации вы уже умеете создавать. Дальше мы анимируем правый шар и синхронизируем оба.

То же самое для правого шара

Заведите ещё один слой и повторите всё для правого шара: он стартует из нижней точки и уходит вверх вправо.

Посмотрите, что вышло

Снова нажмите воспроизведение — оба шара качаются, но каждый сам по себе.

Дальше синхронизируем их дорожки, чтобы исправить физику.

Выровняйте начальные кадры

Красный шар должен дождаться своей очереди. Выберите его неподвижный первый кадр и дважды нажмите повторить — теперь он стоит на месте, пока синий летит вниз.

Выровняйте средние кадры

Теперь наоборот — остановим синий. Выберите кадр 3 (нижняя точка) и повторите его 4 раза, чтобы он не двигался, пока качается красный.

Итого: кадр красного шара повторён дважды, кадр синего — четырежды. Смотрим, что из этого вышло.

Слои разной длины

Первый цикл выглядит правильно, но во втором красный шар срывается с места раньше времени — анимация рассыпалась.

Если активные кадры одного слоя накладываются на приглушённые кадры другого (то есть относящиеся к другому циклу), скорее всего, ваши циклы разъехались.

Выровняйте последние кадры

На тиках 7 и 8 красный шар действительно стоит, как и задумано. Только эти тики — уже второй цикл его слоя, а не конец первого.

Чтобы это исправить, добавьте в конец дорожки красного шара ещё 2 кадра ожидания: повторите неподвижный кадр и перетащите его в конец. Обе дорожки должны заканчиваться на одной колонке.

Готово

Дорожки сошлись, и цикл повторяется бесконечно без единого сбоя. Где ни остановись, граница между активными и приглушёнными кадрами проходит по одной линии на обоих слоях.

Режимы анимации

Если на слое есть хотя бы два кадра, для него можно выбрать режим анимации (Animation mode):

• Sequential (последовательный) — кадры идут по порядку. Режим по умолчанию, для обычной анимации.
• Random (случайный) — кадры идут вразнобой, причём у каждого зрителя по-своему.
• Roll (бросок) — тик выпадает случайно, когда кто-нибудь отправляет в чат команду /roll, и держится до следующего броска. Тик генерируется на сервере и одинаков для всех, поэтому режим отлично подходит, чтобы рисовать настольные игры и играть в них.

Что можно сделать в режиме Roll: игроки бросают кости командой /roll в чате.

Последовательный цикл

Последовательный режим крутится бесконечно. Если на слоях разное число кадров — скажем, 3 и 4 — и одно не делится на другое (в отличие от 3 и 6), циклы разъедутся, и по ходу анимации кадры будут складываться в разные сочетания (как раз такой случай разбирается в туториале выше).

Смотрите, что происходит: слой из 3 кадров закончил цикл и вернулся к первому кадру, а слой из 4 показывает в этот момент четвёртый. На следующем тике трёхкадровый перейдёт ко второму, а четырёхкадровый только вернётся к первому. Таймлайн прокручивается бесконечно, так что листать можно сколько угодно — пока не найдёте нужное сочетание кадров.

Если поставить анимацию на паузу, все последовательные слои замрут на том тике, на котором вы стоите в списке слоёв.

Случайный и бросок

Случайный и Бросок действуют на все слои одинаково — поэтому рисунок можно спокойно разложить по нескольким слоям, и вести себя они будут предсказуемо.

Самый простой случай: если на всех слоях одинаковое число кадров, в каждый момент на них показан один и тот же тик.

На примере ниже на слоях 3 и 4 нарисованы цифры от 1 до 3 — и число всегда совпадает.

Режим Random, на каждом слое одинаковое число кадров.

Под капотом кадр выбирается так: берётся случайный процент и применяется к каждому слою по отдельности. Например:

• На слое из 4 кадров процент меньше 25% даёт первый кадр, от 25% до 50% — второй, и так далее.
• На слое из 3 кадров процент меньше ~33% даёт первый кадр, от ~33% до ~66% — второй, и так далее.

Это стоит держать в голове, если хочется предсказуемого поведения от слоёв с разным числом кадров в случайном режиме или в броске.