Geekly Articles each Day

アニメーション化されたJavascriptバナー-簡単*

*）実際、まだ難しいですが、以前より簡単です。

ストーリーは問題の声明から始まりました。1日でHTML + javascriptを使用して、約30個のオブジェクトでアニメーションバナーを作成する必要があります。 もちろん、日中はバナーは作成されませんでしたが、3人日で2回努力して作成されました。 割り当てを完了した後、バッチアニメーションライブラリが残っており、これをScenarioと名付けました。 その改訂版についてお話したいと思います。

ライブラリの主なアイデアは、1つのスクリプトですべてのアニメーションオブジェクトに関する情報を収集し、実行のために送信することです。 1つのスクリプトは、通常のjavascript構造であるため、必要な回数だけ実行したり、変更したりできます。

どこからでもスクリプトを実行するのは非常に簡単です。

var newScenario = [...]; $.scenario(newScenario, { complete: function(time) { alert('!'); } });

例の3つのポイントの代わりに何を書くべきかを理解するだけです。

シナリオの説明


シナリオは、アニメーション化されたオブジェクトの配列または1つのアニメーション化されたオブジェクトです。 各アニメーションオブジェクトには、3つの主要なプロパティを含めることができます。
したがって、シナリオ全体は、アニメーション化されたオブジェクトのツリーです。 さらに、このツリーの構造は、HTML要素の構造と一致する必要はありません。HTML要素のアニメーションは、スクリプトによって記述されます。 スクリプトを開始する最も便利な方法は、このツリーを構築することだと私には思えます。 最後に、次のようになります。

 var newScenario = { element: '#scenario', child: [{ element: '.rocket_smile' child: [{ element: '.fire' }, { element: '.eyes' }, { element: '.ears' }] }, { element: '.rocket_atack' child: { element: '.fire' } }, { element: '.cloud', child: [{ element: ['eq', 0] }, { element: ['eq', 1] } }] };


そして今、魔法はシーンオブジェクトの記述です。
ほとんどの場合、beforeおよびafterパラメーターは、コールバック関数の開始および終了を行いません。 通常のcssプロパティに加えて、アニメーション化された要素に対して追加の操作を指定できます。関数show、hide、attr、removeAttr、addClass、removeClass、toggleClassがサポートされています。 すべてが明らかになる小さな例：

 scene: [{ time: [2500, 4000], before: { opacity: 0, show: '' }, animate: { opacity: 1 } after: { opacity: '' } }, { time: [5500, 6500], before: { addClass: 'rocket_wink' }, after: { removeClass: 'rocket_wink' } }]


さて、真空中の雲の球形コード：

 { element: '.cloud', child: [{ element: ['eq', 0], time: [0, 7500, 'linear'], before: { top: -80, display: 'block', left: 300 }, animate: { top: 374 } }, { element: ['eq', 1], scene: [{ time: [2500, 5500, 'linear'], before: { top: -80, display: 'block', left: 500 }, animate: { top: 374 } }, { time: [5500, 9000, 'linear'], before: { top: -80, display: 'block', left: 150 }, animate: { top: 374 } }] }] }


.cloud要素にはアニメーションがまったくなく、eq（0）要素にはシーンプロパティは含まれませんが、timeプロパティ、beforeプロパティ、およびanimateプロパティが含まれていることに注意してください。これにより、スクリプトエントリをさらに減らすことができます。

基本原則で十分です。

jQuery.animateですべてを実行してみませんか。 生きている例


字幕の2番目の部分に答えます。 シナリオを使用して作成されたアニメーションの例を用意しました。 この例は、冒頭で説明したバナーに非常に似ていますが、すべてのアイデンティティを切り取り、メインキャラクターを忍者に置き換えました。 さらに、興味を引くために、jQuery.animate（同じもの）に同じバナーを作成しました。

生きている例

そして、これがjQuery.animateがそのようなタスクにあまり適していない理由です：
  1. アニメーションが終了すると、Animateは完全な関数を呼び出します。 しかし、彼女は開始前に何も電話しません。 この機能のため、キューを使用する必要があります。
     .delay(2500) .queue(function(next) { $(this).css({top: 82, left: 74}); next(); }) .animate({top: 85}, 1500)

  2. Animateは、現在のjQueryオブジェクト内のすべてのHTML要素を互いに独立してアニメーション化します。 各要素について、アニメーションの終了後に、完全な関数が呼び出されます。 step関数は、アニメーションの各ステップで各要素の各プロパティに対して呼び出されます。 これはさらに不便です。

  3. animateを使用して、一定の時間だけ単純にステップ関数を実行することはできません。 アニメーション化されたプロパティのセットが空の場合、animateはすぐに結果を返します。 ダーティトリックを使用する必要があります。0から0までの値をアニメーション化します。

  4. アニメーションの多くの出口点。 10個の異なるオブジェクトが完全なイベントで同時にアニメーションを終了する場合、どれが最終的なバナーコードを配置する必要がありますか？ どのような場合、10日後にこのコードを完全に探しますか？
    対照的に、シナリオには1つの出口点があります;これは$ .scenario（）の完全な関数です
これらの問題により、次のコードが取得されます。

 //    ,      var $rocket_smile_fire = $rocket_smile.find('.fire'); $rocket_smile_fire //  :  ,       .eq(0) //  : marginTop   0,        .animate({marginTop: 0}, { duration: 9000, step: function(x, opt) { //    this,     $rocket_smile_fire .hide() //          .eq(((new Date() - opt.startTime) / 100) % $rocket_smile_fire.length) .show(); }, complete: function() { $rocket_smile_fire.removeAttr('style'); } });


もちろん、これは悲しいですが、そうでなければ生きることができます...

キラー機能シナリオ


想像してみてください：あなたが作るアニメーションは20秒続きます。 2秒間続く最後のシーンを作成します。 最後の数秒まで、バナーを表示するのにどれだけ時間が無駄になりますか？ jQueryの問題を解決する方法は？ ほとんどの作業を行うコードをコメントアウトします。 オブジェクトを移動したコードがコメントアウトされているため、すべてのオブジェクトがその場所にあるという事実ではありません。

シナリオのソリューション-シーンを開始する時間と終了する時間を指定するだけです。 まあ、再生速度を設定することができます。 ヒープのフレームレート。

時間を設定する機能を備えた例

デバッグは楽しみです。

スクリプトについてもう少し


アニメーション化された要素オブジェクトの説明とシーンのコールバック関数は、説明なしで残りました。 ギャップを埋めます。 要素は次の値を取ることができます。

開始、終了、およびステップコールバック関数は、見つかった要素のコンテキストで実行されます。 3つすべてが取る最初の引数は、スクリプトの開始からの経過時間です。 Last-アニメーションオブジェクトによって展開された現在のシーンのオブジェクト：

 { element: '.rocket_smile', button: $('#start-button'), scene: { time: [0, 2500], fadeDuration: 400, start: function(time, scene) { // scene.fadeDuration     // scene.button     scene.button.fadeOut(scene.fadeDuration); }, animate: { top: 69 } }, }


ステップコールバック関数は、これらの2つのパラメーターに加えて、現在のアニメーションステップに関する詳細情報を持つ別のパラメーターを受け入れます。
-time、スクリプトの開始からの時間。
- 経過 、シーンの開始からの時間。
- 進行 、シーンの開始からの時間、間隔0..1に正規化。
- 位置 、これはイジング関数を適用した後の進捗です。

 { element: '.rocket_atack', scene: { before: { top: 20 }, //  ,    step lastTop: 300, step: function(time, opt, scene) { //    var startTop = scene.before.top; //     var changeTop = scene.lastTop - startTop; // this —   this.css({top: startTop + changeTop * opt.position}); } } }


Githubシナリオコード


今後の計画

多くの人は、ビジュアルエディタについての冗談であることを理解していませんでした。 私は平文で書いています-これは冗談です。

Source: https://habr.com/ru/post/J113681/

More articles:


All Articles