Phonegap 앱의 CSS 하드웨어 가속

phonegap 응용 프로그램에서 하드웨어 가속을 사용하려고합니다. 나는이 pourpose를 위해 css 3dtransform을 넣어야한다는 것을 읽었다. 그래서, 내 html 요소의 주 클래스에서 webkit-transform3d를 사용했지만 애니메이션 중에 약간의 지연이 계속됩니다.Phonegap 앱의 CSS 하드웨어 가속

상자를 열고 닫고 싶습니다. 설정 값은 0에서 somevalue 및 viceversa입니다.

내가 여기 예를 들어 쓰기가 : http://jsfiddle.net/VG7V5/6/

당신이 볼 수 있듯이을,이 방법으로 클래스 컨테이너를 정의 :

#container { 
    box-shadow: 0.1em 0.1em 0.2em 0em #777777; 
    width: 100%; 
    max-height: 15em; 
    overflow-y: auto; 
    transform: translate3d(0em,0em,0em); 
    -webkit-transform:translate3d(0em,0em,0em); 
    -webkit-perspective: 1000; 
    -webkit-backface-visibility: hidden; 
}

나는 안드로이드 4.4 내 넥서스 5의 예를 열면 .2 애니메이션이 진행되는 동안 transform3d가 활성화되거나 비활성화 된 상태에서 일부 지연이 발생합니다 (jsfiddle에서 infact은 주석 처리 된 변환으로 시작). 아무것도 변하지 않는 것 같습니다.

문제가 있습니까?

Thx

출처

2014-01-12 ira

ressource가있는 경우 하드웨어 가속이 작동합니다. 스마트 폰에 메인 프로세서가있는 고성능 그래픽 카드가 있다고는 생각하지 않습니다. –

또한 스마트 폰에는 그래픽 프로세서 장치가 있습니다 .. 그리고 웹에 많은 기사가 있습니다 이 주제는 .. – ira

네,하지만 일반 컴퓨터처럼 주 프로세서 대신 계산할 수있는 강력한 칩이 있습니까? –

어쩌면 나는 해결책을 스스로 찾았습니다. 위치, 크기, 회전 또는 불투명도 :

로서는들은 이러한 유형의 경우, 고성능 애니메이션을 달성하는 것이 가능하다 본 article

설명.

기본적으로 애니메이션은 cpu/gpu에 너무 많은 오버 헤드가 발생하기 때문에 요소의 크기를 변경해서는 안됩니다.

그래서 예제의 경우와 마찬가지로 요소의 높이를 변경하는 것은 좋은 생각이 아닙니다. : D

출처

2014-01-16 14:16:14 ira

+1 phonegap (및 HTML5) 애니메이션에 대한 훌륭한 참고 자료입니다. 왼쪽/위 속성을 사용하여 전환을 사용하고 애니메이션에서 일부 지연이 발생했습니다. translate3d (또는 번역 만하면됩니다)를 사용하면이 애니메이션을 정말 원활하게 처리 할 수 있습니다! 감사! –

Phonegap 앱의 CSS 하드웨어 가속

답변

관련 문제