javascript - Timeline JS GreenSock GSAP中的背景爆炸

Question

如何在时间轴 GreenSock GSAP Javascript http://www.greensock.com/中创建背景爆炸？我搜索但找不到方法。我对 GSAP 完全陌生，我有一个紧急项目，对我来说很难创造这种效果。

这是我需要实现的效果示例：

提前致谢。

Answer 1

我解决了这个问题。这不是一个完美的解决方案，但它可以满足我的需求。

JavaScript：

   function rand2Number(){
    return Math.round(Math.random(1));
}

var rows = 10,
    columns = 10,
    cntPiecesBg = $('#cntPiecesBg'),
    wWidth = $('.wrapper').outerWidth(),
    wHeight = sectionHeight,
    objWidth = wWidth/rows,
    objHeight = wHeight/columns;

for(var i=0; i<rows*columns; i++){

   var topIndex = Math.floor(i/rows),
       leftIndex = i%rows;


   var obj = $('<span></span>')
        .css({
            width:objWidth ,
            height:objHeight,
            top : objHeight*topIndex,
            left: objWidth*leftIndex
        });

    cntPiecesBg.append(obj);
}


var pieces = cntPiecesBg.find('span'),
    backgroundTl = new TimelineLite(),
    nt = { signs:['-=','+='] };

pieces.each( function (){
        var $this = $(this);


        backgroundTl.insertMultiple([
            TweenMax.staggerTo($this, 2, {css:{ top : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0} , ease:Power1.easeOut}),
            TweenMax.staggerTo($this,2, {css:{ left : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0}, ease:Power1.easeOut} )
        ]);
    }
)

CSS：

#cntPiecesBg span{
    position:absolute;
    display: block;
    font-size: 0;
    background-color: #313435;
}

`