Mo.JS로 아름다운 코딩 웹 애니메이션을 만드는 방법

Mo.JS로 아름다운 코딩 웹 애니메이션을 만드는 방법

당신이 찾고 있다면 자신의 웹사이트 시작 , 아름다운 애니메이션으로 빛날 수 있습니다. 이를 달성하는 방법에는 여러 가지가 있습니다. 애니메이션 GIF 만들기 기존 필름에서 블렌더 또는 마야 .





프로그래밍 방식으로 애니메이션을 만드는 데 사용할 수 있는 라이브러리도 있습니다. 역사적으로 웹 코더는 jQuery를 사용하여 간단한 애니메이션을 만들었지만 웹이 개발되고 HTML5 새로운 기준이 되자 신선한 옵션이 등장했습니다. 애니메이션용 CSS 라이브러리는 브라우저의 벡터 애니메이션용으로 특별히 설계된 JavaScript 라이브러리와 함께 새 프레임워크에서 매우 강력해졌습니다.



오늘 우리는 코드에서 아름다운 이미지를 만드는 블록에 있는 새로운 아이들 중 하나인 mo.js를 살펴볼 것입니다. 아름다운 패턴을 생성하는 사용자 반응 애니메이션 시리즈를 만들기 전에 몇 가지 기본 기능을 다룰 것입니다.





Mo.js 입력

Mo.js는 웹용 모션 그래픽을 쉽게 만들기 위한 라이브러리입니다. 코드에 익숙하지 않은 사람들을 위해 아름다운 것을 간단하게 만들 수 있도록 설계되었으며, 베테랑 프로그래머는 미처 몰랐던 예술적 측면을 발견할 수 있습니다. 이름에서 알 수 있듯이 인기 있는 JavaScript 프로그래밍 언어를 기반으로 하지만 누구나 쉽게 기초를 배울 수 있도록 구현되어 있습니다.

더 진행하기 전에 오늘 만들 내용을 살펴보겠습니다.



우리는 사용할 것입니다 코드펜 오늘의 프로젝트에서는 동일한 브라우저 창에서 모든 작업을 수행할 수 있기 때문입니다. 원하는 경우 다음에서 근무할 수 있습니다. 원하는 편집자 대신에. 단계별 자습서를 건너뛰려면 여기에서 전체 코드를 사용할 수 있습니다.

새 펜을 설정하면 다음 화면이 나타납니다.



시작하기 전에 몇 가지를 변경해야 합니다. 클릭 설정 아이콘을 클릭하고 자바스크립트 탭.

우리는 사용할 것입니다 바벨 코드 전처리기로 사용하므로 드롭다운 메뉴에서 선택합니다. Babel은 JavaScript를 좀 더 이해하기 쉽게 만듭니다. ECMA스크립트 6 이전 브라우저에 대한 지원. 그게 무슨 뜻인지 모르겠다면, 걱정하지마 , 여기에서 우리의 삶을 조금 더 쉽게 만들 것입니다.



또한 mo.js 라이브러리를 프로젝트로 가져와야 합니다. 검색하여 이 작업을 수행합니다. mo.js 에서 외부 스크립트/펜 추가 텍스트 프롬프트를 클릭하고 선택합니다.

이 두 가지가 준비된 상태에서 다음을 클릭합니다. 저장하고 닫습니다 . 시작할 준비가 되었습니다!

Mo.js를 사용한 기본 도형

그래픽을 시작하기 전에 보기 창에서 눈부신 흰색 배경을 처리해 보겠습니다. 다음 코드를 작성하여 배경색 속성을 변경하십시오. CSS 빵.

body{
background: rgba(11,11,11,1);
}

모양을 만드는 것은 간단한 프로세스이며 그 뒤에 있는 개념이 전체 라이브러리를 구동합니다. 기본 원 모양을 설정해 보겠습니다. 이 코드를 JS 빵:

const redCirc = new mojs.Shape({
isShowStart:true
});

