anijs는 CSS 애니메이션을위한 선언적 처리 라이브러리로, HTML에 직접 작성된 간단하고 선언적인 명령을 사용하여 애니메이션 관리를 단순화합니다.
라이브러리는 HTML5 데이터 속성에서 Data-anijs라는 사용자 정의 속성을 사용하여 애니메이션에 대한 선언문을 작성합니다. 예를 들어, 코드`
위의 코드에서 선언문 구문은 <h2>가 집중하면 앵커 태그 요소에 흔들리는 것을 말한다.
</h2> 시작하기 <ul>
<of>이 튜토리얼 과정에서 Anijs를 사용하여 애니메이션으로 향상된 앱을 만들 것입니다. 이 앱은 ANIJ를 사용하는 일부 애니메이션을 포함하는 간단한 사용자 등록 및 로그인 앱입니다. 이 튜토리얼의 주요 초점은 Anijs를 사용하여 웹 앱에서 애니메이션을 작동시키는 방법입니다.
시작하려면 Anijs를 다운로드하여 페이지에 포함 시키거나 CDN 버전을 참조하십시오.
<li>
<ling> 스타일의 경우 Dan Eden의 Animate.css Libray를 사용할 것입니다.
</ling>
</li>
<in> 로그인 화면 생성
<create> 먼저 사용자가 로그인 할 화면을 만듭니다. HTML은 다음과 같습니다
<li>
<so> 우리가 지금까지 가지고있는 것은 정적 사인온 페이지입니다. 일부 CSS를 사용하면 다음과 같이 보입니다<an> Codepen에서 Sitepoint (@SitePoint)의 정적 로그인 화면 펜 ANIJS 튜토리얼 참조.
<our> 우리는 화면을 만들었습니다. 이제 로그인 프로세스를 검증해야합니다. 애니메이션 효과를 첨부하기 위해 특정 요소에 대한 Data-anijs 속성을 사용합니다. 우리는 data-anijs라는 사용자 정의 속성을 사용하여 HTML5 데이터 속성을 사용하여 선언문을 작성합니다. 다음과 같이이 속성을 사인 틴 버튼에 추가하겠습니다.
<p data-default-tab="result" data-height="389" data-slug-hash="Gtgjx" data-theme->
<code> 위 코드에서 선언적 문장은 로그인 버튼을 클릭하면 클래스 .login_screen 를 사용하여 요소에 힌지 애니메이션을 수행합니다. 따라서 버튼을 클릭하면 아래 데모에서 SignIn 버튼을 클릭하여 볼 수 있듯이 힌지 애니메이션이 적용됩니다.
.
<span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>
에 표시되며 reg_screen (레지스터 화면)의 클래스가있는 요소에 Rollin 애니메이션을 수행하십시오. 그러나 레지스터 화면이 숨겨져 있기 때문에 이것은 작동하지 않습니다.
편집자 주 : 아래의 데모는이 임베드에서 100% 올바르게 작동하지 않는 것 같습니다. 특히 "로그인"과 "등록"사이에서 여러 번 앞뒤로 전환하려고 할 때. 코드펜 프레임의 "편집"링크를 시도하여 전체 데모를 볼 수 있습니다.
다른 JavaScript 라이브러리와 함께 Anijs를 사용할 수 있습니까? anijs에서 애니메이션 타이밍을 제어하는 방법 예, ANIJ는 SVG 요소를 애니메이션하는 데 사용될 수 있습니다. 일반 HTML 요소와 동일한 애니메이션 매개 변수 및 제어 방법을 SVG 요소에 적용 할 수 있습니다. 이를 통해 SVG 그래픽 및 모양과 관련된 복잡한 애니메이션을 생성 할 수 있습니다. <span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>
로그인 후 복사로그인 후 복사<span><span><span><script</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</span>></span></span>
로그인 후 복사
마지막으로, 애니메이션 및 기능 호출을 포함하도록 HTML의 Data-anijs 속성을 수정하겠습니다.
<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span> <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span>
로그인 후 복사
anijs 설치는 간단합니다. GitHub 저장소에서 직접 다운로드하거나 NPM 또는 Bower와 같은 패키지 관리자를 사용할 수 있습니다. 다운로드되면 HTML 파일에 ANIJS 스크립트를 포함하면됩니다. 그런 다음 HTML 요소에 Data-anijs 속성을 추가하여 ANIJ를 사용할 수 있습니다. 예, Anijs는 다른 JavaScript와 호환되도록 설계되었습니다. 도서관. 다른 라이브러리의 기능을 방해하지 않으며 jQuery, React 또는 Angular와 같은 라이브러리와 함께 사용할 수 있습니다. 이것은 다양한 웹 개발 컨텍스트에서 애니메이션을 만드는 다재다능한 도구로 만듭니다.
anijs로 애니메이션을 만드는 방법
anijs로 어떤 유형의 애니메이션을 만들 수 있습니까? 응답 디자인에 Anijs를 사용할 수 있습니까?
예, ANIJ는 반응 형 디자인에 사용할 수 있습니다. ANIJ로 만든 애니메이션은 CSS를 기반으로하므로 스케일 크기 및 해상도에 따라 조정 및 적응할 수 있습니다. 이로 인해 Anijs는 데스크탑 및 모바일 장치 모두에서 잘 작동하는 애니메이션을 만드는 데 유용한 도구가됩니다. anijs를 사용하여 SVG 요소를 애니메이션 할 수 있습니까?
anijs에서 애니메이션을 디버그하는 방법은 무엇입니까?
ANIJS에서 애니메이션을 디버깅하는 방법은 Data-NAINJ 속성 및 CSS의 구문을 확인하는 것과 관련이 있습니다. 애니메이션 속성. 애니메이션이 예상대로 작동하지 않으면 브라우저의 개발자 도구를 사용하여 HTML 요소를 검사하고 적용된 CSS 속성을 확인할 수 있습니다. ANIJS와 관련된 오류 메시지는 JavaScript 콘솔을 확인할 수도 있습니다.
예, Anijs는 오픈 소스 프로젝트이며 커뮤니티의 기여를 환영합니다. 버그를보고, 새로운 기능 제안, 문서 개선 또는 코드 개선으로 풀 요청을 제출하여 기여할 수 있습니다. Anijs Github 페이지에서 기여하는 방법에 대한 자세한 내용을 확인할 수 있습니다.
위 내용은 ANIJS : CSS 애니메이션을위한 선언적 처리 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
