Javascript 如何在Windows 8桌面中更改CreatePeek动画函数的动画对象的offsetArray值?
我正在尝试在Windows8应用程序中使用Peek动画功能。在我的代码中,我调用了runHomeScreenUpdates函数,该函数在特定的时间间隔内更新主屏幕分幅 早些时候,我使用了createAddToListAnimation函数,该函数运行良好。但是对于较小的瓷砖,我想使用Peek动画。我传递了中提到的两个图像对象。如前所述,我还通过更改style top属性编辑了图像的偏移量,但它不起作用。此处的动画对象Peek动画不获取任何偏移值。当我使用断点检查它时,动画对象的偏移数组的值为“0”。如何更改此offsetArray值Javascript 如何在Windows 8桌面中更改CreatePeek动画函数的动画对象的offsetArray值?,javascript,jquery,visual-studio-2012,windows-8,Javascript,Jquery,Visual Studio 2012,Windows 8,我正在尝试在Windows8应用程序中使用Peek动画功能。在我的代码中,我调用了runHomeScreenUpdates函数,该函数在特定的时间间隔内更新主屏幕分幅 早些时候,我使用了createAddToListAnimation函数,该函数运行良好。但是对于较小的瓷砖,我想使用Peek动画。我传递了中提到的两个图像对象。如前所述,我还通过更改style top属性编辑了图像的偏移量,但它不起作用。此处的动画对象Peek动画不获取任何偏移值。当我使用断点检查它时,动画对象的偏移数组的值为“0
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);
}
在主屏幕上。运行动画后,图像不会显示