여기에서 우리는 상수 이름이 있는 값 레드서클 그리고 그것을 할당했다. 새로운 mojs.Shape . 코딩이 처음이라면 여기에서 대괄호 순서에 주의하고 끝에 있는 세미콜론을 잊지 마세요!

지금까지 우리는 다음을 제외하고 매개변수를 전달하지 않았습니다. isShowStart:true , 즉, 모션을 지정하기 전에도 화면에 나타납니다. 화면 중앙에 분홍색 원이 배치된 것을 볼 수 있습니다.

이 원이 기본값입니다. 모양 mo.js용. 코드에 라인을 추가하여 이 모양을 쉽게 변경할 수 있습니다.

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

개체에 더 많은 속성을 추가하려면 쉼표를 사용하여 개체를 구분합니다. 여기에 추가했습니다. 모양 속성으로 정의하고 다음과 같이 정의합니다. '직접' . 펜을 저장하면 기본 모양이 대신 사각형으로 변경되는 것을 볼 수 있습니다.

값을 전달하는 이 프로세스는 모양 개체는 우리가 그것들을 사용자화하는 방법입니다. 지금 우리는 별로 하지 않는 사각형을 가지고 있습니다. 애니메이션을 적용해 보겠습니다.

모션의 기초

좀 더 인상적으로 보이도록 원을 설정하고 주위에 빨간색 선이 있고 내부에 채우기가 없습니다.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

보시다시피, 우리는 또한 너비 획에 대한 값, 그리고 반지름 원을 위해. 상황이 이미 조금 다르게 보이기 시작했습니다. 모양이 업데이트되지 않는 경우 주위에 쉼표나 작은따옴표가 누락되지 않았는지 확인하세요. '그물' 또는 '없음' 을 클릭하고 저장 페이지 상단에 있습니다.

여기에 애니메이션을 추가해 보겠습니다. 위의 예에서 이 빨간색 원이 바깥쪽으로 사라지기 전에 사용자가 클릭하는 위치에 나타납니다. 이를 가능하게 하는 한 가지 방법은 시간이 지남에 따라 반지름과 불투명도를 변경하는 것입니다. 코드를 수정해 보겠습니다.

radius: {15:30},
opacity: {1:0},
duration:1000

변경하여 반지름 속성 및 추가 불투명 그리고 지속 속성, 우리는 시간이 지남에 따라 수행할 모양 지침을 제공했습니다. 이것들은 델타 개체, 이러한 속성에 대한 시작 및 종료 정보를 보유합니다.

아직 아무 일도 일어나지 않는다는 것을 알게 될 것입니다. 추가하지 않았기 때문입니다. .플레이() 우리의 지시를 수행하도록 지시하는 기능입니다. 끝 괄호와 세미콜론 사이에 추가하면 원이 살아나는 것을 볼 수 있습니다.

이제 우리는 어딘가에 도달하고 있지만 정말 특별하게 만들기 위해 몇 가지 더 심층적인 가능성을 살펴보겠습니다.

Mo.js로 주문 및 완화

지금 당장은 원이 나타나자 마자 점점 희미해지기 시작합니다. 이것은 완벽하게 작동하지만 조금 더 제어하는 ​​것이 좋습니다.

우리는 이것을 할 수 있습니다 .그 다음에() 기능. 반지름이나 불투명도를 변경하는 대신 일정 시간 후에 변경하기 전에 모양을 시작 위치에 유지하도록 합시다.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

이제 우리의 모양은 할당한 값과 함께 나타납니다. 1000ms 동안 기다린 후 .그 다음에() 기능. 대괄호 사이에 몇 가지 지침을 추가해 보겠습니다.

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

이 코드는 애니메이션의 또 다른 중요한 부분을 소개합니다. 우리가 지시한 곳 규모 1에서 2로 변경하기 위해 사인파 기반 완화도 할당했습니다. 죄 . Mo.js에는 고급 사용자가 자신의 곡선을 추가할 수 있는 기능과 함께 다양한 이징 곡선이 내장되어 있습니다. 이 경우 시간에 따른 스케일은 위쪽으로 만곡하는 사인파에 따라 발생합니다.

