2011-04-21 8 views
7

iOS는 CSS3 전환, 애니메이션, 변환 등으로 인해 빨려 들기 쉽습니다. 어떤 IMO가 기술의 가장 뛰어난 기능 중 하나입니다.iPad에서 CSS3 속도 향상

이제 임의의 3D 변환을 던져서 하드웨어 가속을 초기화하는 것으로 iOS를 속일 수 있다고 들었습니다. 그래서 무작위로 div를 변형하고 그것을 화면에 띄우고 (심지어 숨기지도 않음), 그 경험은 여전히 ​​따라 잡니다. ...

CSS3 전환, 변환, 애니메이션 등의 성능을 향상시킬 수있는 방법이 있습니까? iOS에서? 아니면 웹 앱이 네이티브 앱의 플라스틱 녹아웃 일까?

편집 :에서 볼 때 여기에서 문제가되는 코드의 ...

http://www.abhi.my/sl/html/

그냥 그 링크를 따라, 당신은 내가 함께 넣어 약간의 데모를 볼 수 있습니다 ... 애니메이션은 부드럽고 허용 데스크톱 브라우저는 iOS에서 같은 사이트는 ...이 하나

소스와 지점 것을 밖으로 통과 자유롭게

...

+2

아마도 일부 예제가 유용 할 수 있습니다. 그러면 사람들이 특정 최적화를 지적 할 수 있습니다. – akamike

+0

CSS3는 브라우저를 사용하여 렌더링을 수행하고 CSS가 그렇게 빠르기 때문에 느려질 것입니다. 심지어 과거의 항목을 스크롤 할 때 페이지가 고정되는 단일 요소에 많은 상자 그림자 속성을 사용하는 경우에도주의를 기울였습니다. CSS3는 멋지지만 "주요한 시간"에 대한 준비가되어 있지 않습니다. – Seth

+0

** @ akamike ** - 내가 말하는 것에 대해 볼 수있는 링크가 있습니다 ... iOS에서 해당 사이트를 실행하고 붐하십시오. ..슬픈 얼굴이 주위에 ... ** @ 세스 ** - 나는 CSS3가 자바 스크립트 애니메이션을 더 잘 수행하지 못한다는 것을 믿는 것이 어렵다는 것을 안다. 차이점은 바탕 화면에 나와 있으며 CSS3가 내가 본 몇 가지 예에서 앞서 가고 있습니다. 나는 iOS에서 디바이스가 언더 클록 속도로 실행되고 있으며 3D 요청만으로 클럭이 확장되어 성능이 향상된다는 것을 믿습니다 ... – Abhishek

답변

5

3D 변환은 ... 아이폰 4를 대상으로 한 크게 떨어진다 iOS에서 하드웨어 가속화되므로 당신이해야 할 일은 언제든지 3D 구문을 사용하는 것입니다. 적어도 3GS 이상에서는 성능이 뛰어납니다.

그러나 예에서는 변형을 사용하지 않고 완전히 다른 위치로 전환을 사용하고 있습니다. 그렇다면 모바일에서 엉뚱한 fps가 발생합니다.

대신 -webkit-transform : translate3d (-100 %, 0,0) (또는 적합한 아날로그)를 사용해야합니다. 이것이 얼마나 부드럽게 나타나는지 확인할 수 있습니다. the example in this page.

+0

샘플 코드에 대한 링크가 있습니다 ... 희망 사항 너와 차례로 나 ...--) – Abhishek

+0

굉장하고, 링크 덕분에, 그게 진짜 유용한 것으로 밝혀졌다. 내가 붙어 있다면 다시 물어볼 것이다 ... – Abhishek

0

-webkit-transition 대신 -webkit-transform을 사용해야합니다. 크로스 브라우저 지원과 사용 편의성을 위해 jQuery Transit과 같은 플러그인을 사용하면 Android 및 기타 모바일 장치는 물론 iOS에서도 원활하고 네이티브 같은 전환 및 효과를 쉽게 만들 수 있습니다.

Example JSFiddle of jQuery Transit in action

코드 예 :

HTML :

<div class="moveMe"> 
    <button class="moveUp">Move Me Up</button> 
    <button class="moveDown">Move Me Down</button> 
    <button class="setUp">Set Me Up</button> 
    <button class="setDown">Set Me Down</button> 
</div> 

자바 스크립트 :

$(".moveUp").on("click", function() { 
    $(".moveMe").transition({ y: '-=5' }); 
}); 

$(".moveDown").on("click", function() { 
    $(".moveMe").transition({ y: '+=5' }); 
}); 

$(".setUp").on("click", function() { 
    $(".moveMe").transition({ y: '0px' }); 
}); 

$(".setDown").on("click", function() { 
    $(".moveMe").transition({ y: '200px' }); 
}); 

다른 사람이 꽤있다 너를 위해 많은 일을 다했다. 나는 CSS3 애니메이션으로 꼼짝 못하게 할 수는 없으며이 플러그인은 놀랍도록 그 일을한다. 나는 이것을 iPad, iPod Touch, iPhone 및 Android로 테스트했습니다. 나는 그것이주는 원주민 느낌을 좋아합니다.