Le déchirement de l'écran pendant l'animation css et les animations css saccadées

Question

Je suis en train d'utiliser des animations css sur l'application du récepteur qui s'exécute sur le chromecast et j'ai remarqué 2 problèmes avec ça.

Premièrement, les animations sont très saccadées. J'estime que cela ressemblait probablement à environ 5 images par seconde.

Deuxièmement, il y a des problèmes de déchirure de l'écran pendant les animations. Il semble que le système n'attend pas le vblank avant d'échanger les tampons ?

J'ai utilisé une image de test, et voici mes définitions css pour les animations :

#testImage {
    animation-name:             balançoire;
    animation-duration:         5.0s;
    animation-iteration-count:  infinite;
    animation-timing-function: linear;

    -webkit-animation-name:             balançoire;
    -webkit-animation-duration:         5.0s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes balançoire {
    0% { left: 0px; }
    50% { left: 500px; }
    100% { left: 0px; }
}
@keyframes balançoire {
    0% { left: 0px; }
    50% { left: 500px; }
    100% { left: 0px; }
}

Est-ce que je fais quelque chose de mal, ou devrais-je éviter complètement d'utiliser des animations css sur l'application du récepteur ?

Est-ce que quelqu'un a des conseils sur comment je pourrais faire des animations autrement ?

Answer 1

Je ne pense pas que vous faites quelque chose de mal, c'est juste que le dispositif Chromecast est limité dans ses capacités d'animation. Leon Nichols a fait quelques tests de référence utiles ici: https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8