안녕하세요, 처음 질문 드리게 되네요.
https://codepen.io/RaFleur/pen/poOKbLY
우선 코드는 위와 같습니다.
간단히 소개 드리자면, 상단 버튼들을 통해 회전하는 박스를 조작할 수 있는 페이지입니다.
각 버튼 기능은 다음과 같습니다.
<< : 회전 감속
< : 역재생
|| : 정지
> : 다시 재생
>>: 회전 가속
현재 문제점은 버튼을 눌러서 속도, 방향이 바뀌면, 애니매이션이 자연스럽게 이어지지 않는다는 점입니다..
정지 버튼을 누른 상태로 다른 버튼을 눌러보면 명확해지는데, 버튼을 누를 때마다 애니메이션의 진행도가 바뀝니다.
버튼을 통해 자바스크립트로 애니메이션을 건든 건 animation-duration뿐이어서 아마 이 값이 재설정 되면서 문제가 생긴 것 같은데 정확한 원인을 모르겠습니다.
css의 .cube 부분과 js의 속도조정 함수가 나오는 곳까지 봐주시면 좋을 것 같습니다.
js부분에 대해 조금 부연설명을 하자면 변수 t를 통해 애니매이션 재생 소요 시간을 속도조정 함수에 전달해, animation-duration을 수정했습니다.
그 과정에서 현재 위치가 가속구간인지, 감속구간인지에 따라 전달해야하는 값이 바뀌기 때문에 IsOver1 변수를 통해 이를 추적했습니다.
이것저것 검색을 해봤는데 답이 잘 안 나와서 질문드립니다.
js 문법을 연습하는 차원에서 j쿼리를 안 썼더니 조금 지저분합니다. 죄송합니다.
