如何根据位置数组为动态数量的项目设置动画

Question

我试图实现的是根据位置数组移动 div 位置。对象数量未知，可能在 4 到 20 之间。

一次只显示 4 个元素。

需要明确的是，我有 4 个不同位置的项目，每次（比如每 4 秒）项目都会改变位置然后离开场景。 （以下，数字代表物品，字母代表位置）

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: d c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - d c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - - d c b a

这些是位置；

var positions = [
    { top: 0,   left: 1100, zoom:70 },//(out of scene)
    { top: 0,   left: 420,  zoom:70 },
    { top: 185, left: 217,  zoom:80 },
    { top: 310, left: 0,    zoom:100},
    { top: 646, left: 210,  zoom:80 },
    { top: 800, left: 210,  zoom:80 } //(out of scene)
];

这是我到目前为止的位置。我相信我被困住了。似乎工作，但它坏了。

var lastItemNo = -1;
var lastAnimation = 0;
var visibleItems = Array();

function tick(){

    visibleItems[visibleItems.length] = (lastItemNo+1);

    if((lastItemNo+1) == items.length){
        lastItemNo = -1;
    }else{
        lastItemNo++;
    }

    if(visibleItems.length>6){
       var removedItem = visibleItems.shift();
       $(".left .holder > .tweet").eq(removedItem).attr("data-pos",0).css({
            top:positions[0].top,
            left:positions[0].left,
            zoom:positions[0].zoom+"%",
        });
    }

    for(var i=0;i<visibleItems.length;i++){
//        console.log($(".left .holder > .tweet").eq(i).attr("data-pos"));
    }

    $.each(visibleItems,function(i,el){

        var currentItem = $(".left .holder > .tweet").eq(el);
        console.log(el);
        console.log(parseInt(currentItem.attr("data-pos"))+i);

        currentItem.animate({
            top:positions[parseInt(currentItem.attr("data-pos"))].top,
            left:positions[parseInt(currentItem.attr("data-pos"))].left,
            zoom:positions[parseInt(currentItem.attr("data-pos"))].zoom+"%",
        });

        currentItem.attr("data-pos", parseInt(currentItem.attr("data-pos"))+1 )


    });

    clog("tick");

}

html 是；

<div class="left">

    <div class="holder">

        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/478523550886658048/rLUgKkv7_normal.png" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Software AG Tu00fcrkiye <small>@SoftwareAGTR</small></div>
                <div class="tweet">TEXT</div>
            </div>
        </div>

        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/478523550886658048/rLUgKkv7_normal.png" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Software AG Tu00fcrkiye <small>@SoftwareAGTR</small></div>
                <div class="tweet">TEXT!</div>
            </div>
        </div>

        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/528538190798675969/La7toYrv_normal.jpeg" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Ece Vahapoglu <small>@ecevahapoglu</small></div>
                <div class="tweet">text https://t.co/JDfP6ATMWk</div>
            </div>
        </div>

        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/581787648584511488/Kxy-mZGu_normal.jpg" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Fatih Mert Esmer <small>@mertesmer</small></div>
                <div class="tweet">#DASummit15 http://t.co/mpnBIh8zJK</div>
            </div>
        </div>

        <div class="tweet" data-pos="0">
            <div class="avatar">
                <img class="user" src="https://pbs.twimg.com/profile_images/475291049724620800/TmAbgWKF_normal.jpeg" boder="0">
                <div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
            </div>
            <div class="text">
                <div class="username">Agah Alptekin <small>@AgahAlptekin</small></div>
                <div class="tweet">RT @digitalage: TEXT ://t.…</div>
            </div>
        </div>
    </div>
</div>

Answer 1

使用与问题中定义的相同的 positions 数组：

var unusedItems = $('.left > .holder > .tweet').get(),
    usedItems = [];

// Initially hide all the items.
$(unusedItems).css({ top: positions[0].top, left: positions[0].left, zoom: positions[0].zoom + "%" });

function tick() {
    // If the usedItems array is full, remove the lead item and add it back
    // to the unusedItems array (as long as the item isn't null).
    if (usedItems.length == positions.length) {
        var item = usedItems.shift();
        if (item) {
            unusedItems.push(item);
        }
    }

    // Add an unused item to the usedItems array if there is one.
    // Otherwise add null as a placeholder.
    usedItems.push(unusedItems.shift() || null);

    // Loop through the usedItems array and animate the items to their
    // new positions, skipping the null placeholders.
    $.each(usedItems, function(i, item) {
        if (item) {
            var $item = $(item),
                position = positions[usedItems.length - 1 - i];
            $item.animate({ top: position.top, left: position.left, zoom: position.zoom + "%" });
        }
    });
}

如果项目数等于或大于位置数，则不会有任何 null 占位符。

null 占位符和以下代码行将位置与项目相关联：

position = positions[usedItems.length - 1 - i];

jsfiddle