Bounce.js : 복잡한 CSS 애니메이션을 빠르게 만듭니다

bounce.js : 부드러운 CSS 애니메이션을 쉽게 만들 수있는 강력한 도구 Joel Besada가 만든 bounce.js는 개발자가 부드럽고 우아한 CSS 애니메이션을 신속하게 생성하는 데 도움이되는 간단하고 사용하기 쉬운 도구입니다. 신흥 JavaScript 라이브러리 및 발전기 파의 일부이며 복잡한 애니메이션의 생성 과정을 효과적으로 단순화합니다. ipythat

에서

이미지 JavaScript - 원래 웹 페이지의 동적 효과를 향상시키기 위해 설계된 간단한 스크립팅 언어로 1995 년 창립 이후 큰 진전이 생겼습니다. Mozilla의 공동 설립자 인 Brendan Eich가 발명 한 JavaScript는 지난 5 년 동안 Adobe Flash를 점차적으로 대체했으며 웹 애니메이션, 게임 및 응용 프로그램을위한 선택 기술이되었습니다.

JavaScript의 상승은 새로운 라이브러리와 생성기의 새로운 배치를 낳아 개발자가보다 복잡한 애니메이션 기능에 더 쉽게 액세스 할 수있게했습니다. Bounce.js는 그중 하나입니다. bounce.js를 사용하면 간단한 인터페이스, 미리보기, 공유 및 내보내기를 통해 부드럽고 우아한 CSS 애니메이션을 생성 할 수 있습니다. 그것의 운영은 매우 직관적입니다! 절묘한 애니메이션 효과가 마음에 들면 Bounce.js를 사용해보십시오.

다음으로 Bounce.js의 기능 및 애니메이션 워크 플로우를 탐색하고 사용자 정의 애니메이션을 만들 것입니다. 나는 당신이 그것을 매우 흥미롭게 생각할 것이라고 믿습니다!

인터페이스

bounce.js의 인터페이스는 간결하고 명확하여 애니메이션 제작 프로세스를 매우 간단하게 만듭니다.

왼쪽에는 애니메이션 체인에 다양한 효과를 추가하고 조정할 수있는 구성 요소 목록이 있습니다. 또한보고 수정할 수있는 다양한 애니메이션 사전 설정을 제공하여 구성 요소 추가에 시간을 절약합니다. "Road Runner"애니메이션 사전 설정은 매우 흥미롭고 저자의 세부 사항 처리는 놀랍습니다. 많은 사전 설정이 템플릿으로 제공되어 사용자 정의 애니메이션을 촉진하고 시간을 절약 할 수 있습니다.

화면의 중심은 애니메이션 미리보기 영역이며, 정사각형은 자리 표시 자 역할을하여 애니메이션의 모든 동작을 표시합니다.

미리보기 화면 아래에는 애니메이션 재생, 루프 애니메이션 및 슬로우 모션 아래에 세 개의 버튼이 있습니다.

슬로우 모션 기능은 애니메이션 모션 궤적의 자세한 분석에 특히 도움이됩니다.

생성 한 각 애니메이션에는 고유 한 URL이 있으며 "짧은 URL 가져 오기"를 클릭하여 짧은 링크를 얻으십시오.

면책 조항 : 대부분의 코드 생성기와 마찬가지로 잘 작성된 코드는 종종 자동 생성 코드보다 훨씬 우수합니다. 그러나 코드를 수동으로 작성하는 것은 시간이 많이 걸리고 노동 집약적 일 수 있습니다. 나중에 코드를 수동으로 조정하지 않으려면 Bounce.js에 지나치게 의존하지 않는 것이 좋습니다. Bounce.js는 매트릭스 변환을 크게 사용하여 모든 애니메이션 장면에 가장 좋은 방법이 아닙니다.

나는이 애니메이션을 만드는 동안 개인적으로 경험했습니다. 그러나 애니메이션만큼 복잡하지 않을 수 있습니다. 기억하십시오 : 애니메이션 타임 라인이 길수록 더 많은 코드가 생성되므로 과도하게 사용하지 마십시오. 이것은 기본입니다. 전체 과정은 기술적으로 복잡하지 않습니다. 나머지는 상상력에 달려 있습니다. 핸드 오리노 프로덕션 사용자 정의 애니메이션을 만들어 봅시다. 아래의 예에서, 나는 낙하산 애니메이션 (일반적으로 만화에서 볼 수있는 과장된 애니메이션 유형)을 만드는 방법을 보여줍니다.

