Direct 2D #11. Анимации

Johnny_Depp18 часов назад

Direct 2D #11. Анимации

Уровень сложностиПростойВремя на прочтение12 минОхват и читатели7.3KWindows*C++*Разработка игр*ТуториалВсем здравствуйте! Появилось время, и сразу пишу вам. Сегодня поговорим об анимации.Важно понимать, что Direct2D - это низкоуровневое API, и готовых инструментов в нём нет. Однако существуют вспомогательные компоненты: Windows Animation Manager (WAM) и DirectComposition. Первый появился в Windows 7, второй - в Windows 8.

Windows Animation Manager создан для того, чтобы избавить разработчика от математических расчётов анимации: линейной интерполяции, кривых ускорения/замедления, эффекта пружины и т. д. Вы просто задаёте системе начальные и конечные координаты и эффект, а WAM самостоятельно вычисляет.

Ключевые понятия WAM:

IUIAnimationManager - главный управляющий объект. Он создаёт анимации, отслеживает их выполнение и уведомляет о необходимости обновления кадра.

IUIAnimationVariable - анимируемая переменная. Это может быть координата X, прозрачность, масштаб или любое другое число с плавающей запятой. Вы просто устанавливаете текущее значение переменной, например: «эта переменная сейчас равна 100».

IUIAnimationTransition - закон изменения переменной во времени. WAM предоставляет богатую библиотеку встроенных переходов: линейный (CreateLinearTransition) , с ускорением и замедлением (CreateAccelerateDecelerateTransition), "пружина" (CreateSpringTransition) и многие другие(IUIAnimationTransitionLibraryи IUIAnimationTransitionLibrary2).

IUIAnimationStoryboard - "раскадровка", контейнер, в который вы собираете один или несколько переходов и запускаете их одновременно или последовательно.

В качестве краткого примера (к 11-й статье вы уже умеете работать с графикой, и нет нужды каждый раз писать полотно текста) приведём фрагмент:

В классе окна или приложения объявим необходимые COM-указатели:

// WAM
CComPtr<IUIAnimationManager> pAnimManager;
CComPtr<IUIAnimationTransitionLibrary> pTransitionLibrary;
CComPtr<IUIAnimationVariable> pAnimVarX;
CComPtr<IUIAnimationStoryboard> pStoryboard;

// Direct2D (упрощённо)
CComPtr<ID2D1Factory> pD2DFactory;
CComPtr<ID2D1HwndRenderTarget> pRenderTarget;
CComPtr<ID2D1SolidColorBrush> pBrush;При старте приложения (например, в обработчике WM_CREATE) инициализируется COM и создаются необходимые объекты.

// Инициализация COM (если ещё не сделано) CoInitialize(NULL);

// Создаём менеджер анимаций
CoCreateInstance(CLSID_UIAnimationManager, NULL, CLSCTX_INPROC_SERVER,
IID_IUIAnimationManager, (void**)&pAnimManager);

// Создаём библиотеку переходов
CoCreateInstance(CLSID_UIAnimationTransitionLibrary, NULL, CLSCTX_INPROC_SERVER,
IID_IUIAnimationTransitionLibrary, (void**)&pTransitionLibrary);

// Создаём переменную для координаты X. Начальное значение = 0
pAnimManager->CreateAnimationVariable(0.0, &pAnimVarX);Ниже приведены пояснения к аргументам используемых функций.

CoInitialize:

Первый аргумент зарезервирован и должен принимать значение NULL.

CoCreateInstance:

Первый аргумент - идентификатор класса (CLSID).

Второй аргумент - указатель на управляющий IUnknown при агрегации объектов; в нашем случае агрегация не используется, поэтому передаётся NULL.

Третий аргумент - контекст выполнения. Значение CLSCTX_INPROC_SERVER указывает, что объект должен быть загружен как DLL внутри текущего процесса.

Четвёртый аргумент - указатель на требуемый интерфейс (IID).

Пятый аргумент - адрес переменной, в которую будет передан указатель на созданный объект.

CreateAnimationVariable:

Первый аргумент - начальное значение переменной (тип DOUBLE).

Второй аргумент - адрес указателя на объект IUIAnimationVariable, который будет создан.

Теперь предположим, что мы хотим анимировать перемещение прямоугольника из позиции X = 0 в X = 300 за 2 секунды с эффектом ускорения и замедления.

