Jquery를 사용하여 원 회전 효과를 만드는 방법-프런트엔드 Q&A-php.cn

Jquery를 사용하여 원 회전 효과를 만드는 방법

PHPz

풀어 주다： 2023-04-23 17:51:20

원래의

1288명이 탐색했습니다.

웹 디자인에서 애니메이션 효과는 페이지의 재미와 상호작용성을 높일 수 있는 매우 중요한 부분입니다. 원 회전은 고전적인 애니메이션 효과 중 하나입니다. 다음은 JQuery를 사용하여 원 회전 애니메이션 효과를 만드는 방법을 소개합니다.

HTML 레이아웃

먼저 HTML 파일에 컨테이너 요소를 정의하여 애니메이션 요소를 래핑해야 합니다. 컨테이너 요소 내부에 div 요소를 애니메이션 요소로 추가합니다.

<div class="container">
  <div class="circle"></div>
</div>

로그인 후 복사

CSS 스타일 만들기

다음으로 컨테이너 요소와 애니메이션 요소에 CSS 스타일을 추가해야 합니다. 컨테이너 요소의 경우 너비와 높이를 100%로 설정하여 전체 페이지를 채웁니다. 애니메이션 요소의 경우 너비와 높이를 동일하게 설정하여 원형 효과를 제공합니다. 동시에 초기 위치와 색상을 설정합니다.

.container{
  width: 100%;
  height: 100%;
}

.circle{
  width: 200px;
  height: 200px;
  background-color: #F44336;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
}

로그인 후 복사

JQuery로 애니메이션 효과 구현

위의 HTML 및 CSS 설정이 완료되면 JQuery를 사용하여 애니메이션 효과를 구현해야 합니다. JQuery에서는 요소의 애니메이션 효과를 구현할 수 있는 animate() 메서드를 제공합니다. 구체적인 구현은 다음과 같습니다.

$(document).ready(function(){
  animateCircle();
});

function animateCircle(){
  $('.circle').animate({deg: 360}, {
    duration: 2000,
    step: function(now){
      $(this).css({
        transform: 'rotate(' + now + 'deg)'
      });
    },
    complete: animateCircle
  });
}

로그인 후 복사

위에 표시된 대로 animateCircle() 함수를 정의하여 루프에서 원 회전 애니메이션을 실행합니다. 애니메이션 효과를 설정하려면 animate() 메서드를 사용하세요. 그 중 첫 번째 매개변수인 deg는 원의 회전 각도를 나타내는 데 사용되며 초기값은 0이다. 지속 시간은 애니메이션 지속 시간을 나타내며, 이 예에서는 2000밀리초입니다. step은 애니메이션 중 콜백 함수를 참조하며, 애니메이션의 각 프레임이 끝난 후 호출되며, 현재 deg 값을 기반으로 새 각도를 계산하고, css() 메서드를 통해 요소를 새 각도로 회전합니다. 마지막으로 Complete는 애니메이션이 완료된 후의 콜백 함수를 나타내며, 이는 루프에서 원 회전 애니메이션을 계속 실행하는 데 사용됩니다.