Anime.js를 사용한 로더 애니메이션
Anime.js는 개발자가 부드럽고 강력한 애니메이션을 쉽게 만들 수있는 가벼운 JavaScript 애니메이션 라이브러리입니다.
왜 anime.js를 사용합니까?
- 간단하고 유연한 구문
- 여러 애니메이션 유형 (CSS 속성, SVG, DOM 속성, JavaScript 객체)을 지원합니다.
- 고성능 및 경량 (~ 17kb Gzipped)
- 다른 라이브러리 및 프레임 워크와 잘 어울립니다
시작하기
Anime.js입니다 JavaScript 라이브러리. 당신은 그것을 다운로드 할 수 있습니다 공개 github 또는 사용하십시오 cdn url.
Anime.js 방법은 선택된 HTML 요소에 애니메이션 JS를 적용하는 데 사용될 수 있습니다. 아래 코드 스 니펫에서 요소를 선택하십시오 .css-selector-demo .el x 축을 250px로 변환합니다.
공식 문서 자체에는 많은 예제가 있습니다. 따라서이 기사에서는 웹 사이트 개발 사용 사례에 유용한 애니메이션을 사용해 보겠습니다.
개념
- 목표 – CSS 애니메이션을 대상으로하는 요소
- CSS 속성 – 애니메이션 변경을 일으키는 CSS 속성
- 키 프레임 – 수행 할 일련의 애니메이션 효과로 정의
- 타임 라인 – 동일한 타임 라인을 제공하여 여러 애니메이션을 함께 동기화합니다.
- 비틀 거리는 -후속 조치 및 겹치는 동작으로 여러 요소를 애니메이션 할 수 있습니다.
- 통제 수단 – AutoPLay 매개 변수가 False로 설정된 경우 일시 정지 애니메이션을 재생하거나 애니메이션을 시작합니다.
- 콜백 – 애니메이션이 재생되기 시작하자마자 모든 프레임에서 콜백이 트리거되었습니다.
- SVG 애니메이션 – SVG 경로 요소의 x, y 및 각도 값에 대한 요소를 애니메이션합니다.
- 완화 – 완화하면 애니메이션이 부드럽습니다
- 도우미 – 실행중인 애니메이션 또는 타임 라인에서 대상을 제거합니다. 대상 매개 변수는 대상 속성과 동일한 값을 허용합니다.
회전 원이있는 Ajax 로더
API 서비스 호출을 수행하는 동안 일반적으로 UI에서 AJAX 회전 GIF가 표시됩니다. 회전 원 으로더와 같이 Anime.js를 사용하여 쉽게 만들 수 있습니다.
아래의 예에서, 로더는 백엔드 API가 데이터를 가져올 때까지 몇 초 동안 표시됩니다. 그런 다음 로더가 표시되지 않도록 설정되고 사용자 목록이 표시됩니다.
.loader-container {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader-circle {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-top: 5px solid transparent;
border-radius: 50%;
}
function showLoader() {
document.getElementById("loader").style.display = "block";
anime({
targets: '.loader-circle',
rotate: 360,
duration: 1000,
easing: 'linear',
loop: true
});
}
function hideLoader() {
document.getElementById("loader").style.display = "none";
}
document.getElementById("fetch-data").addEventListener("click", function() {
showLoader();
fetch("api to fetch users data")
.then(response => response.json())
.then(data => {
hideLoader();
})
.catch(error => {
console.error("Error:", error);
hideLoader();
});
});
산출
원형 애니메이션 GIF 효과
웹 사이트에서 전체 페이지는 백엔드 데이터에서로드되어야합니다. 그런 다음 로더가 페이지를 가로 질러 나선형으로 회전합니다. 아래 스 니펫에서 triggerCircularAnimation Anime.js를 사용하여 줌 효과를 갖기 위해 스케일링과 함께 삼각형 경로로 원을 옮깁니다.
#circle-container {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.circle {
position: absolute;
width: 20px;
height: 20px;
background: hsl(200, 80%, 60%);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
function createCircles() {
const container = document.getElementById("circle-container");
container.innerHTML = '';
for (let i = 0; i 80 * Math.cos((i * Math.PI) / 4),
translateY: (el, i) => 80 * Math.sin((i * Math.PI) / 4),
scale: [ 0.8, 1.2, 0.8 ],
opacity: [ 1, 0.5, 1 ],
easing: 'easeInOutSine',
duration: 2000,
delay: anime.stagger(100),
loop: true
});
}
출력은 다음과 같습니다.
다른 모양으로 파열 효과
웹 사이트에서 놀라운 선물이나 점수를 보여주기 위해 일반적으로 폭발과 많은 모양이 있습니다. Anime.js를 사용하면 다른 크기로 다른 모양을 무작위로 생성하고 파열 선물 효과를 가져올 수 있습니다.
.shapes-container {
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.shape {
width: 20px;
height: 20px;
position: absolute;
opacity: 0;
}
function createShapes() {
const container = document.getElementById("shapes-container");
container.innerHTML = '';
for (let i = 0; i 0.5 ? "50%" : "0";
div.style.background = `hsl(${Math.random() * 360}, 80%, 60%)`;
container.appendChild(div);
}
}
function burstAnimation() {
createShapes();
anime({
targets: '.shape',
opacity: [ 0, 1, 0 ],
translateX: () => anime.random(-100, 100),
translateY: () => anime.random(-100, 100),
scale: [ 0.5, 1.5 ],
easing: 'easeOutQuad',
duration: 1000,
delay: anime.stagger(100)
});
}
setInterval(burstAnimation, 2000); 산출
그리드 효과 애니메이션
Kid Learning Tutorial과 마찬가지로 Screen Transformation은 그리드 효과 애니메이션이 필요한 일종의 사이트 사용 사례입니다.
#grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 10px;
width: 150px;
height: 150px;
}
.grid-item {
width: 20px;
height: 20px;
background: #fff;
opacity: 0;
}
function createGrid() {
const container = document.getElementById("grid-container");
container.innerHTML = '';
for (let i = 0; i 산출
결론
Anime.js는 jQuery 및 JavaScript 개발자를 위해 배우고 사용하기 쉽습니다. 적절한 사용자 정의 세트와 함께 많은 애니메이션을 사용하는 데 도움이됩니다. 위의 기사에서는 소스 코드 및 출력 미리보기가있는 능력을 탐색하여 애니메이션 개발을위한 참조가 될 수 있습니다.
전체 소스 코드는 Github에서 사용할 수 있습니다.
Post Comment