1

我正在尝试在 Windows 8 应用程序中使用 Peek Animation 功能。在我的代码中，我调用了一个runHomeScreenUpdates以特定间隔更新主屏幕图块的函数。

早些时候我正在使用该createAddToListAnimation功能，它工作正常。但是对于较小的图块，我想使用 Peek Animation。我传递了MSDN 示例中提到的两个图像对象。我还通过更改提到的“样式顶部属性”来编辑图像的偏移量，但它不起作用。这里的动画对象“peekanimation”没有得到任何偏移值。当我使用断点检查它时，动画对象的偏移数组的值是“0”。如何更改此 offsetArray 值？

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 = "-120px";
  tile2.style.top = "0px";
  // Execute animation
  peekAnimation.execute();
  return "success";
}
function runHomeScreenUpdates(obj) {
  initHomeScreenUpdates();
  var updateInterval = obj.data("updateInterval");
  var localStorageKey = obj.data("localStorageKey");
  clearInterval($(obj).data("autoUpdateInterval"));
  var data = localStorage.getItem(localStorageKey);
  // for bigger tiles I used create add to list animation. it works fine.
  if (WinJS.Navigation.location.indexOf("hub.html") >= 0) {
    var interval = setInterval(function () {
      var index = $(obj).data("index");
      if (index == 22 || index == 23) {
        var lists = JSON.parse(localStorage.getItem("lists"));
        lists = lists[localStorage.getItem("selectedCity")] || {};
        if (lists.count > 0) {
          if (sessionStorage.getItem("listIndex") == null || sessionStorage.getItem("listIndex") >= (lists.count - 1)) {
            sessionStorage.setItem("listIndex", 0);
          } else {
            sessionStorage.setItem("listIndex", parseInt(sessionStorage.getItem("listIndex")) + 1);
          }
          var div = $(obj).find(".largeTileTextTemplateMedText");
          var newDiv = document.createElement("div");
          newDiv.innerHTML = lists[sessionStorage.getItem("listIndex")].text;
          newDiv.className = "largeTileTextTemplateMedText";
          var affected = div.get(0);
          // Step 1: Create the animation object and save the result
          var animation = WinJS.UI.Animation.createAddToListAnimation(newDiv, affected);
          // Step 2: Insert the element given in the added parameter immediately before
          // the element given in the affected parameter. This causes both elements to move.
          affected.parentNode.insertBefore(newDiv, affected);
          // Step 3: Execute the animation
          animation.execute().then(function () {
            myData4[index].text = lists[sessionStorage.getItem("listIndex")].text;
            myData4[index].id = lists[sessionStorage.getItem("listIndex")].id;
            hubList = new WinJS.Binding.List(myData4);
            groupedItems = hubList.createGrouped(function (item) { return item.group.key; }, function (item) { return item.group; });
          });
          $(affected).remove();
        }
      } else {
      // for the smaller tiles i want to use the peek animation!! this part--
        var img = $(obj).find(".foodshot");
        var foodshots = JSON.parse(localStorage.getItem("foodshots"));
        foodshots = foodshots[localStorage.getItem("selectedCity")] || {};
        if (foodshots.count > 0) {
          if (sessionStorage.getItem("foodshotIndex") == null || sessionStorage.getItem("foodshotIndex") >= (foodshots.count - 1)) {
            sessionStorage.setItem("foodshotIndex", 0);
          } else {
            sessionStorage.setItem("foodshotIndex", parseInt(sessionStorage.getItem("foodshotIndex")) + 1);
          }
          var r = sessionStorage.getItem("foodshotIndex");
          var newsrc = foodshots[r].url;
          var newimg = document.createElement("img");
          newimg.setAttribute("src", newsrc);
          newimg.className = "foodshot";
          var affected = img.get(0);
          affected.style.top = "0px";
          newimg.style.top = "120px";
          var check = peekTile(affected, newimg);
          if(check == "success"){
            myData4[index].cuisineID = foodshots[r].cuisine_id;
            myData4[index].cuisine = foodshots[r].cuisine;
            myData4[index].picture = foodshots[r].url;
            $(obj).find(".foodshot-text").get(0).innerHTML = foodshots[r].cuisine;
            hubList = new WinJS.Binding.List(myData4);
            groupedItems = hubList.createGrouped(function (item) { return item.group.key; }, function (item) { return item.group; });
          };
          $(affected).remove();
        }
      }
    }, updateInterval);
    $(obj).data("autoUpdateInterval", interval);
  }

在主屏幕上。运行动画后，图像不会出现。

4

0 回答 0