javascript - Timeline JS GreenSock GSAP 背景爆炸

Question

如何在 Timeline 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;
}

`