6
저는 부드러운 전환과 애니메이션이 필요한 프로젝트를 수행해 왔습니다. 우리는 최근 Javascript를 사용하여 거의 100 % 시간에 CSS 애니메이션으로 마이그레이션했습니다.CSS 3 애니메이션. translate3d 대 매트릭스
translate3d는 모바일과 데스크톱 모두에서 매우 매끄러운 멋진 애니메이션을 제공합니다.
나의 현재 살리는 스타일은 다음과 같이이다 :
는 CSS
:.animation-up{
transform: translate3d(0, -100%, 0);
}
.animation-down{
transform: translate3d(0, 100%, 0);
}
.animation-left{
tranform: translate3d(-100%, 0, 0);
}
.animation-right{
tranform: translate3d(-100%, 0, 0);
}
최근, 나는 많은 잡음을 받고있는 것으로 보인다 다른 프레임 워크를 조사하기 시작했다. 특정 GreenSock (http://greensock.com/tweenmax)과 Famo.us (http://famo.us)의 2 개. 둘 다 놀라운 프레임 속도와 놀라운 성능을 보여줍니다.
나는 마티스 변환을 사용하고있는 것으로 나타났습니다.
Greensock 예 (사용 매트릭스) :
<div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div>
: 내 질문은
<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div>
이 ... 차이 무엇입니까 translate3d와 매트릭스 사이? translate3D 이상의 매트릭스를 사용하여 큰 발전이 있습니까? 더 나은 결과를 산출하는 또 다른 방법이 있습니까?
나는 translate3D에 만족했지만, 가장 매끄러운 최고의 애니메이션을 제공 할 방법을 배우고 어쩌면 그게 무엇인지에 대한 지침을 찾고 싶습니다.
는 행렬을 Matrix3D 사이의 성능 차이가 무엇입니까? – w3bMak3r