Move.js_JavaScript를 사용하여 CSS3 애니메이션을 만드는 방법에 대한 소개 가이드-JS 튜토리얼-php.cn

웹사이트에서는 CSS3 전환 및 애니메이션이 현재 가벼운 애니메이션을 만드는 데 선호되는 방법입니다. 불행하게도 많은 개발자들은 자신의 구문이 복잡하고 혼란스럽다고 생각합니다. 이것이 당신에게 해당된다면 아마도 Move.js가 당신에게 완벽한 솔루션일 것입니다. Move.js는 간단한 기능을 사용하여 CSS3 애니메이션을 만들기 위한 간단한 JavaScript 라이브러리입니다. 이 튜토리얼에서는 Move.js의 기본 사항을 살펴보고 온라인 데모를 제공합니다.

기본지식

Move.js는 CSS3 애니메이션 생성을 위한 가장 간단한 JavaScript API를 제공합니다. 클래스 상자가 있는 div가 있고 마우스가 div 위로 이동할 때 요소를 왼쪽에서 100픽셀 이동한다고 가정해 보겠습니다. 이 경우 코드는 다음과 같습니다.

.box {
 -webkit-transition: margin 1s;
 -moz-transition: margin 1s;
 -o-transition: margin 1s;
 transition: margin 1s;
}
.box:hover {
 margin-left: 100px;
}

로그인 후 복사

Move.js를 사용하면 다음과 같이 간단히 set() 메서드를 호출하여 동일한 결과를 얻을 수 있습니다.

move('.box')
 .set('margin-left', 100)
 .end();

로그인 후 복사

시작하기

먼저 Move.js GitHub 페이지를 방문하여 최신 패키지를 다운로드하고 Move.js 파일을 작업 디렉터리에 복사하세요. 다음으로 이 파일을 HTML 페이지에 포함시키세요. 완성된 페이지는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
 <title>Move.js Demo</title>
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head>
 <body>
 <a href="#" id="playButton">Play</a>
 <div class="box"></div>
 <script type="text/javascript" src="js/move.js"></script>
 </body>
</html>

로그인 후 복사

데모를 위해 클래스 상자가 있는 div 요소와 ID playButton이 있는 링크를 정의했습니다. styles.css 파일을 만들고 다음 스타일을 추가해 보겠습니다. Move.js에는 다음 스타일이 필요하지 않습니다.

.box {
 margin: 10px;
 width: 100px;
 height: 100px;
 background: #7C9DD4;
 box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
 display: block;
 font-size: 20px;
 margin: 20px 10px;
 font-weight: bold;
 color: #222;
 text-decoration: none;
}

로그인 후 복사

HTML 페이지는 다음과 같아야 합니다.

201572284630175.jpg (787×186)

이제 첫 번째 Move.js 스니펫을 작성해 보겠습니다. onclick 이벤트 핸들러를 playButton에 연결하고 클릭 시 오른쪽으로 이동해야 합니다. 이벤트 핸들러의 JavaScript 코드는 다음과 같습니다. 이 코드는 상자 요소에 변환:translateX(300px)를 추가합니다.

document.getElementById('playButton').onclick = function(e) {
 move('.box')
 .x(300)
 .end();
};

로그인 후 복사

Move.js 코드를 추가한 후 완성된 코드는 다음과 같습니다.

HTML

<!DOCTYPE html>
<html>
 <head>
 <title>Move.js Demo</title>
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head>
 <body>
 <a href="#" id="playButton">Play</a>
 <div class="box"></div>
 <script type="text/javascript" src="js/move.js"></script>
 <script type="text/javascript">
  document.getElementById('playButton').onclick = function(e){
  move('.box')
   .x(300)
   .end();
  };
 </script>
 </body>
</html>

로그인 후 복사

CSS

.box {
 margin-left: 10px;
 width: 100px;
 height: 100px;
 background: #7C9DD4;
 box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
 display: block;
 font-size: 20px;
 margin: 20px 10px;
 font-weight: bold;
 color: #222;
 text-decoration: none;
}

로그인 후 복사

Move.js 메소드

이전 데모에서는 x() 메서드를 보았습니다. 이제 Move.js의 다른 방법을 이해해 보겠습니다.
세트(prop, val)

set() 메소드는 요소의 CSS 속성을 설정하는 데 사용됩니다. CSS 속성과 속성 값이라는 두 가지 매개변수를 사용합니다. 사용 예:

.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')

로그인 후 복사

추가(prop, val)

add() 메소드는 이미 설정된 속성 값을 추가하는 데 사용됩니다. 증분에 사용하려면 이 방법에 숫자 값이 있어야 합니다. 이 메소드에는 속성 값과 해당 증분이라는 두 개의 매개변수가 있어야 합니다.

