ListView项目动画- Windows商店应用程序

ListView item animations - Windows store app

本文关键字:应用程序 Windows 项目 动画 ListView      更新时间:2023-09-26

我使用visual studio和本教程中的基本网格示例创建了简单的网格应用程序。我期望这个动画将在所有项目的工作,但似乎它只在第一个工作。我的问题是,我怎么能在所有项目的动画?如果可以随机动画(不是一次全部!)例如:windows 8的开始菜单)。

项目模板:

<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);
};

和interval,它改变图像(它写在ready函数中):

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

当您调用document.querySelector时,它将只返回第一个匹配的元素,在您的情况下将是第一个列表项。如果你想动画任意随机项目,只需调用document.querySelectorAll(".item"),从结果列表中选择一个随机项目,然后调用querySelector('.item-image'),像你现在做的那样进行。