// Создаём переход: ускорение-замедление, длительность 2 сек, конечное значение 300
CComPtr<IUIAnimationTransition> pTransition;
pTransitionLibrary->CreateAccelerateDecelerateTransition(
2.0, // длительность в секундах
300.0, // конечное значение
0.3, // доля ускорения (0..1)
0.3, // доля замедления (0..1)
&pTransition
);

// Создаём раскадровку pAnimManager->CreateStoryboard(&pStoryboard);

// Добавляем переход к переменной X pStoryboard->AddTransition(pAnimVarX, pTransition);

// Запускаем раскадровку (сразу)
pStoryboard->Schedule(0); // 0 = запустить немедленноПояснение аргументов методов:

CreateAccelerateDecelerateTransition- уже описан в комментариях выше (параметры: ускорение, замедление и продолжительность).

CreateStoryboard(метод IUIAnimationManager):

Единственный аргумент - адрес указателя на создаваемую раскадровку (IUIAnimationStoryboard*). Раскадровка представляет собой контейнер, который может содержать один или несколько переходов, применяемых к разным переменным. Все переходы внутри одной раскадровки запускаются одновременно (если не заданы индивидуальные задержки).

AddTransition:

Первый аргумент - указатель на анимируемую переменную (IUIAnimationVariable*).

Второй аргумент - указатель на ранее созданный переход (IUIAnimationTransition*). Именно этот переход определяет закон изменения переменной во времени.

Schedule:

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

После вызова Schedule анимация начинает выполняться. WAM автоматически вычисляет промежуточные значения переменной в зависимости от текущего времени.

В каждом кадре (например, в обработчике WM_PAINT или в отдельном потоке рендеринга) необходимо выполнить следующие шаги:

Обновить состояние WAM, передав прошедшее время (с помощью метода Update менеджера).

Получить текущее значение анимируемой переменной (метод GetValue).

void RenderFrame()
{
// 1. Получить время, прошедшее с прошлого кадра (в секундах)
static double lastTime = 0.0;
double currentTime = GetCurrentTimeInSeconds(); // ваша функция получения времени
double deltaTime = currentTime - lastTime;
lastTime = currentTime;

// 2. Обновить WAM. Передаём дельту времени (в секундах)
HRESULT hr = pAnimManager->Update(deltaTime);
// Если анимация завершилась, можно обработать и, например, запустить обратную

// 3. Получить текущее значение X double currentX; pAnimVarX->GetValue(&currentX);

// 4. Начать рисование через Direct2D
pRenderTarget->BeginDraw();
pRenderTarget->Clear(D2D1::ColorF(D2D1::ColorF::White));

// Рисуем прямоугольник размером 50x50 в точке (currentX, 50)
D2D1_RECT_F rect = D2D1::RectF((FLOAT)currentX, 50.0f, (FLOAT)(currentX + 50), 100.0f);
pRenderTarget->FillRectangle(&rect, pBrush);

// Завершаем рисование
hr = pRenderTarget->EndDraw();
if (hr == D2DERR_RECREATE_TARGET) { /* восстановить ресурсы */ }
}Чтобы организовать движение прямоугольника туда-обратно, можно подписаться на событие завершения раскадровки. Однако для простоты реализуем циклическую проверку: в каждом кадре или в отдельном цикле отслеживаем состояние анимации, и если она завершена, запускаем новую раскадровку с обратным направлением движения.

// После pAnimManager->Update(deltaTime) можно проверить статус:
UI_ANIMATION_MANAGER_STATUS status;
pAnimManager->GetStatus(&status);
if (status == UI_ANIMATION_MANAGER_IDLE)
{
// Анимация завершена - запускаем новую в обратном направлении
// Получаем текущее значение X (например, 300)
double currentX;
pAnimVarX->GetValue(&currentX);
// Создаём переход к 0 (или в зависимости от текущего положения)
CComPtr<IUIAnimationTransition> pReverseTransition;
pTransitionLibrary->CreateAccelerateDecelerateTransition(
2.0, 0.0, 0.3, 0.3, &pReverseTransition
);
pAnimManager->CreateStoryboard(&pStoryboard);
pStoryboard->AddTransition(pAnimVarX, pReverseTransition);
pStoryboard->Schedule(0);
}Пояснение аргументов:GetStatusпринимает один аргумент - выходной указатель, в который записывается текущее состояние менеджера. Возможные значения:

UI_ANIMATION_MANAGER_IDLE - все анимации завершены, менеджер находится в состоянии ожидания;

UI_ANIMATION_MANAGER_BUSY - выполняется как минимум одна раскадровка;

