Move.js_JavaScript を使用して CSS3 アニメーションを作成するための入門ガイド-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Move.js_JavaScript を使用して CSS3 アニメーションを作成するための入門ガイド

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

css3

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 ページは次のようになります:

201572284630175.jpg (787×186)

それでは、最初の Move.js スニペットを書いてみましょう。 onclick イベントハンドラーを playButton にアタッチし、クリックされたときに右に移動する必要があります。イベントハンドラーの JavaScript コードは次のとおりです。このコードは、transform: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 の他のメソッドを理解しましょう。

set(prop, val)

set() メソッドは、要素の css 属性を設定するために使用されます。css 属性と属性値の 2 つのパラメーターを取ります。使用例:

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

add(prop, val)

add() メソッドは、すでに設定されている属性値を追加するために使用されます。このメソッドを増分に使用するには、数値が必要です。このメソッドには、属性値とその増分という 2 つのパラメータが必要です:

.add('margin-left', 200)

前のコードスニペットが呼び出された後、その値に 200px が追加されます。

sub(prop, val)

sub() は add() の逆プロセスです。同じ 2 つのパラメータを受け取りますが、その値は属性値から減算されます。

.sub('margin-left', 200)

回転(度)

名前が示すように、このメソッドはパラメータとして数値を指定することで要素を回転させます。メソッドの呼び出し時に要素のtransformプロパティにアタッチすることによって。次のコードは要素を 90 度回転します:

.rotate(90)

このコードは、次の CSS を要素に追加します:

transform:rotate(90deg)

期間(n)

このメソッドでは、アニメーションの再生時間を設定できます。例: 次のコードは、要素を 2 秒間で左から右に 200 ピクセル移動します:

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

別の例、以下のコード。 Move.js は、要素の margin 属性を変更し、背景色を設定し、2 秒以内に要素を 90 度回転します。

.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)

スキュー(x, y)

skew() は、x 軸と y 軸に対する角度を調整するために使用されます。この方法は、skewX(deg) と skewY(deg) の 2 つの方法に分けることができます。

.skew(30, 40)

スケール(x, y)

このメソッドは、要素のサイズを拡大または圧縮するために使用され、指定された値ごとに、変換のスケールメソッドが呼び出されます。

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。