Question

我试图找到一个javascript库，以done here的方式为元素添加动画效果。请查看介绍，然后从顶部菜单中应用一些过滤器，并尝试调整浏览器窗口的大小。

我没有找到任何可以完成像这样的流体布局的东西。那里使用的那种动画有名字吗？你知道它是如何被编码的吗？

Answer 1

我是Mountain Dew site的主要开发者。我从头开始编写整个过滤和网格逻辑，但Isotope是一个非常好的通用库，可以完成你想要的。我没有使用它，因为我有很多特定的需求（主要原因是因为我必须在点击一个项目后拆分网格）。下面简单解释了Mountain Dew网站上的网格如何工作以及如何完成排序。

如果所有项目具有相同的大小，则逻辑非常简单，您只需要计算一行中可以放置多少项目并相应地定位它们。

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

如果项目的大小不同，您可能需要一些packing algorithm但是对于这种情况，因为我知道可能的大小并且它们都适合相同的网格（1x1,1x2,2x2,3x2），并且它们随机它们之间的间距（没有重叠），我们还有一些关于产品和促销位置的非常具体的规则我必须编写自己的算法。我所做的简化解释（大约是bin packing first-fit algorithm）：

获取浏览器窗口尺寸。
检查我们可以拥有多少列。
从数组中获取一个随机项。
将其插入当前行的下一个可用 bin 。
如果它不能适合当前行，我们会创建新行，直到我们有足够的 bins 来适应该项目。
根据需要重复步骤3至5次。

关于Mountain Dew网格的一些注意事项：

瓶子不能相邻插入。
如果存储桶被标记为接管，则它应位于网格的顶部。
过滤掉的项目应该转到网格的底部。
应用任何过滤器后接管并且瓶子可能放在网格上的任何位置。
如果它是网格的最后一行，而我们没有更多的项目，则瓶子可以彼此相邻（避免创建不必要的行）。
瓶子应均匀分布在网格上但是在伪随机位置。
网格上的瓶子数量与网格上的项目数量相关（每12个项目大约1个）。
项目应该是随机分布的，如果可能的话应该避免重叠（这比项目定位像普通网格更难）。

使用稳定排序完成排序 - Array#sort在v8上不稳定，因此I implemented a merge sort是稳定的。只需循环遍历阵列上的所有项目并执行以下操作：

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

在我们决定如何订购商品之后，只需找到商品的正确位置并设置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 });
        }
    });
}

在上面的代码中，我使用amd-utils中的方法math/map和random/rand。我还有一些代码用于根据特征检测获取供应商前缀样式属性（mozTransitionDelay，webkitTransitionDelay，transitionDelay）。如果浏览器不支持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上的过渡动画，网格元素太复杂，我们的项目太多了。

Answer 2

不，要在浏览器调整大小上使用自动布局功能，这也适用于触控设备，您可以使用this plugin here。然后，MTN的东西是一件小事做。这个插件可以只是动画，随机和shizzle，但你也可以订购，排序和过滤。

Answer 3

不，山。露码更好。同位素将在网格中间留下孔。特别是如果你的细胞像mt一样随机组合在一起。露。

如何在Mountain Dew网站上完成元素动画？

3 个答案: