Mo.JSで美しいコード化されたWebアニメーションを作成する方法

Mo.JSで美しいコード化されたWebアニメーションを作成する方法

あなたが探しているなら あなた自身のウェブサイトを始めてください 、美しく見えるアニメーションはそれを輝かせることができます。これを達成するには、単純に複数の方法があります。 アニメーションGIFを作成する 既存の映画の一部から、次のようなソフトウェアを使用してゼロから自分で作成する方法を学ぶまで ブレンダー また マヤ 。





プログラムでアニメーションを作成するために利用できるライブラリもあります。歴史的に、WebコーダーはjQueryを使用して単純なアニメーションを作成していましたが、Webが開発され、 HTML5 新しい標準になり、新しいオプションが登場しました。アニメーション用のCSSライブラリは、ブラウザのベクターアニメーション用に特別に設計されたJavaScriptライブラリとともに、新しいフレームワークの下で非常に強力になりました。



今日は、コードから美しい画像を作成するための新しい子供たちの1人であるmo.jsを見ていきます。美しいパターンを作成するユーザーリアクティブアニメーションシリーズを作成する前に、いくつかの基本的な機能について説明します。





Mo.jsを入力してください

Mo.jsは、Web用のモーショングラフィックスを簡単に作成するためのライブラリです。これは、コードに精通していない人でも美しいものを簡単に作成できるように設計されており、ベテランプログラマーは自分が持っているとは知らなかった芸術的な側面を発見できます。その名前が示すように、それは人気のあるJavaScriptプログラミング言語に基づいていますが、誰でも簡単に基本を理解できるように実装されています。

先に進む前に、今日作成するものを見てみましょう。



使用します CodePen 今日のプロジェクトでは、同じブラウザウィンドウですべてを操作できるためです。あなたが望むなら、あなたはで働くことができます お好みのエディター 代わりは。ステップバイステップのチュートリアルをスキップしたい場合は、完全なコードがここにあります。

新しいペンを設定すると、次の画面が表示されます。



始める前に、いくつかの変更を加える必要があります。クリックしてください 設定 右上のアイコンをクリックして、 JavaScript タブ。

使用します バベル コードプリプロセッサとして、ドロップダウンメニューからこれを選択します。 Babelは、JavaScriptを少し理解しやすくするとともに、 ECMAScript 6 古いブラウザのサポート。それが何を意味するのかわからない場合は、 心配しないで 、ここでの生活が少し楽になります。



また、mo.jsライブラリをプロジェクトにインポートする必要があります。これを行うには、 mo.js の中に 外部スクリプト/ペンを追加する テキストプロンプト、およびそれを選択します。

これら2つを配置したら、をクリックします 保存して閉じます 。始める準備ができました！

Mo.jsの基本的な形

グラフィックスを始める前に、ビューペインのそのまばゆいばかりの白い背景について何かをしましょう。このコードをで記述して、背景色のプロパティを変更します。 CSS パン。

body{
background: rgba(11,11,11,1);
}

形状の作成は単純なプロセスであり、その背後にある概念がライブラリ全体を動かします。デフォルトの円の形を設定しましょう。このコードをに入力します JS パン：

const redCirc = new mojs.Shape({
isShowStart:true
});

ここでは、 const 名前の値 redCirc そしてそれをに割り当てました 新しいmojs.Shape 。コーディングにまったく慣れていない場合は、ここで角かっこ順序に注意し、最後のセミコロンを忘れないでください。

これまでのところ、パラメータを渡した以外はありません isShowStart：true 、つまり、モーションを割り当てる前でも画面に表示されます。画面の中央にピンクの円が配置されていることがわかります。

この円がデフォルトです 形 mo.jsの場合。コードに行を追加することで、この形状を簡単に変更できます。

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

オブジェクトにさらにプロパティを追加するには、コンマを使用してオブジェクトを区切ります。ここに、 形 プロパティ、およびそれをとして定義しました 'rect' 。ペンを保存すると、代わりにデフォルトの形状が正方形に変わります。

