Как сделать анимацию After Effects отзывчивой для многих размеров устройства внутри приложения Ionic

Question

Я разрабатываю мобильное приложение для Android и ios в ионной структуре, которое содержит анимированный игровой элемент. В настоящее время я использую Adobe After Effects для анимации персонажа, который является частью игры.

Я экспортирую PNG-последовательность из After Effects и вставляю ее в свое приложение Ionic как последовательность фоновых изображений, которые составляют анимацию. Я использую TexturePacker для создания списков спрайтов и GSAP TweenMax для запуска анимации в javascript внутри углового контроллера.

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

Каков наилучший способ убедиться, что анимация игры выглядит хорошо на разных размерах и разрешениях устройства, которые там есть?

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

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

Answer 1

Вам нужно сделать изображение «подходящим» вашим div, содержащим фоновое изображение. Это делается с использованием свойства background-size. Просто добавьте эту строку в CSS:

background-size: 100%;