<.> Bounce.js에서 애니메이션은 "구성 요소"로 나뉩니다. 구성 요소를 댄스 동작의 다른 부분으로 생각할 수 있습니다. 우리는 애니메이션의 동작이나 애니메이션이 아니라 배경/무대 만 설계합니다. 물론 일단 우리의 행동이 완료되면, 어떤 환경에서든 모든 객체에 적용하는 것은 사소한 일입니다.

애니메이션 구성 요소 1

Q : 스카이 다이버는 스카이 다이빙 후에 무엇을 할 것인가?

A : 물론 낙하산을 열 것입니다. 그래서 그것을 애니메이션으로 변환합시다.

낙하산의 개구부를 시뮬레이션하는 가장 좋은 방법은

scale

구성 요소를 사용하는 것입니다. 미리보기의 정사각형의 원래 크기를 언급하면 ​​여기에서 원래 크기가 0.2를 사용했으며 최종 크기는 4입니다. 기본적으로 애니메이션 끝에서 20 배 더 커집니다.

낙하산의 너비와 길이 (위에서 볼 수있는 높이)는 동일하기 때문에 두 차원의 종횡비를 동일하게 유지합니다. 우리는 바운스 속성을 ​​선택하여

가 우리의 요구에 가장 적합하기 때문에 선택합니다. 기간 동안 애니메이션이 다루어야 할 시간 범위를 지정합니다. 낙하산이 매우 빨리 열리므로 2000 밀리 초로 여기에 설정했습니다.

애니메이션 구성 요소의 순서에 관계없이 모든 구성 요소는 애니메이션 시작시 즉시 활성화되므로 나중에 구성 요소가 시작되도록하려면 지연 필드의 지연을 지정해야합니다.

팁 : 복잡한 애니메이션을 만드는 경우 구성 요소를 쉽게 혼동하지 않도록 구성 요소를 활성화하는 것과 동일한 순서로 유지하는 것이 가장 좋습니다.

바운스

필드는 애니메이션 중에 요소가 튀는 횟수를 지정합니다. 이 경우 16을 입력했는데, 이는 상대적으로 높은 숫자이지만 낙하산 애니메이션에는 의미가 있습니다. 강성 애니메이션 구성 요소 2

다음으로, 우리는 바람이 미묘하고 임의의 방식으로 경로를 바꾸는 것처럼 낙하산의 움직임을 시뮬레이션 할 것입니다. 이를 위해 번역 구성 요소를 사용합니다. 나는 여기에 미묘한 움직임을 추가했습니다 (오른쪽에 25 개, 하단 15 대)이 충분해야합니다. 애니메이션의 부드러움으로 인해 다시 완화로 튀김을 사용하는 것이 좋습니다. 이 구성 요소는 애니메이션 전체에서 재생되므로 전체 길이를 커버 해야하는 20000ms에서 재생하도록했습니다. 낙하산은 타임 라인의 시작 부분에서 이동하므로 여기서 지연이 필요하지 않습니다. 낙하산 스포츠는 바람의 영향을 더 많이받을 것이지만, 첫 번째 구성 요소보다 더 어렵 기 때문에 22

바운스 및 3 강성 를 주었다. 애니메이션 구성 요소 3

마지막으로, 우리는 애니메이션의 마지막 구성 요소를 추가합니다.

위에서 스카이 다이버를 관찰하면 시간이 지남과 거리의 증가로 인해 더 작고 작게 나타납니다. 따라서 그의 초기 크기는 1이고 애니메이션 끝의 크기는 실제로 0입니다. 이 값을 너비와 높이에 삽입합시다.

애니메이션의 지속 시간은 분명히 여기에서 꽤 길어야합니다. 25,000 밀리 초로 충분합니다.

이 애니메이션 구성 요소는 다른 구성 요소 (즉, 지연 없음)와 동시에 재생되므로 이전 구성 요소에서 상속 될 때 바운스 또는 강성 효과를 추가 할 필요가 없습니다. 따라서 여기 스크린 샷과 마찬가지로 0으로 남겨 두십시오.

물론, 당신은 결과를 끊임없이 거친 가이드 일 때 결과를 조정하고 혼합 할 수 있지만 결과는 분명히 당신의 손에 있습니다.

그러나 나중에 비슷한 결과가 있어야합니다.