値をに渡すこのプロセス 形 オブジェクトは、それらをカスタマイズする方法です。現在、あまり効果のない正方形があります。何かをアニメートしてみましょう。

モーションの基本

もう少し印象的なものを取得するために、円を設定して、その周りに赤いストロークを配置し、内部を塗りつぶさないようにします。

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

ご覧のとおり、 幅 ストロークの値、および 半径 サークルのために。物事はすでに少し異なって見え始めています。図形が更新されていない場合は、カンマや一重引用符を見逃していないことを確認してください 'ネット' また 'なし' 、クリックしたことを確認してください 保存する ページの上部にあります。

これにアニメーションを追加しましょう。上記の例では、この赤い円は、外側にフェードする前に、ユーザーがクリックした場所に表示されます。これを実現する1つの方法は、時間の経過とともに半径と不透明度を変更することです。コードを変更してみましょう：

radius: {15:30},
opacity: {1:0},
duration:1000

を変更することにより 半径 プロパティ、および追加 不透明度 と 間隔 プロパティ、私たちは時間をかけて実行するために形状の指示を与えました。これらは デルタ これらのプロパティの開始情報と終了情報を保持するオブジェクト。

まだ何も起こっていないことに気付くでしょう。これは、追加していないためです。 。演奏する（） 指示を実行するように指示する関数。かっことセミコロンの間に追加すると、円が生き返るのがわかります。

今、私たちはどこかに到達していますが、それを本当に特別なものにするために、いくつかのより詳細な可能性を見てみましょう。

Mo.jsでの注文と緩和

現在、円が表示されるとすぐにフェードアウトし始めます。これは完全に正常に機能しますが、もう少し制御できると便利です。

私たちはこれを行うことができます 。それから（） 関数。半径や不透明度を変更するのではなく、設定した時間が経過した後に変更する前に、シェイプを開始位置にとどまらせましょう。

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

これで、割り当てた値でシェイプが表示されます。1000ミリ秒待ってから、入力した値を実行します。 。それから（） 関数。括弧の間にいくつかの指示を追加しましょう：

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

このコードは、アニメーションのもう1つの重要な部分を紹介します。私たちが指示したところ 規模 1から2に変更するために、正弦波ベースのイージングも割り当てました。 sin.in 。 Mo.jsにはさまざまなイージングカーブが組み込まれており、上級ユーザーが独自のカーブを追加することができます。この場合、時間の経過に伴うスケールは、上向きに湾曲する正弦波に従って発生します。

さまざまな曲線の視覚的な概要については、チェックアウトしてください easings.net 。これを ストローク幅 設定した期間中に0に変更すると、はるかに動的な消失効果が得られます。

形状はMo.jsのすべての基礎ですが、それは物語の始まりにすぎません。を見ようよ バースト 。

Mo.jsでの可能性の爆発

に バースト Mo.jsには、中心点から発する形状のコレクションがあります。これらを完成したアニメーションの基礎にします。シェイプを行うのと同じ方法で、デフォルトのバーストを呼び出すことができます。いくつかの火花を作りましょう：

const sparks = new mojs.Burst({
}).play();

空を追加するだけで、あなたは見ることができます バースト オブジェクトを再生するように指示すると、デフォルトのバースト効果が得られます。バーストをアニメーション化することで、バーストのサイズと回転に影響を与えることができます。 半径 と 角度 プロパティ：

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

すでに、カスタム半径とスピンをバーストに追加しています。

それらを火花のように見せるために、バーストが使用する形状と、バーストが生成する形状の数を変更しましょう。これを行うには、バーストの子のプロパティに対処します。

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

子のプロパティは、すでに使用したシェイプのプロパティと同じであることがわかります。今回は形に十字を選びました。これらの50個の形状すべてが同じプロパティを保持するようになりました。かなり見栄えがし始めています！これは、ユーザーがマウスをクリックしたときに最初に表示されるものです。