다양한 곡선을 시각적으로 보려면 다음을 확인하십시오. easings.net . 이것을 다음과 결합하십시오. 스트로크 폭 설정 시간 동안 0으로 변경하면 훨씬 더 역동적으로 사라지는 효과가 있습니다.

모양은 Mo.js의 모든 것의 기초이지만 이야기의 시작일 뿐입니다. 살펴보자 버스트 .

Mo.js의 잠재력 폭발

에게 터지다 Mo.js의 는 중심점에서 나오는 모양의 모음입니다. 우리는 이것들을 완성된 애니메이션의 기초로 만들 것입니다. 모양과 동일한 방식으로 기본 버스트를 호출할 수 있습니다. 스파크를 만들어 봅시다.

const sparks = new mojs.Burst({
}).play();

비어있는 것을 추가하면 볼 수 있습니다. 터지다 개체를 재생하도록 지시하면 기본 버스트 효과가 나타납니다. 버스트에 애니메이션을 적용하여 버스트의 크기와 회전에 영향을 줄 수 있습니다. 반지름 그리고 각도 속성:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

이미 버스트에 사용자 정의 반경과 회전을 추가했습니다.

불꽃처럼 보이게 하기 위해 버스트가 사용하는 모양과 버스트가 생성하는 모양의 수를 변경해 보겠습니다. 버스트의 자식 속성을 지정하여 이 작업을 수행합니다.

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

자식 속성은 이미 작업한 모양 속성과 동일합니다. 이번에는 모양으로 십자가를 선택했습니다. 이 50개의 모든 모양은 이제 동일한 속성을 갖습니다. 꽤 괜찮아 보이기 시작합니다! 이것은 사용자가 마우스를 클릭할 때 가장 먼저 보게 되는 것입니다.

이미 우리는 초기의 빨간 획을 볼 수 있지만 레드서클 모양이 너무 오래 유지됩니다. 두 애니메이션이 서로 맞도록 지속 시간을 변경해 보십시오. 다음과 같이 표시되어야 합니다.

애니메이션은 아직 끝나지 않았지만 잠시 시간을 내어 사용자 반응형으로 만들어 보겠습니다.

메인 이벤트

이벤트 핸들러를 사용하여 사용자가 클릭하는 위치에서 애니메이션을 트리거합니다. 코드 블록 끝에 다음을 추가합니다.

document.addEventListener( 'click', function(e) {
});

이 코드 조각은 마우스 클릭을 수신하고 대괄호 안에 있는 모든 지침을 수행합니다. 우리는 우리의 레드서클 그리고 불꽃 이 수신기에 대한 개체입니다.

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

여기에서 호출하는 두 가지 기능은 .곡조() 그리고 .다시 하다() . 재생 기능은 클릭할 때마다 애니메이션이 처음부터 다시 시작되도록 지정하지만 재생 기능과 유사합니다.

NS 곡조 함수는 객체에 값을 전달하므로 트리거될 때 변경할 수 있습니다. 이 경우 마우스를 클릭한 페이지 좌표를 전달하고 그에 따라 애니메이션의 x 및 y 위치를 할당합니다. 코드를 저장하고 화면을 클릭해 보십시오. 몇 가지 문제가 있음을 알 수 있습니다.

첫째, 사용자가 아무 것도 클릭하지 않아도 초기 애니메이션이 여전히 화면 중앙에 표시됩니다. 둘째, 애니메이션은 마우스 포인트에서 트리거되지 않고 오른쪽 아래로 오프셋됩니다. 우리는 이 두 가지를 쉽게 고칠 수 있습니다.

우리의 모양과 버스트는 .플레이() 각각의 코드 블록의 끝에서. 우리는 이것이 더 이상 필요하지 않습니다. .다시 하다() 이벤트 핸들러에서 호출됩니다. 두 코드 블록에서 .play()를 제거할 수 있습니다. 같은 이유로 제거할 수 있습니다. isShowStart: 참 또한 더 이상 시작할 때 표시할 필요가 없기 때문입니다.