결과에 만족하면 애니메이션을 CSS로 내보내고 프로젝트에서 사용할 수 있습니다.

github에서 bounce.js의 저장소를 찾을 수도 있습니다.

당신은 어떻게 생각하십니까?

디자인 및 애니메이션 웹 사이트에 대한 많은 혁신적인 새로운 접근 방식의 출현으로 Bounce.js와 같은 발전기는 특히 이러한 애니메이션 코드를 수동으로 작성하는 데 소중한 시간을 절약하는 데 매우 편리합니다.

댓글 섹션에 실험을 게시하고 실험을 게시하십시오. 우리는 당신의 결과를 알고 싶습니다!

bounce.js 에 대해 자주 묻는 질문 내 프로젝트에 bounce.js를 설치하는 방법은 무엇입니까?

bounce.js를 설치하려면 npm 또는 bower를 사용할 수 있습니다. NPM을 사용하는 경우 명령을 사용하여 설치할 수 있습니다. Bower의 경우 명령

를 사용하십시오. 설치되면 스크립트 태그를 사용하여 HTML 파일에 포함시킬 수 있습니다.

다른 JavaScript 라이브러리와 함께 bounce.js를 사용할 수 있습니까?

예, Bounce.js는 다른 JavaScript 라이브러리와 호환됩니다. 다른 라이브러리의 기능을 방해하지 않습니다. jQuery, React, Angular 및 Vue.js와 같은 라이브러리와 함께 사용할 수 있습니다.

bounce.js를 사용하여 애니메이션을 만드는 방법?

bounce.js로 애니메이션을 만드는 데 새 바운스 객체를 생성하고 구성 요소를 추가해야합니다. 줌, 회전, 팬 및 틸트와 같은 구성 요소를 추가 할 수 있습니다. 구성 요소를 추가 한 후

메소드를 사용하여 요소에 애니메이션을 적용 할 수 있습니다.

Bounce.js에서 애니메이션의 지속 시간과 지연을 제어 할 수 있습니까?

예, Bounce.js를 사용하면 애니메이션의 지속 시간과 지연을 제어 할 수 있습니다. 각각

및

메소드를 사용하여 지속 시간과 지연을 설정할 수 있습니다. 값은 밀리 초입니다. duration Bounce.js에서 애니메이션을 연결하는 방법? delay

메소드를 사용하여 Bounce.js에서 애니메이션을 연결할 수 있습니다. 이 방법을 사용하면 애니메이션을 순차적으로 실행할 수 있습니다. 바운스 객체의 배열을

메소드로 전달하여 서로 연결할 수 있습니다.

반응 형 디자인에 bounce.js를 사용할 수 있습니까?

예, Bounce.js는 반응 형 디자인에 사용될 수 있습니다. Bounce.js로 만든 애니메이션은 확장 가능하며 다양한 화면 크기에 적응합니다. 미디어 쿼리를 사용하여 다른 장치에서 애니메이션이 작동하는 방식을 제어 할 수도 있습니다. chain Bounce.js에서 애니메이션을 중지하는 방법? chain 당신은

메소드를 사용하여 bounce.js에서 애니메이션을 중지 할 수 있습니다. 이 방법은 애니메이션을 중지하고 요소를 초기 상태로 재설정합니다.

복잡한 애니메이션에 bounce.js를 사용할 수 있습니까?

예, Bounce.js는 복잡한 애니메이션을 만들 수 있습니다. 여러 구성 요소와 링크 애니메이션을 결합하여 복잡한 효과를 만들 수 있습니다. 그러나이를 위해서는 라이브러리 및 CSS 애니메이션을 잘 이해해야합니다.

<..> bounce.js는 모든 브라우저와 호환됩니까?

bounce.js는 대부분의 최신 브라우저와 호환됩니다. 그러나 일부 기능은 이전 브라우저에서는 작동하지 않을 수 있습니다. 호환성을 보장하기 위해 다른 브라우저에서 애니메이션을 테스트하는 것이 가장 좋습니다.

상업 프로젝트에 bounce.js를 사용할 수 있습니까?

예, Bounce.js는 오픈 소스이며 개인 및 상업 프로젝트를 위해 무료로 제공됩니다. 이를 사용하여 웹 사이트, 앱, 게임 및 기타 프로젝트에 애니메이션을 만들 수 있습니다.

위 내용은 Bounce.js : 복잡한 CSS 애니메이션을 빠르게 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!