すでに私たちの最初の赤いストロークを見ることができますが redCirc 形が長すぎます。両方のアニメーションが合うように、その期間を変更してみてください。最終的には次のようになります。

アニメーションはまだ完成していませんが、ユーザーが反応するようにするために少し時間を取ってみましょう。

メインイベント

イベントハンドラーを使用して、ユーザーがクリックした位置でアニメーションをトリガーします。コードブロックの最後に、次を追加します。

document.addEventListener( 'click', function(e) {
});

このコードは、マウスのクリックをリッスンし、括弧内の指示を実行します。追加できます redCirc と 火花 このリスナーへのオブジェクト。

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

ここで呼び出す2つの関数は次のとおりです。 。曲（） と .replay（） 。再生機能は再生機能に似ていますが、クリックするたびにアニメーションを最初からやり直すように指定しています。

NS 曲 関数はオブジェクトに値を渡すので、トリガーされたときに変更できます。この場合、マウスがクリックされたページ座標を渡し、それに応じてアニメーションのx位置とy位置を割り当てます。コードを保存して、画面をクリックしてみてください。いくつかの問題に気付くでしょう。

まず、ユーザーが何もクリックしなくても、最初のアニメーションが画面の中央に表示されます。次に、アニメーションはマウスポイントではトリガーされませんが、右下にオフセットされます。これらの両方を簡単に修正できます。

私たちの形とバーストは 。演奏する（） それぞれのコードブロックの最後に。これはもう必要ありません .replay（） イベントハンドラで呼び出されています。コードの両方のブロックから.play（）を削除できます。同じ理由で、削除できます isShowStart：true また、最初に表示する必要がなくなったためです。

ポジショニングの問題を修正するには、オブジェクトの位置値を設定する必要があります。最初の形状から覚えているように、mo.jsはデフォルトでそれらをページの中央に配置します。これらの値をマウスの位置と組み合わせると、オフセットが作成されます。このオフセットを取り除くには、これらの線を両方に追加するだけです。 redCirc と 火花 オブジェクト：

left: 0,
top: 0,

これで、オブジェクトがとる位置の値は、イベントリスナーから渡されたマウスの位置の値だけになります。今、物事ははるかにうまくいくはずです。

イベントハンドラーにオブジェクトを追加するこのプロセスは、すべてのアニメーションをトリガーする方法です。 これからは、すべての新しいオブジェクトを追加することを忘れないでください。 基本が希望どおりに機能するようになったので、大きくて明るいバーストをいくつか追加しましょう。

サイケデリックスを取得する

いくつかの回転する三角形から始めましょう。ここでのアイデアは、催眠ストロボ効果を作成することでしたが、これを設定するのは実際には非常に簡単です。次のパラメータを使用して別のバーストを追加します。

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

いくつかの新しいポイントがありますが、ここのすべては今ではかなりよく知られているはずです。形状を三角形として定義するのではなく、 ポリゴン の番号を割り当てる前に ポイント それは3として持っています。

私達はまた与えました 塗りつぶし 使用する色の配列を機能させると、5つおきの三角形が赤に戻り、パターンが継続します。の高い値 角度 設定すると、バーストスピンがストロボ効果を生み出すのに十分な速さになります。

コードが機能しない場合は、前のオブジェクトで行ったように、trianglesオブジェクトをイベントリスナークラスに追加したことを確認してください。

かなりサイケデリックス！それに続く別のバーストを追加しましょう。

五角形を踊る

ほぼ同じものを使用できます 三角形 それに続くバーストを作成するオブジェクト。このわずかに変更されたコードは、鮮やかな色の重なり合う回転する六角形を生成します。

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

ここでの主な変更点は、 遅れ 500msの範囲であるため、三角形が終わるまでバーストは開始されません。いくつかの値を変更することにより、ここでのアイデアは、三角形とは反対の方向にバーストを回転させることでした。偶然にも、五角形が現れるまでに、三角形のストロボ効果により、三角形が一緒に回転しているように見えます。

少しランダム

