ホームページ > 記事 > ウェブフロントエンド > Move.js_JavaScript を使用して CSS3 アニメーションを作成するための入門ガイド
Move.js_JavaScript を使用して CSS3 アニメーションを作成するための入門ガイド
- WBOYオリジナル
- 2016-05-16 15:49:341652ブラウズ
Web サイトでは、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>
デモ用に、class box を持つ 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 コードは次のとおりです。このコードは、transform:translateX(300px) をボックス要素に追加します。
document.getElementById('playButton').onclick = function(e) {
move('.box')
.x(300)
.end();
};
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>
.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 の他のメソッドを理解しましょう。
set(prop, val)
.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')
add(prop, val)
add() メソッドは、すでに設定されている属性値を追加するために使用されます。このメソッドを増分に使用するには、数値が必要です。このメソッドには、属性値とその増分という 2 つのパラメータが必要です:
.add('margin-left', 200)
sub(prop, val)
.sub('margin-left', 200)
回転(度)
名前が示すように、このメソッドはパラメータとして数値を指定することで要素を回転させます。メソッドの呼び出し時に要素のtransformプロパティにアタッチすることによって。次のコードは要素を 90 度回転します:
.rotate(90)
transform:rotate(90deg)
期間(n)
このメソッドでは、アニメーションの再生時間を設定できます。例: 次のコードは、要素を 2 秒間で左から右に 200 ピクセル移動します:
.set('margin-left', 200)
.duration('2s')
.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')
translate(x[, y])
translate() メソッドは、指定された座標をパラメータとして使用して、要素のデフォルトの位置を変更するために使用されます。パラメータが 1 つだけ設定されている場合、2 番目のパラメータが指定されている場合は、それが x 座標として使用されます。 y 座標として使用されます:
.translate(200, 400)
x() と y()
x() メソッドは要素の x 座標を調整するために使用され、y() メソッドは要素の y 座標を調整するために使用されます。 2 つのメソッドのパラメーターは、次のように正または負の値になります。
.x(300) .y(-20)
skew() は、x 軸と y 軸に対する角度を調整するために使用されます。この方法は、skewX(deg) と skewY(deg) の 2 つの方法に分けることができます。
.skew(30, 40)
このメソッドは、要素のサイズを拡大または圧縮するために使用され、指定された値ごとに、変換のスケール メソッドが呼び出されます。
.scale(3, 3)イーズ(fn)
CSS3 トランジションを使用したことがある場合は、easy 関数がトランジション属性で機能することをご存知でしょう。彼は移行行為を指定します。各イージング関数には、in、out、in-out、snap、cubic-bezeir などがあります。これらの関数は、Move.js が提供する easy() メソッドを通じて呼び出すことができます。例:
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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。