.add('margin-left', 200)

로그인 후 복사

이전 코드 조각이 호출된 후 해당 값에 200px가 추가됩니다.
sub(prop, val)

sub()는 add()의 역 프로세스입니다. 동일한 두 매개변수를 허용하지만 해당 값은 속성 값에서 뺍니다.

.sub('margin-left', 200)

로그인 후 복사

회전(도)

이름에서 알 수 있듯이 숫자 값을 매개변수로 제공하여 요소를 회전시키는 방법입니다. 메소드가 호출될 때 요소의 변환 속성에 연결합니다. 다음 코드는 요소를 90도 회전합니다.

.rotate(90)

로그인 후 복사

이 코드는 요소에 다음 CSS를 추가합니다.

transform:rotate(90deg)

로그인 후 복사

기간(n)

이 방법을 사용하면 애니메이션의 재생 시간을 설정할 수 있습니다. 예: 다음 코드는 2초 안에 요소를 왼쪽에서 오른쪽으로 200px 이동합니다.

.set('margin-left', 200)
.duration('2s')

로그인 후 복사

또 다른 예는 아래 코드입니다. Move.js는 요소의 여백 속성을 수정하고, 배경색을 설정하고, 요소를 2초 내에 90도 회전시킵니다.

.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')

로그인 후 복사

번역(x[, y])

translate() 메소드는 제공된 좌표를 매개변수로 사용하여 요소의 기본 위치를 수정하는 데 사용됩니다. 매개변수가 하나만 설정된 경우 두 번째 매개변수가 제공되면 해당 매개변수가 x 좌표로 사용됩니다. y 좌표로 사용됩니다:

.translate(200, 400)

로그인 후 복사

x() 및 y()

x() 메서드는 요소의 x 좌표를 조정하는 데 사용되며 y() 메서드는 요소의 y 좌표를 조정하는 데 사용됩니다. 두 가지 방법의 매개변수는 다음과 같이 양수 또는 음수일 수 있습니다.

.x(300)
.y(-20)

로그인 후 복사

기울기(x, y)

skew()는 x축과 y축을 기준으로 각도를 조정하는 데 사용됩니다. 이 방법은 두 가지 방법으로 나눌 수 있습니다:skewX(deg) 및skewY(deg):

.skew(30, 40)

로그인 후 복사

크기(x, y)

이 메서드는 요소의 크기를 확대하거나 압축하는 데 사용됩니다. 제공된 각 값에 대해 변환의 크기 조정 메서드가 호출됩니다.

.scale(3, 3)

로그인 후 복사

쉽게(fn)

CSS3 전환을 사용해 본 적이 있다면 전환 속성에서 용이성 기능이 작동한다는 것을 알고 계실 것입니다. 그는 전환 행위를 지정합니다. 각 이즈 기능에는 인, 아웃, 인-아웃, 스냅, 큐빅 베자르 등이 있습니다. 이러한 함수는 Move.js에서 제공하는 easy() 메서드를 통해 호출할 수 있습니다. 예:

.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)

로그인 후 복사

end()

该方法用于Move.js代码片段的结束，他标识动画的结束。技术上，该方法触发动画的播放。该方法接受一个可选的callback回掉函数。代码如下：

move('.box')
 .set('background-color', 'red')
 .duration(1000)
 .end(function() {
 alert("Animation Over!");
 });

로그인 후 복사

delay(n)

正如方法所暗示的，该方法提供一个时间的数值作为动画的延时。如下：

move('.box')
 .set('background-color', 'red')
 .delay(1000)
 .end();

로그인 후 복사

then()

该方法是Move.js中一个最重要的函数。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过then()方法实现分割：

move('.box')
 .set('background-color', 'red')
 .x(500)
 .then()
 .y(400)
 .set('background-color', 'green')
 .end();

로그인 후 복사

## 使用Move.js创建复杂动画 ##

在本教程中，我们已经写了很多基本的动画来了解各个方法。接下来，我们使用Move.js可以很容易的创建复杂的动画。该demo阐述了Move.js的大部分内容，在demo page

上我们创建了动画的描述，代码如下：

move('.square')
 .to(500, 200)
 .rotate(180)
 .scale(.5)
 .set('background-color', '#FF0551')
 .set('border-color', 'black')
 .duration('3s')
 .skew(50, -10)
 .then()
 .set('opacity', 0)
 .duration('0.3s')
 .scale(0.1)
 .pop()
 .end();

로그인 후 복사

结论

希望本篇教程能带给你关于Move.js是什么的清晰的认识和如何创建CSS3动画。使用Movejs能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。