Comment rendre l'animation After Effects sensible à de nombreuses tailles d'appareils à l'intérieur de l'application Ionic

Question

Je développe une application mobile pour android et ios dans le cadre ionique qui contient un élément de jeu qui est animé. Actuellement, j'utilise Adobe After Effects pour animer un personnage qui fait partie d'un jeu. J'exporte une séquence PNG d'After Effects et l'incorpore dans mon application Ionic sous la forme d'une séquence d'images de fond constituant l'animation. J'utilise TexturePacker pour créer des feuilles de sprite et GSAP TweenMax pour exécuter l'animation en javascript à l'intérieur d'un contrôleur angulaire.

Je cible ios et Android, j'ai donc besoin de rendre l'animation belle sur une grande variété d'écrans et de résolutions. Lorsque l'application entre dans le mode «jeu», les images doivent occuper tout l'écran.

Quelle est la meilleure façon de s'assurer que l'animation du jeu semble bien sur les nombreuses tailles de périphériques et résolutions disponibles?

Actuellement, je crée des images d'arrière-plan de taille spécifique pour chaque appareil et j'utilise des requêtes média qui me paraissent très fastidieuses et me semble qu'il devrait y avoir une meilleure approche.

Je pourrais à peu près réussi à les créer pour couvrir tous les appareils Apple, mais pour couvrir tous les appareils Android est beaucoup plus difficile.

Answer 1

Vous devez faire correspondre l'image à votre div contenant votre image de fond. Ceci est fait en utilisant la propriété background-size. Ajoutez cette ligne à votre CSS:

background-size: 100%;