위치 문제를 해결하려면 객체의 위치 값을 설정해야 합니다. 첫 번째 모양에서 기억할 수 있듯이 mo.js는 기본적으로 페이지 중앙에 배치합니다. 이 값을 마우스 위치와 결합하면 오프셋이 생성됩니다. 이 오프셋을 제거하려면 이 줄을 두 줄 모두에 추가하기만 하면 됩니다. 레드서클 그리고 불꽃 사물:

left: 0,
top: 0,

이제 우리 객체가 취하는 유일한 위치 값은 이벤트 리스너에 의해 전달된 마우스 위치 값입니다. 이제 상황이 훨씬 더 잘 작동해야 합니다.

이벤트 핸들러에 객체를 추가하는 이 프로세스는 모든 애니메이션을 트리거하는 방법이므로 지금부터 모든 새 개체를 추가하는 것을 잊지 마십시오! 이제 우리가 원하는 대로 작동하는 기본 사항이 있으므로 더 크고 밝은 버스트를 추가해 보겠습니다.

사이키델릭하기

회전하는 삼각형부터 시작하겠습니다. 여기에서 아이디어는 최면 스트로보스코프 효과를 만드는 것이었고 이것을 설정하는 것은 실제로 매우 쉽습니다. 다음 매개변수를 사용하여 다른 버스트를 추가합니다.

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

몇 가지 새로운 점이 있지만 여기 있는 모든 것이 지금쯤에는 상당히 친숙할 것입니다. 모양을 삼각형으로 정의하는 대신 다각형 번호를 지정하기 전에 포인트들 3으로 가지고 있습니다.

우리도 준 채우다 작업할 색상 배열을 사용하면 다섯 번째 삼각형마다 빨간색으로 돌아가고 패턴이 계속됩니다. 의 높은 가치 각도 설정은 버스트 회전을 스트로보스코프 효과를 생성할 만큼 충분히 빠르게 만듭니다.

코드가 작동하지 않으면 이전 객체에서 했던 것처럼 이벤트 리스너 클래스에 삼각형 객체를 추가했는지 확인하십시오.

꽤 사이키델릭하다! 이를 따라 다른 버스트를 추가해 보겠습니다.

댄싱 펜타곤

우리는 우리의 것과 거의 동일한 것을 사용할 수 있습니다. 삼각형 뒤에 오는 버스트를 만들기 위한 개체입니다. 이 약간 수정된 코드는 밝은 색상의 겹치는 회전 육각형을 생성합니다.

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

여기서 주요 변경 사항은 지연 삼각형이 끝날 때까지 버스트가 시작되지 않도록 합니다. 몇 가지 값을 변경하여 여기서 아이디어는 삼각형과 반대 방향으로 버스트를 회전시키는 것이었습니다. 우연히도 오각형이 나타날 무렵에는 삼각형의 스트로보 효과로 마치 함께 회전하는 것처럼 보입니다.

약간의 무작위성

임의의 값을 사용하는 효과를 추가해 보겠습니다. 다음 속성을 사용하여 버스트를 만듭니다.

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

이 버스트는 빨간색으로 시작하여 투명하게 변하는 선을 만들고 시간이 지남에 따라 축소됩니다. 이 구성 요소를 흥미롭게 만드는 것은 임의의 값이 속성의 일부를 결정하는 데 사용된다는 것입니다.

NS 학위 시프트 자식 개체에 시작 각도를 제공합니다. 이것을 무작위화하여 클릭할 때마다 완전히 다른 버스트를 제공합니다. 임의의 값은 다음에도 사용됩니다. 반지름 그리고 지연 혼란 효과에 추가하는 기능.

효과는 다음과 같습니다.

여기서 임의의 값을 사용하기 때문에 객체에 대한 이벤트 핸들러에 추가 메서드를 추가해야 합니다.

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

