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)
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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画,你就知道他在那里。