Comment animer 120 images efficacement?

Question

Il y a 120 images qui sont des tournages ronds à 360 degrés d'une vitrine de produit, chacun est à 3 degrés d'écart, taille 320 x 320 pixels. L'affichage continu des images donnera l'effet de faire tourner le produit devant l'utilisateur. Jusqu'à présent, les performances sont loin d'être satisfaisantes, il y a un retard dans le chargement et lorsque l'utilisateur touche à glisser vers une image particulière.

Si OpenGL n'est pas une option, quelle est la méthode recommandée pour gérer ce type d'animation efficacement? Merci!

Answer 1

Je ne comprends pas vraiment votre interface utilisateur, mais voici ma conjecture:

• Votre interface utilisateur est un cercle contient un grand nombre d'images et tous sont dans le même écran. Je pense que vous pouvez montrer les vignettes (50x50-80x80) dans le cercle et vous pouvez stocker toutes les vignettes en mémoire sans gros problème. Avec cette taille, chacun d'entre eux est juste autour de 8kb. 120 x 9 ~ 1 Mo de mémoire

• Lorsque vous animez une image, vous pouvez d'abord charger la vignette, puis charger la grande image en arrière-plan. Il va créer des effets que l'utilisateur voit certaines images ne pas effacer, puis le voir clairement. Cela aidera également lorsque les utilisateurs touchent certains pour glisser vers une image particulière. Au moins, vous avez quelque chose à montrer.

• Vous pouvez économiser un peu de mémoire et de chargement en redimensionnant la grande image à 75-80% de la taille 320x320. Celui-ci vous fera gagner un peu de temps pour le chargement des images et n'affecte pas beaucoup la qualité de l'image. Tout dépend de votre application.

• Vous pouvez essayer d'utiliser le chargement désireux. Vous pouvez charger des images avant de les animer réellement. Vous pouvez avoir un tableau pour stocker 3 - 5 images (320 x 320 n'est pas une grande taille, donc 5 d'entre eux seront juste autour de 500-1000 Ko). Lorsque vous affichez la première image, vous commencez à charger la 4ème image avant la main.

Answer 2

Si vous voulez compresser vraiment cela et avoir une lecture fluide sur mobile, vous devez l'enregistrer comme un film, puis utiliser AVPlayer de AVFoundation pour avoir la lecture personnalisée. Vous pouvez le régler à peu près n'importe quelle image ou changer la vitesse de lecture en avant ou en arrière et en boucle pour le rendre transparent. Vous pouvez, par exemple, le configurer pour changer l'emplacement ou lire la vélocité dans le film en fonction d'un balayage. C'est plus de travail à mettre en place que MPMoviePlayer mais c'est assez personnalisable.

Answer 3

Que diriez-vous d'un UIWebView + HTML5?

Regardez la vitrine de la pomme: http://www.apple.com/html5/showcase/threesixty/

Answer 4

Je voudrais faire des copies de lowres de toutes les 120 images peut-être 80x80 taille. Tous les 120 devraient entrer dans le cache de texture du GPU. Chargez les 120 images en 120 vues d'écran hors écran, agrandies jusqu'à 320x320. Animez en utilisant ces 120 vues d'image, montrant une image à la fois. Chaque fois que l'animation s'arrête, remplacez rapidement la dernière image par une autre vue dotée de la copie 320x320 pleine résolution correspondante. Chaque fois que l'utilisateur commence à démarrer l'animation, revenez à l'ensemble d'images lowres.

Cela fonctionne parce que l'œil ne peut pas voir des objets changeants (illusion de mouvement) avec la même résolution car ils peuvent une image statique, en fonction de la vitesse d'animation bien sûr.