Move.js_JavaScript를 사용하여 CSS3 애니메이션을 만드는 방법에 대한 소개 가이드
- WBOY원래의
- 2016-05-16 15:49:341619검색
웹사이트에서는 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 페이지는 다음과 같아야 합니다.
이제 첫 번째 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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。