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 までご連絡ください。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、