Как сделать анимацию After Effects адаптивной для устройств разных размеров в приложении Ionic
Я разрабатываю мобильное приложение для Android и IOS в ионной среде, которая содержит анимированный игровой элемент. В настоящее время я использую Adobe After Effects для анимации персонажа, который является частью игры.
Я экспортирую последовательность PNG из After Effects и внедряю ее в свое приложение Ionic в виде последовательности фоновых изображений, составляющих анимацию. Я использую TexturePacker для создания листов спрайтов и GSAP TweenMax для запуска анимации в javascript внутри углового контроллера.
Я нацеливаюсь на ios и android, поэтому мне нужно, чтобы анимация выглядела хорошо на самых разных экранах и разрешениях устройств. Когда приложение переходит в режим "игры", изображения должны занимать весь экран.
Как лучше всего обеспечить, чтобы анимация игры выглядела хорошо на многих различных размерах и разрешениях устройств?
В настоящее время я создаю фоновые изображения определенного размера для каждого устройства и использую медиа-запросы, которые кажутся очень утомительными и требуют лучшего подхода.
Я мог бы почти создать их, чтобы охватить все устройства Apple, но охватить все устройства Android гораздо сложнее.
1 ответ
Вы должны сделать изображение "подходящим" для вашего div, содержащего фоновое изображение. Это делается с помощью background-size имущество. Просто добавьте эту строку в ваш CSS:
background-size: 100%;