ListView项目动画 - Windows应用商店

我使用visual studio中的基本网格示例创建简单的网格应用程序，并使用this教程。我预计这个动画将适用于所有项目，但它似乎只适用于第一个。我的问题是，我如何在所有项目上制作动画？如果可以随机播放动画（不是一次全部播放！例如：Windows 8开始菜单）。ListView项目动画 - Windows应用商店

项目模板：

<div class="itemtemplate" data-win-control="WinJS.Binding.Template"> 
    <div class="item"> 
     <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" /> 
     <img class="item-image-new" src="#" data-win-bind="src: backgroundImage; alt: title" /> 
     <div class="item-overlay"> 
      <h4 class="item-title" data-win-bind="textContent: title"></h4> 
      <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6> 
     </div> 
    </div> 
</div>

的js动画：

var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC"; 
var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC"; 
var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC"; 

// Play the Peek animation 
function peekTile(tile1, tile2) { 
    // Create peek animation 
    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]); 

    // Reposition tiles to their desired post-animation position 
    tile1.style.top = "-250px"; 
    tile2.style.top = "0px"; 

    // Execute animation 
    peekAnimation.execute(); 
} 

function changeImage() { 
    // Get the two image elements 
    var images = document.querySelector(".item-image"); 
    var imagesNew = document.querySelector(".item-image-new"); 

    // Swap out the old image source and choose the new image source 
    images.src = imagesNew.src; 
    if (images.src == lightGray) 
     imagesNew.src = mediumGray; 
    else if (images.src == mediumGray) 
     imagesNew.src = darkGray; 
    else 
     imagesNew.src = lightGray; 

    // Reset the elements for the pre-animation position and trigger the animation 
    images.style.top = "0px"; 
    imagesNew.style.top = "250px"; 
    peekTile(images, imagesNew); 
};

间隔，改变图像（它是功能齐全里面写）：

setInterval(function() { changeImage() }, 4000);

来源

2013-05-06 Clem

当你调用document.querySelector它只会返回第一个匹配元素，在你的情况下这将是第一个列表项。如果您想动画随机物品，只需拨打document.querySelectorAll(".item")，从结果列表中选取一个随机项目，然后在其上调用querySelector('.item-image')，按目前的操作进行。

来源

2013-05-07 12:15:16

那个工作，谢谢。 – Clem 2013-05-07 12:21:02

我看到你在Windows团队中，所以我希望你可以在这个问题上回答我： http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/9da52b5a-b7e6 -4f90-9813-76d92e5280cd 谢谢 – Clem 2013-05-07 12:22:38

ListView项目动画 - Windows应用商店

回答

相关问题