UI_ANIMATION_MANAGER_INSUFFICIENT_PRIORITY - встречается крайне редко и сигнализирует о том, что запланированные анимации не могут быть выполнены из-за конфликтов приоритетов.

Обратите внимание: в вызов Update необходимо передавать актуальное время в секундах. Для его измерения с высокой точностью используйте функцию QueryPerformanceCounter.

double GetCurrentTimeInSeconds()
{
static LARGE_INTEGER frequency = {0};
if (frequency.QuadPart == 0)
QueryPerformanceFrequency(&frequency);
LARGE_INTEGER now;
QueryPerformanceCounter(&now);
return (double)now.QuadPart / (double)frequency.QuadPart;
}При завершении приложения необходимо освободить все COM-объекты (при использовании умных указателей освобождение произойдёт автоматически при выходе за область видимости). Windows Animation Manager не требует явного вызова завершения или освобождения ресурсов.

DirectComposition. Теперь - о нём.

Если WAM работает на центральном процессоре и лишь вычисляет промежуточные значения, то DirectComposition (доступный начиная с Windows 8) функционирует на стороне видеокарты в отдельном потоке. Он принимает готовые растровые изображения (битмапы), применяет к ним трансформации, эффекты и анимации, после чего выводит результирующую сцену на экран с высокой частотой кадров.

Ключевые понятия DirectComposition:

Визуальное дерево (Visual Tree) - иерархия объектов IDCompositionVisual. Корневой визуальный элемент привязан к окну, дочерние позиционируются относительно родителя. Это позволяет легко строить сложные сцены: например, персонаж представляет собой родительский элемент, а его руки и ноги - дочерние визуалы.

Свойства визуала - положение (OffsetX, OffsetY), трансформации (поворот, масштаб), прозрачность и эффекты.

IDCompositionAnimation - анимационная кривая, которую можно применить к любому свойству. Она задаётся в виде сегментов: линейных, кубических, синусоидальных или повторяющихся.

Commit - после настройки дерева и анимаций вызывается метод Commit, после чего все изменения применяются.

Перейдём к примеру.

// Direct3D 11 (нужен для DirectComposition)
CComPtr<ID3D11Device> m_pD3D11Device;

// DirectComposition
CComPtr<IDCompositionDevice> m_pDCompDevice;
CComPtr<IDCompositionTarget> m_pDCompTarget;
CComPtr<IDCompositionVisual> m_pVisual;

// Direct2D (для создания контента)
CComPtr<ID2D1Factory> m_pD2DFactory;
CComPtr<ID2D1Device> m_pD2DDevice;
CComPtr<ID2D1DeviceContext> m_pD2DContext;
CComPtr<ID2D1Bitmap1> m_pD2DBitmap;
CComPtr<ID2D1SolidColorBrush> m_pBrush;

// Объекты анимации
CComPtr<IDCompositionAnimation> m_pAnimX;
CComPtr<IDCompositionAnimation> m_pAnimOpacity;Инициализация. Данный шаг выполняется однократно при запуске приложения (например, в обработчике сообщения WM_CREATE).

