Mootools-fxoptions

提供：Dev Guides
移動先:案内、検索

MooTools-Fx.Options

MooToolsは、Fx.TweenとFx.Morphに役立つさまざまなFx.Optionsを提供します。 これらのオプションを使用すると、効果を制御できます。

MooToolsが提供するいくつかのオプションについて説明しましょう。 先に進む前に、オプションを設定するための次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
  //first state the name of the option
  //place a :
  //then define your option
});

fps（フレーム/秒）

このオプションは、モーフィング中のアニメーションの1秒あたりのフレーム数を決定します。 これらのfpsをMorphまたはTween機能に適用できます。 デフォルトでは、fpsの値は50です。 これは、モーフィング中にすべての機能が1秒あたり50フレームかかることを意味します。

例

5 fpsを使用してdiv要素をモーフィングする例を見てみましょう。 次のコードを見てください。 

<!DOCTYPE html>
<html&gt

   <head>
      <style>
         #morph_element {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>

      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }

         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement, {
               fps: 5
            });

            $('start').addEvent('click', morphStart.bind(morphObject));
         });
      </script>
   </head>

   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "start"value = "START"/>
   </body>

</html>

次の出力が表示されます-

出力

*START* ボタンをクリックして、モーフィングアニメーションを見つけます。 これは、アニメーションに使用されるフレームの数を観察するのに役立ちます。 fpsに異なる値を使用して、アニメーションの違いを取得します。 10未満のfps値を使用することをお勧めします。 これにより、違いを簡単に把握できます。

unit

このオプションは、数値の単位タイプを設定するために使用されます。 一般に、px、％、emsの3種類の単位があります。 次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

上記の構文は、パーセンテージをユニットに割り当てることです。 これは、数字のすべての値がパーセンテージとして扱われることを意味します。

link

このオプションは、アニメーションを開始するための複数の呼び出しを管理する方法を提供します。 一度に複数のイベントコールを適用すると、これらのコールはリンクコールとして取り込まれます。 最初の呼び出しが終了すると、2番目の呼び出しが自動的に実行されます。 それは次の3つのオプションが含まれています-

  • ignore -これはデフォルトのオプションです。 効果が完了するまで、呼び出しの数は無視されます。
  • キャンセル-これは、別の作られている場合、現在の効果をキャンセルします。 最新のコール優先順位に従います。
  • Chain -これにより、エフェクトを連結し、呼び出しのスタックを維持できます。 スタック内のすべてのチェーンされた呼び出しを通過するまで、すべての呼び出しを実行します。

リンクオプションを使用するための次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

期間

このオプションは、アニメーションの継続時間を定義するために使用されます。 たとえば、1秒間にオブジェクトを100ピクセル移動させる場合、1秒間に1000ピクセル移動するオブジェクトよりも遅くなります。 ミリ秒単位で測定される数値を入力できます。 または、数字の代わりにこれら3つのオプションのいずれかを使用できます。

  • ショート= 250ms
  • 通常= 500ms（デフォルト）
  • 長い= 1000ms

期間を使用するための次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

Or, 

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

遷移

このオプションは、遷移タイプを決定するために使用されます。 たとえば、スムーズに移行する必要がある場合や、ゆっくりと開始する必要がある場合は、最後に向かって速度を上げます。 遷移を適用するには、次の構文をご覧ください。

構文

var tweenObject = new Fx.Tween(tweenElement, {
   transition: 'quad:in'
});

次の表に、さまざまな種類の遷移を示します。

S.No. Transition type & Description
1

Linear

イン、アウト、インアウトイベントを伴う線形遷移を表示します

2

Quad

in、out、in-outイベントを含む2次遷移を表示します

3

Cubic

in、out、in-outイベントのあるキュービクルトランジションを表示します

4

Quart

in、out、in-outイベントを含む4次遷移を表示します

5

Quint

in、out、in-outイベントを含む5次遷移を表示します

6

Pow

in、out、in-outイベントでQuad、Cubic、Quart、Quintを生成するために使用

7

Expo

in、out、in-outイベントによる指数関数的な遷移を表示します

8

Circ

in、out、in-outイベントを伴う循環遷移を表示します

9

Sine

入力、出力、入力イベントを含む正弦波遷移を表示します

10

Back

トランジションを元に戻し、その後、イン、アウト、インアウトイベントですべてを開始します。

11

Bounce

in、out、in-outイベントで遷移を弾力的にします

12

Elastic

イン、アウト、イン-アウトイベントを伴う弾性曲線遷移

「https://www.finddevguides.com/index.php?title=Mootools-fxoptions&oldid=27760」から取得
Powered by MediaWiki