Javascript를 사용하여 기하 급수적으로 PNG 회전

Question

나는 바퀴 달린 게임을 만들고 있는데 바퀴가 느리게 시작되고 특정 회전 속도로 최고점에 도달하고 다시 속도를 낮추고 싶습니다.

지수 회전 속도에 대한 아이디어가 있으십니까? 감사합니다.

Answer 1

선형 가속은 일반적으로 자연에서 발견되는 변위를 2 차로 증가시킵니다. 그 점을 후보자로 생각해야합니다.

관계없이 다른 프로그램을 설치하여 프로그램의 모양을 볼 수 있습니다. 이것이 어떻게 생겼는지에 대해서는 jQuery easings을 참조하십시오.

우선, 나는 각 변위를 위해이 기능을 시도 할 것 :

a = ct^2, for t < 3 
    = c(9 - t^2), for 3 <= t < 6 
    = 0, otherwise 

c 일부 일정하다.

Answer 2

간단한 CSS/JS 솔루션 :

: 애니메이션을 구현하는 CSS 클래스를

@keyframes spinningWheel{ 
    from {transform: rotate(0deg);} 
    to {transform: rotate(360deg);} 
}  
/* Chrome, Safari, Opera */ 
@-webkit-keyframes spinningWheel{ 
    from {-webkit-transform: rotate(0deg);} 
    to {-webkit-transform: rotate(360deg);} 
} 
/* Firefox */ 
@-moz-keyframes spinningWheel{ 
    from {-moz-transform: rotate(0deg);} 
    to {-moz-transform: rotate(360deg);} 
} 

지금 만들 : 당신이 @keyframes를 사용하여 일부 CSS3 애니메이션을 만들어야 할 겁니다

우선

.mySpinningWheel{ 
    animation-name: spinningWheel; 
    -webkit-animation-name: spinningWheel; 
    -moz-animation-name: spinningWheel; 

    animation-timing-function: ease-in-out; /* ease-in-out is slow at the beginning and the end */ 
    -webkit-animation-timing-function: ease-in-out; 
    -moz-animation-timing-function: ease-in-out; 

    animation-iteration-count: infinite; /* this causes your wheel to spin indefinitely */ 
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 

    animation-duration: 5s; /* One iteration of this animation will take 5s */ 
    -webkit-animation-duration: 5s; 
    -moz-animation-duration: 5s;  
} 

이 애니메이션의 반복에는 5 초가 걸리며 천천히, 중간에서 더 빠르게, 끝에서 천천히 회전합니다.

는 감소하지 (JS에서 동적으로 CSS 클래스를 추가 jQuery의 .addClass() 기능을 사용하거나 동적 바퀴 자신의 속도를 트리거 할 경우 jQuery를 사용하지 않는 경우, 단지 document.querySelector(".selectorForYourWheel").classList.add(".mySpinningWheel")

을 수행하려면 하나의 반복에서 속도를 높이고 변경할 수있는 일정한 속도로 유지하려면 CSS 클래스의 animation-timing-function 청크를 ease-in-out에서 linear으로 변경하십시오. 그런 다음 jQuery의 .css() 메서드를 사용하여 애니메이션 지속 시간을 변경하십시오 (애니메이션 속도가 더 빠르거나 느려집니다).