HRESULT Init(HWND hwnd) { HRESULT hr = S_OK;

// 1. Создаём устройство Direct3D 11 с поддержкой BGRA (нужно для D2D)
D3D_FEATURE_LEVEL featureLevel;
hr = D3D11CreateDevice(
nullptr,
D3D_DRIVER_TYPE_HARDWARE,
nullptr,
D3D11_CREATE_DEVICE_BGRA_SUPPORT, // Важно для Direct2D!
nullptr,
0,
D3D11_SDK_VERSION,
&m_pD3D11Device,
&featureLevel,
nullptr
);

// 2. Получаем интерфейс IDXGIDevice от устройства D3D
CComPtr<IDXGIDevice> pDXGIDevice;
if (SUCCEEDED(hr))
hr = m_pD3D11Device->QueryInterface(&pDXGIDevice);

// 3. Создаём устройство DirectComposition[reference:1]
if (SUCCEEDED(hr))
hr = DCompositionCreateDevice(pDXGIDevice, __uuidof(IDCompositionDevice),
reinterpret_cast<void**>(&m_pDCompDevice));

// 4. Создаём цель композиции для нашего окна[reference:2]
if (SUCCEEDED(hr))
hr = m_pDCompDevice->CreateTargetForHwnd(hwnd, TRUE, &m_pDCompTarget);

// 5. Создаём фабрику Direct2D
if (SUCCEEDED(hr))
hr = D2D1CreateFactory(D2D1_FACTORY_TYPE_SINGLE_THREADED, &m_pD2DFactory);

// 6. Создаём устройство Direct2D из устройства DXGI
if (SUCCEEDED(hr))
hr = m_pD2DFactory->CreateDevice(pDXGIDevice, &m_pD2DDevice);

// 7. Создаём контекст устройства Direct2D
if (SUCCEEDED(hr))
hr = m_pD2DDevice->CreateDeviceContext(
D2D1_DEVICE_CONTEXT_OPTIONS_NONE,
&m_pD2DContext
);

// 8. Создаём битмап с контентом (квадрат 200x200)
if (SUCCEEDED(hr))
hr = CreateBitmapContent();

// 9. Создаём визуал и устанавливаем ему контент[reference:3]
if (SUCCEEDED(hr))
hr = m_pDCompDevice->CreateVisual(&m_pVisual);

if (SUCCEEDED(hr)) hr = m_pVisual->SetContent(m_pD2DBitmap);

// 10. Добавляем визуал в корень дерева
if (SUCCEEDED(hr))
hr = m_pDCompTarget->SetRoot(m_pVisual);

// 11. Создаём анимации if (SUCCEEDED(hr)) hr = CreateAnimations();

// 12. Применяем анимации к визуалу
if (SUCCEEDED(hr))
{
// Анимация положения по X: перемещаемся от 0 до 500
hr = m_pVisual->SetOffsetX(m_pAnimX);
}

if (SUCCEEDED(hr))
{
// Анимация прозрачности: применяем эффект с анимацией
CComPtr<IDCompositionEffect> pEffect;
hr = m_pDCompDevice->CreateEffect(&pEffect);
if (SUCCEEDED(hr))
{
// Устанавливаем анимацию для свойства Opacity эффекта
hr = pEffect->SetOpacity(m_pAnimOpacity);
if (SUCCEEDED(hr))
hr = m_pVisual->SetEffect(pEffect);
}
}

// 13. Фиксируем все изменения — анимация запускается![reference:4]
if (SUCCEEDED(hr))
hr = m_pDCompDevice->Commit();

return hr;
}Создание контента (квадрата). Функция, выполняющая отрисовку квадрата в битмапе Direct2D:

HRESULT CreateBitmapContent() { HRESULT hr = S_OK;

// Размер битмапа D2D1_SIZE_U size = D2D1::SizeU(200, 200);

// Свойства битмапа
D2D1_BITMAP_PROPERTIES1 props = D2D1::BitmapProperties1(
D2D1_BITMAP_OPTIONS_TARGET, // Можно использовать как цель
D2D1::PixelFormat(DXGI_FORMAT_B8G8R8A8_UNORM, // Формат пикселей
D2D1_ALPHA_MODE_PREMULTIPLIED),
96.0f, 96.0f // DPI
);

// Создаём битмап в контексте D2D
hr = m_pD2DContext->CreateBitmap(size, nullptr, 0, props, &m_pD2DBitmap);

// Рисуем на битмапе
if (SUCCEEDED(hr))
{
// Устанавливаем битмап как цель рисования
m_pD2DContext->SetTarget(m_pD2DBitmap);
m_pD2DContext->BeginDraw();
m_pD2DContext->Clear(D2D1::ColorF(D2D1::ColorF::CornflowerBlue));

// Создаём кисть и рисуем квадрат с обводкой
m_pD2DContext->CreateSolidColorBrush(
D2D1::ColorF(D2D1::ColorF::OrangeRed),
&m_pBrush
);

D2D1_RECT_F rect = D2D1::RectF(20.0f, 20.0f, 180.0f, 180.0f);
m_pD2DContext->FillRectangle(rect, m_pBrush);
m_pD2DContext->DrawRectangle(rect, m_pBrush, 5.0f);

hr = m_pD2DContext->EndDraw(); m_pD2DContext->SetTarget(nullptr); }

return hr;
}Создание анимаций. Здесь мы определяем, как именно будут меняться свойства во времени. Вместо использования WAM мы создаём анимационные кривые вручную.

