-2

ここで行ったように、要素をアニメーション化するjavascriptライブラリを見つけようとしました。イントロを確認してから、トップメニューからいくつかのフィルターを適用し、ブラウザーウィンドウのサイズを変更してみてください。

このような流動的なレイアウトを実現するものは見つかりませんでした。そこで使われているアニメーションの種類には名前がありますか？それがどのようにコーディングされたのか知っていますか？

4

3 に答える 3

13

私はMountain Dew サイトの主任開発者でした。フィルター処理とグリッド ロジック全体をゼロからコーディングしましたが、Isotopeは、目的を達成する非常に優れた汎用ライブラリです。多くの特定のニーズがあったため、使用しませんでした (主な理由は、アイテムをクリックした後にグリッドを分割する必要があったためです)。以下は、Mountain Dew サイトのグリッドがどのように機能し、どのように並べ替えが行われるかを簡単に説明したものです。

すべてのアイテムのサイズが同じである場合、ロジックは非常に簡単です。1 行に収まるアイテムの数を数え、それに応じて配置するだけです。

var nCols = Math.floor( lineSize / itemWidth );

アイテムのサイズが異なる場合は、パッキング アルゴリズムが必要になる場合がありますが、この場合は可能なサイズがわかっているため、それらはすべて同じグリッド (1x1、1x2、2x2、3x2) に収まり、それらの間にランダムな間隔があります (オーバーラップなし)。 ）、また、独自のアルゴリズムをコーディングする必要があった、製品とプロモーションの配置に関するいくつかの非常に具体的なルールもあります. 私が何をしているのかを簡単に説明します (大まかに言うと、最初に適合するアルゴリズムをパッキングするビン):

  1. ブラウザ ウィンドウのサイズを取得します。
  2. 列数を確認してください。
  3. 配列からランダムな項目を取得します。
  4. 現在の行の次の使用可能なビンに挿入します。
  5. 現在の行に収まらない場合は、アイテムに収まる十分なビンができるまで新しい行を作成します。
  6. 手順 3 ～ 5 を必要な回数繰り返します。

Mountain Dew グリッドに関する注意事項:

  • ボトルを隣接して挿入することはできません。
  • バケットにテイクオーバーのフラグが付けられている場合、それはグリッドの一番上にあるはずです。
  • 除外されたアイテムは、グリッドの一番下に移動する必要があります。
  • フィルターが適用された後、テイクオーバーが行われ、ボトルがグリッド上の任意の場所に配置される可能性があります。
  • それがグリッドの最後の行であり、それ以上のアイテムがない場合、ボトルは互いに隣接する可能性があります (不要な行を作成しないでください)。
  • ボトルはグリッド全体に均等に分散する必要がありますが、疑似ランダムな位置にあります。
  • グリッド上のボトルの量は、グリッド上のアイテムの量に関連しています (12 個のアイテムごとに約 1 個)。
  • アイテムはランダムな間隔で配置し、可能であれば重ならないようにする必要があります (これにより、アイテムが通常のグリッドのように配置されている場合よりも難しくなります)。

ソートは安定したソートで行われます - Array#sortv8 では安定していないため、安定したマージソートを実装しました。配列のすべての項目をループして、次の操作を行うだけです。

//native array sort isn't stable on chrome so we use amd-utils instead
grid.items = sort(grid.items, function(item, next){
    // move inactive items to the end of list
    // if return zero it keeps items at the same relative position
    if (next.active) {
        return (item.active)? 0 : 1;
    } else {
        return (item.active)? 0 : -1;
    }
});

アイテムをどのように並べるかを決定した後は、アイテムの適切な場所を見つけて and を設定するだけelement.style.topですelement.style.left。

// positioning can be calculated based on item index if all items have
// same size. not same logic used on mdew since on mdew we have a
// random gutter between items and they shouldn't overlap each other
var colIndex = itemIndex % (nCols - 1);
var rowIndex = Math.floor(itemIndex / nCols);
var destX = colIndex * colWidth;
var destY = rowIndex * rowHeight;

ブラウザーが CSS トランジションをサポートし、すべての項目の遅延/継続時間が同じである場合、スタイルシートでアニメーションを設定できます。

.grid-item {
    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
            transition: all 500ms ease;
}

しかし、Mountain Dew のサイトでは、アイテムごとにランダムな遅延と期間が必要なため (見栄えが良いため)、JavaScript を使用してトランジションを設定しました。

function randomizeSpeed(){
    var delayProp = vendorPrefix.style('transitionDelay');
    var durationProp = vendorPrefix.style('transitionDuration');
    $('.grid-item').each(function(i, el){
        var duration = rand(SLOWEST_TRANSITION, FASTEST_TRANSITION);
        var delay = map(duration, FASTEST_TRANSITION, SLOWEST_TRANSITION, MIN_DELAY, MAX_DELAY);
        if (delayProp) {
            el.style[delayProp] = delay +'s';
            el.style[durationProp] = duration +'s';
        } else {
            // store delay/duration for JS fallback
            $(el).data({ delay: delay, duration: duration });
        }
    });
}

上記のコードでは、メソッドmath/mapとamd-utilsrandom/randを使用しています。また、機能検出に基づいて、ベンダー プレフィックス付きのスタイル プロパティ ( 、、 ) を取得するために使用するコードもいくつかあります。ブラウザーが CSS トランジションをサポートしていない場合は、JavaScript にフォールバックしてアニメーションを実行します。mozTransitionDelaywebkitTransitionDelaytransitionDelay

if (USE_TRANSFORM && USE_TRANSITION) {
    el.css({translateY: destY, translateX: destX});
} else if (USE_TRANSITION) {
    el.css({top: destY, left: destX});
} else {
    TweenLite.to(el, el.data('duration'), {
        css : { top : destY, left: destX },
        delay : el.data('delay'),
        ease : Expo.easeOut
    });
}

IE 7 ～ 8 のトランジション アニメーションをパフォーマンスのために削除しました。グリッド要素が複雑すぎて、項目が多すぎます。

于 2012-11-12T14:01:32.317 に答える
0

いいえ、mt。露コードの方が優れています。同位体は、グリッドの真ん中に穴を残します。特に、mt のようにセルがランダムに配置されている場合はなおさらです。露。

于 2013-01-23T18:17:42.217 に答える
0

いいえ、ブラウザのサイズ変更時にタッチデバイスでも機能する自動レイアウト機能を持たせるには、このプラグインをここで使用します。次に、そのMTNのことは簡単です。このプラグインは、アニメーション化、ランダム化、シズルを行うだけでなく、並べ替え、並べ替え、フィルター処理も行うことができます.

于 2012-08-12T19:00:00.413 に答える