Javascript Mountain Dew网站上的元素动画是如何制作的？

我试图找到一个javascript库来设置元素的动画，就像这样。请看一下介绍，然后从顶部菜单应用一些过滤器，并尝试调整浏览器窗口的大小

---

我没有发现任何能完成像这样的流畅布局的东西。那里使用的动画类型有名称吗？您知道它是如何编码的吗？

不知道，要在浏览器调整大小时具有自动布局功能，并且该功能也适用于触摸设备，您可以使用。那么，MTN的东西是小菜一碟。这个插件可以制作动画、随机化和制作shizzle，但你也可以使用它进行排序、排序和过滤。

我是该插件的首席开发人员。我从头开始编写了整个过滤和网格逻辑，但这是一个非常好的通用库，可以实现您想要的功能。我没有使用它，因为我有很多特殊的需求（主要原因是我必须在点击一个项目后分割网格）。下面是Mountain Dew站点上网格的工作原理和排序方式的简化说明

如果所有项目都具有相同的大小，那么逻辑非常简单，您只需计算一行中可以容纳多少个项目，并相应地定位它们

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

如果项目的大小不同，您可能需要一些，但在这种情况下，因为我知道可能的大小，它们都符合相同的网格（1x1、1x2、2x2、3x2），它们之间有随机间隔（没有重叠），而且我们还有一些关于产品和促销放置的非常具体的规则，我必须编写自己的算法。对我所做工作的简单解释（大致A）：

获取浏览器窗口的尺寸

检查我们可以有多少列

从数组中获取一个随机项

将其插入当前行的下一个可用存储箱中

如果无法容纳当前行，我们将创建新行，直到有足够的箱子容纳该项目

根据需要重复步骤3至5次

关于Mountain Dew栅格的一些注释：

• 瓶子不能相邻插入
• 如果一个bucket被标记为takeover，它应该位于网格的顶部
• 筛选出的项目应位于网格底部
• 应用任何过滤器后，瓶子可能会放在网格上的任何位置
• 如果它是网格的最后一行，并且我们没有更多的项目，瓶子可以彼此相邻（避免创建不必要的行）
• 瓶子应均匀地分布在网格上，但应位于伪随机位置
• 网格上的瓶子数量与网格上的项目数量相关（大约每12个项目1个）
• 项目应该是随机间隔的，如果可能的话应该避免重叠（这比项目像规则的网格一样放置要困难得多）

排序是用一个稳定的sort来完成的-

数组#sort

在v8上不稳定，所以它是稳定的。只需循环遍历阵列上的所有项，然后执行以下操作：

//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;
    }
});

在我们决定如何订购物品后，只需找到物品的正确位置并设置

元素.style.top

和

元素.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

和

random/rand

。我还有一些代码，用于根据功能检测获取供应商前缀样式属性（

MozTransitionLay

，

WebKittTransitionDelay

，

TransitionLay

）。如果浏览器不支持CSS转换，我会使用一些JavaScript来制作动画：

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上的过渡动画，网格元素太复杂，我们有太多的项目。

不，mt.dew代码更好。同位素会在你的栅格中间留下空洞。特别是如果你的单元格像mt.dew一样随机放在一起。

该页面上只包含一个JavaScript文件，并且它有一个包含所有库的列表：我知道，但是，当你应用过滤器时，有没有任何库可以做块动画？你能试着对你所说的内容更模糊一点吗？是的，我只是编辑了我的帖子。很抱歉更好吗？