NS 생성하다() 함수는 이벤트가 호출될 때마다 새로운 임의 값을 계산합니다. 이것이 없으면 모양은 처음 호출될 때 임의의 값을 선택하고 모든 후속 호출에 대해 해당 값을 계속 사용합니다. 이것은 효과를 완전히 망칠 것이므로 이것을 추가하십시오!

mo.js 객체의 거의 모든 요소에 임의의 값을 사용할 수 있으며 고유한 애니메이션을 만드는 간단한 방법입니다.

기사가 게시된 날짜를 찾는 방법

그러나 무작위성은 애니메이션에 동적 움직임을 추가하는 유일한 방법은 아닙니다. 살펴보자 파상 배치 기능.

엄청난 라인

방법을 보여주기 위해 파상 배치 기능이 작동하면 Catherine Wheel과 같은 것을 만들 것입니다. 다음 매개변수를 사용하여 새 버스트를 생성합니다.

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

이제 여기의 모든 것이 익숙합니다. 버스트는 빨간색 또는 주황색 선인 50개의 자식을 만듭니다. 여기서 차이점은 우리가 통과한다는 것입니다. 지연 재산 비틀거리다(10) 기능. 이것은 모든 자식의 방출 사이에 10ms의 지연을 추가하여 우리가 찾고 있는 회전 효과를 제공합니다.

stagger 기능은 임의의 값을 사용하지 않으므로 생성하다 이번에는 이벤트 핸들러의 함수입니다. 지금까지 우리가 가진 모든 것을 봅시다:

여기서 쉽게 멈출 수 있지만 이 프로젝트를 마무리하기 위해 버스트를 한 번 더 추가해 보겠습니다.

스마트 스퀘어

이 마지막 버스트에서는 직사각형을 사용하여 무언가를 만들어 보겠습니다. 다음 객체를 코드 및 이벤트 리스너에 추가합니다.

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

이 객체는 우리가 오늘 이미 작업한 것에 새로운 것을 추가하지 않으며 단지 코드를 통해 복잡한 기하학적 패턴을 쉽게 생성할 수 있는 방법을 보여주기 위해 포함되었습니다.

이것은 이 튜토리얼을 작성하는 테스트 단계에서 생성된 이 객체의 의도된 결과가 아닙니다. 코드가 실행되면 내가 의도적으로 만들 수 있었던 것보다 훨씬 더 아름다운 것을 발견했다는 것이 분명해졌습니다!

이 최종 개체가 추가되면 완료됩니다. 전체 동작을 살펴보겠습니다.

Mo.js: 웹 애니메이션을 위한 강력한 도구

mo.js에 대한 이 간단한 소개에서는 아름다운 애니메이션을 만드는 데 필요한 기본 도구를 다룹니다. 이러한 도구를 사용하는 방법은 거의 모든 것을 만들 수 있으며 많은 작업에서 웹 라이브러리는 포토샵 , After Effects 또는 기타 값비싼 소프트웨어.

이 라이브러리는 프로그래밍과 웹 개발 모두에서 작업하는 사람들에게 유용합니다. 프로젝트에서 사용되는 이벤트 처리는 웹사이트나 앱에서 반응 버튼과 텍스트를 만드는 데 쉽게 사용할 수 있습니다. 재미있게 즐기세요: 실수는 없고 행복한 사고만 있을 뿐입니다!

공유하다 공유하다 트위터 이메일 Windows 11로 업그레이드할 가치가 있습니까?

Windows가 새롭게 디자인되었습니다. 그러나 Windows 10에서 Windows 11로 전환하도록 설득하기에 충분합니까?

다음 읽기 관련 항목
  • 프로그램 작성
  • 자바스크립트
저자 소개 이안 버클리(216건의 기사 게재)

Ian Buckley는 독일 베를린에 거주하는 프리랜스 저널리스트, 음악가, 공연자 및 비디오 프로듀서입니다. 글을 쓰지 않거나 무대에 오르지 않을 때는 미친 과학자가 되기 위해 DIY 전자 제품이나 코드를 만지작거리고 있습니다.

이안 버클리가 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.