ランダムな値を利用するエフェクトを追加しましょう。次のプロパティでバーストを作成します。

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

このバーストにより、赤で始まり透明にフェードする線が作成され、時間の経過とともに縮小します。このコンポーネントを興味深いものにしているのは、ランダムな値を使用してそのプロパティの一部を決定していることです。

NS 度シフト 子オブジェクトに開始角度を与えます。これをランダム化することで、クリックごとにまったく異なるバーストが発生します。ランダムな値は、 半径 と 遅れ 混沌とした効果を追加する機能。

効果自体は次のとおりです。

ここではランダムな値を使用しているため、オブジェクトのイベントハンドラーにメソッドを追加する必要があります。

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

NS 生成（） 関数は、イベントが呼び出されるたびに新しいランダム値を計算します。これがないと、シェイプは最初に呼び出されたときにランダムな値を選択し、その後のすべての呼び出しでそれらの値を使用し続けます。これは効果を完全に台無しにするので、これを追加してください！

mo.jsオブジェクトのほぼすべての要素にランダムな値を使用できます。これらは、独自のアニメーションを作成する簡単な方法です。

記事が公開された日付を見つける方法

ただし、アニメーションに動的な動きを追加する方法はランダム性だけではありません。見てみましょう よろめく 関数。

よろめく線

どのように自慢するために よろめく 関数が機能するので、キャサリンホイールのようなものを作成します。次のパラメータを使用して新しいバーストを作成します。

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

ここのすべては今ではおなじみです、バーストは赤またはオレンジの線である50人の子供を作成します。ここでの違いは、 遅れ プロパティa よろめき（10） 関数。これにより、すべての子の放出の間に10ミリ秒の遅延が追加され、私たちが探している回転効果が得られます。

よろめき関数はランダムな値を使用しないため、 生成 今回はイベントハンドラーの関数。これまでのすべての動作を見てみましょう。

ここで簡単に停止できますが、このプロジェクトを締めくくるためにもう1つのバーストを追加しましょう。

スマートスクエア

この最後のバーストでは、長方形を使用して何かを作成しましょう。このオブジェクトをコードとイベントリスナーに追加します。

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

このオブジェクトは、今日すでに取り組んできたものに新しいものを追加するものではなく、コードを介して複雑な幾何学模様を簡単に作成できることを示すためだけに含まれています。

これは、このチュートリアルを作成するテスト段階で作成されたときの、このオブジェクトの意図された結果ではありませんでした。コードが実行されると、意図的に作成できるよりもはるかに美しいものに出くわしたことが明らかになりました。

この最後のオブジェクトを追加すると、完了です。全体の動作を見てみましょう。

Mo.js：Webアニメーション用の強力なツール

このmo.jsの簡単な紹介では、美しいアニメーションを作成するために必要な基本的なツールについて説明します。これらのツールの使用方法は、ほとんどすべてのものを作成できます。多くのタスクでは、Webライブラリを使用する代わりに簡単に使用できます。 Photoshop 、After Effects、またはその他の高価なソフトウェア。

このライブラリは、プログラミングとWeb開発の両方で作業している人に役立ちます。プロジェクトで使用されるイベント処理は、Webサイトまたはアプリでリアクティブボタンやテキストを作成するために簡単に使用できます。それを楽しんでください：間違いはなく、幸せな事故だけです！

共有 共有 つぶやき Eメール Windows 11にアップグレードする価値はありますか？

Windowsが再設計されました。しかし、それはWindows10からWindows11に移行するように説得するのに十分ですか？

次を読む 関連トピック
  • プログラミング
  • JavaScript
著者について イアン・バックリー（216件の記事が公開されました）

Ian Buckleyは、ドイツのベルリンに住むフリーランスのジャーナリスト、ミュージシャン、パフォーマー、ビデオプロデューサーです。マッドサイエンティストになることを期待して、執筆中やステージ上にいないときは、DIYの電子機器やコードをいじっています。

イアン・バックリーのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください