CSS 애니메이션 및 고르지 못한 CSS 애니메이션 중 화면이 끊어짐

Question

chromecast에서 실행되는 리시버 앱에서 CSS 애니메이션을 사용하고 있는데 2 가지 문제가 있습니다.

첫째, 애니메이션은 매우 복잡합니다. 아마 약 초당 5 프레임으로 보입니다.

두 번째는 애니메이션 중에 화면이 끊어지는 문제입니다. 시스템이 버퍼를 스왑하기 전에 vblank를 기다리지 않는 것 같습니다.

나는 테스트 이미지를 사용하고, 여기에 내 CSS 정의를 애니메이션에 대한했습니다

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

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

@-webkit-keyframes seesaw { 
    0% { left: 0px; } 
    50% { left: 500px; } 
    100% { left: 0px; } 
} 
@keyframes seesaw { 
    0% { left: 0px; } 
    50% { left: 500px; } 
    100% { left: 0px; } 
} 

내가 뭔가 잘못하고 있는가, 아니면 수신기 응용 프로그램에 모두 CSS 애니메이션을 사용하지 않도록해야합니까?

애니메이션을 만드는 방법에 대한 조언이있는 사람이 있습니까?

Answer 1

나는 당신이 잘못 생각하고 있다고 생각하지 않습니다. 그것은 단지 chromecast 장치의 애니메이션 기능이 제한적이라는 것입니다. 레온 니콜스 여기에 몇 가지 유용한 벤치마킹을했다 : https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8