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

Question

我试图找到一个javascript库来动画元素,就像在这里完成的方式.请查看介绍,然后从顶部菜单中应用一些过滤器,并尝试调整浏览器窗口的大小.

我没有找到任何完成像这样的流体布局的东西.那里使用的那种动画有名字吗？你知道怎么编码吗？

Answer 1

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

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

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

如果项目具有不同的大小,您可能需要一些打包算法,但是对于这种情况,因为我知道可能的大小并且它们都适合相同的网格(1x1,1x2,2x2,3x2),并且它们之间具有随机间距(没有重叠) ),我们还有一些非常具体的规则,关于我必须编写自己的算法的产品和促销位置.我做的简单解释(大致是bin打包首次拟合算法):

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

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

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

排序是以稳定的排序完成的 - Array#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;
    }
});

在我们决定如何订购商品之后,只需要找到商品的正确位置并设置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,并random/rand从AMD-utils的.我也有一些代码,我用抢厂商前缀样式属性(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上的过渡动画,因为性能,网格元素太复杂而且我们有太多项目.