HRESULT CreateAnimations() { HRESULT hr = S_OK;

// --- Анимация движения по X (от 0 до 500 и обратно) ---
hr = m_pDCompDevice->CreateAnimation(&m_pAnimX);
if (SUCCEEDED(hr))
{
// Начинаем с 0
m_pAnimX->SetAbsoluteBeginTime(0);
m_pAnimX->SetKeyframes(nullptr, 0, nullptr);

// Первый сегмент: за 3 секунды перемещаемся к 500 с замедлением в конце
m_pAnimX->AddCubic(
0.0f, // Начальное смещение по времени
0.0f, // Начальное значение
3.0f, // Длительность (сек)
500.0f, // Конечное значение
0.0f, 0.0f, // Контрольные точки (0 = линейная)
1.0f, 1.0f
);

// Второй сегмент: за 3 секунды возвращаемся к 0
m_pAnimX->AddCubic(
0.0f,
500.0f,
3.0f,
0.0f,
0.0f, 0.0f,
1.0f, 1.0f
);

// Указываем, что анимация должна повторяться бесконечно
m_pAnimX->SetRepeatCount(-1);
}

// --- Анимация прозрачности (от 0.2 до 1.0) ---
hr = m_pDCompDevice->CreateAnimation(&m_pAnimOpacity);
if (SUCCEEDED(hr))
{
m_pAnimOpacity->SetAbsoluteBeginTime(0);

// Плавно увеличиваем прозрачность от 0.2 до 1.0 за 2 секунды
m_pAnimOpacity->AddCubic(
0.0f, 0.2f, 2.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f
);

// Плавно уменьшаем обратно до 0.2 за 2 секунды
m_pAnimOpacity->AddCubic(
0.0f, 1.0f, 2.0f, 0.2f,
0.0f, 0.0f, 1.0f, 1.0f
);

// Бесконечное повторение m_pAnimOpacity->SetRepeatCount(-1); }

return hr; }Пояснение аргументов методов:

CreateAnimation- единственный аргумент - выходной указатель, в который записывается адрес созданного объекта анимации (IDCompositionAnimation*).

SetAbsoluteBeginTime- устанавливает абсолютное время начала анимации относительно глобальной временной шкалы DirectComposition. Передача 0 означает, что анимация начинается с момента применения к свойству (то есть с момента вызова Commit).

SetKeyframes

Этот метод предназначен для задания ключевых кадров (более сложный способ построения анимации). В приведённом коде переданы значения nullptr, 0, nullptr - это фактически сбрасывает предыдущие ключевые кадры (если они были). Аргументы метода:

первый - массив элементов

второй - количество элементов

третий - отдельный ключевой кадр (в данном случае не используется).

AddCubic(добавление кубического сегмента)

Первый сегмент (движение по оси X от 0 до 500 за 3 секунды):

аргумент 1 - смещение внутри анимации, с которого начинается сегмент (0.0f);

аргумент 2 - значение, соответствующее началу сегмента (0.0f);

аргумент 3 - длительность сегмента в секундах (3.0f);

аргумент 4 - конечное значение сегмента (координата X станет равной 500.0f);

аргументы 5-6 - координаты первой контрольной точки кубической кривой Безье;

аргументы 7-8 - координаты второй контрольной точки.

Второй сегмент (движение от 500 обратно к 0 за 3 секунды):

beginValue = 500.0f - старт с 500;

endValue = 0.0f - возврат к 0;

длительность - снова 3 секунды;

контрольные точки такие же (0,0 и 1,1), что обеспечивает плавный старт и финиш.

SetRepeatCount

Задаёт количество повторений анимации после её первого выполнения. Значение -1 (передаётся как UINT, но в коде используется литерал -1, который интерпретируется как 0xFFFFFFFF) означает бесконечное повторение.

Анимация прозрачности (второй блок) создаётся аналогично - через m_pAnimOpacity.

Важно отметить: после вызова Commit() анимация начинает выполняться автоматически, без какого-либо участия приложения. Вам не нужно организовывать цикл обновления, вызывать BeginDraw/EndDraw в каждом кадре или синхронизироваться с WAM. DirectComposition обрабатывает анимацию в отдельном потоке на видеокарте.

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

На этом всё. По сути, вы можете создать свой аналог этих библиотек. Думаю, следующая статья будет посвящена эффектам и слоям, а потом будет создан движок игры, например, как в Stardew Valley, опираясь исключительно на свои же статьи, показав, что не так страшен чёрт, как его рисуют, и что даже такая низкоуровневая API, как Direct2D, вполне подходит инди-разработчикам.

Но, возможно, перед этим я рассмотрю XAudio2 (чтобы в игре был звук), а также сетевую часть (Winsock).

По сути, основная цель - создать игру на тех инструментах, которые рекомендует Microsoft.При желании материально поддержать перевод и структурирование информации - средства можете отправить через сбор в ЮМани.Теги:• C++
• Windows
• Direct 2D
• разработка игрХабы:• Windows
• C++
• Разработка игр