Steps to developing Metro style apps 第一章-Creat a UI（3）Animating your UI with the Animation Library
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/br211362.aspx
第一章知识结构：
第三节：Animating your UI with the Animation Library(动画页面)
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx
所有动画效果：http://msdn.microsoft.com/en-us/library/windows/apps/br229780.aspx
Animations for app navigation页面导航动画
enterPage http://msdn.microsoft.com/en-us/library/windows/apps/br212672.aspx
//WinJS.UI.Animation.enterPage(element, offset) 第一个参数是 动画的元素id，第二个是 飞入的坐标
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Application2</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12:
13: $(function () {
14:
15: var offset = { top: 0 + "px", left: 800 + "px" };
16:
17: enterPage = WinJS.UI.Animation.enterPage(TextArea1, offset);
18: })
19: </script>
20: </head>
21: <body>
22: <div id="ss">
23: <textarea id="TextArea1" cols="20" rows="2"></textarea><select id="Select1">
24: <option>ad</option>
25: <option>ad</option>
26: <option>ad</option>
27: <option>ad</option>
28: </select>
29: </div>
30: </body>
31: </html>
效果就是： TextArea1 从右边飞入到达左边
下面演示 连续飞入元素：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Application2</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12:
13: $(function () {
14:
15: var offset = { top: 0 + "px", left: 800 + "px" };
16:
17: enterPage = WinJS.UI.Animation.enterPage([[TextArea1], [TextArea2], [TextArea3], [TextArea4]], offset);
18: })
19: </script>
20: </head>
21: <body>
22: <div id="ss">
23: <textarea id="TextArea1" cols="20" rows="2"></textarea><br />
24: <textarea id="TextArea2" cols="20" rows="2"></textarea><br />
25: <textarea id="TextArea3" cols="20" rows="2"></textarea><br />
26: <textarea id="TextArea4" cols="20" rows="2"></textarea><br />
27:
28: <select id="Select1">
29: <option>ad</option>
30: <option>ad</option>
31: <option>ad</option>
32: <option>ad</option>
33: </select>
34: </div>
35: </body>
36: </html>
效果： 四个textarea one by one 飞入
1.
2
exitPage http://msdn.microsoft.com/en-us/library/windows/apps/hh701586.aspx
实现效果：页面div飞入，点击 a标签以后 ，div飞出视线
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Application2</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12:
13: $(function () {
14:
15: var offset = { top: 0 + "px", left: 800 + "px" };
16: var offset2 = { top: 0 + "px", left: -800 + "px" };
17:
18: enterPage = WinJS.UI.Animation.enterPage([ss], offset);//飞入效果
19:
20: $("a").click(function () {// 退出视线
21:
22: WinJS.UI.Animation.exitPage([ss], offset2);
23:
24:
25: })
26:
27: })
28:
29:
30: </script>
31: </head>
32: <body>
33: <div id="ss" style="margin-left: 500px;">
34: <textarea id="TextArea1" cols="20" rows="2"></textarea><br />
35: <textarea id="TextArea2" cols="20" rows="2"></textarea><br />
36: <textarea id="TextArea3" cols="20" rows="2"></textarea><br />
37: <textarea id="TextArea4" cols="20" rows="2"></textarea><br />
38: <select id="Select1">
39: <option>ad</option>
40: <option>ad</option>
41: <option>ad</option>
42: <option>ad</option>
43: </select>
44: </div>
45: <a href="page.html">ddddddd</a>
46: </body>
47: </html>
createExpandAnimation http://msdn.microsoft.com/en-us/library/windows/apps/br212658.aspx
动画添加列表项：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Application2</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12:
13: function expand(element, affected) {//展开函数，添加项
14: // 创建展开动画.
15: var expandAnimation = WinJS.UI.Animation.createExpandAnimation(element, affected);
16:
17: // 插入item，这会改变原来原来显示的位置
18: element.style.display = "block";
19: element.style.position = "inherit";
20: element.style.opacity = "1";
21:
22: // 执行动画
23: expandAnimation.execute();
24: }
25:
26: function collapse(element, affected) {//收起 函数，隐藏item
27: // 创建收起动画.
28: var collapseAnimation = WinJS.UI.Animation.createCollapseAnimation(element, affected);
29:
30: // 从文档流中移除item.
31: // 不要 从dom中删除此item，要不 在调用expend函数时，将不会显示这个item
32: element.style.position = "absolute";
33: element.style.opacity = "0";
34:
35: // 执行收起动画.
36: collapseAnimation.execute().then(//执行收起动画后的回掉函数
37: // 第一个函数是 success 第二个是 error
38: function () { element.style.display = "none"; },
39: function () { element.style.display = "none"; }
40: );
41: }
42: $(function () {
43:
44:
45:
46: $("a").click(function () {
47:
48: if (asd.style.display === "none") {
49: expand(asd, ss); //调用expand函数
50: }
51: else {
52: collapse(asd, ss); //调用 collapse函数
53:
54: }
55: })
56:
57: })
58:
59:
60: </script>
61: <style type="text/css">
62: p
63: {
64: background: gray;
65: color: #fff;
66: width: 300px;
67: }
68: </style>
69: </head>
70: <body>
71: <div id="ss" style="margin-left: 500px;">
72: <a href="#">ddddddd</a>
73: <p class="affectedItem">3</p>
74: <br />
75: <p id="asd" style="display: none">new item</p>
76: <p class="affectedItem">2</p>
77: <br />
78: <p class="affectedItem">1</p>
79: <br />
80: <select id="Select1">
81: <option>ad</option>
82: <option>ad</option>
83: <option>ad</option>
84: <option>ad</option>
85: </select>
86: </div>
87:
88: </body>
89: </html>
效果如图：
swipeReveal http://msdn.microsoft.com/en-us/library/windows/apps/br212663.aspx
实现效果：点击div下移25px，露出文字,停滞2秒，移回原来位置：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Application2</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12: function swipeReveal(element) {
13: // element 向下移动25px，停滞2秒，移回原来位置
14: WinJS.UI.Animation.swipeReveal(element, { top: "25px", left: "0px" })
15: .then(function () { return WinJS.Promise.timeout(2000); })
16: .then(function () { WinJS.UI.Animation.swipeReveal(element, { top: "0px", left: "0px" }); });
17: }
18: $(function () {
19: $("#b").click(function () {
20:
21: swipeReveal(b);
22: })
23:
24: })
25:
26:
27: </script>
28: <style type="text/css">
29: #a
30: {
31: text-align: right;
32: width: 300px;
33: height: 300px;
34: }
35: #b
36: {
37: width: 300px;
38: height: 300px;
39: position: relative;
40: top: -300px;
41: background-color: #0094ff;
42: }
43: </style>
44: </head>
45: <body>
46:
47: <div id="a">asd</div>
48: <div id="b"></div>
49: </body>
50: </html>
createAddToListAnimation http://msdn.microsoft.com/en-us/library/windows/apps/br212653.aspx
实现效果： 动态添加 列表项，删除列表项：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Application2</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12:
13:
14: $(function () {
15: $("#add").click(function () {
16: //创建添加列表项动画
17: var anim = WinJS.UI.Animation.createAddToListAnimation(d, ss);
18: ss.parentNode.insertBefore(d, ss);//加入item
19: anim.execute();//执行动画对象
20: })
21: $("#del").click(function () {
22: d.parentNode.removeChild(d);//删除列表项
23: })
24: })
25: </script>
26: <style type="text/css">
27:
28: </style>
29: </head>
30: <body style="margin-left: 200px; border: 1px solid red;">
31: <div>
32: <div id="ss">
33: <p class="affectedItem">3</p>
34: <br />
35: <p id="asd" style="display: none">new item</p>
36: <p class="affectedItem">2</p>
37: <br />
38: <p class="affectedItem">1</p>
39: <br />
40:
41: </div>
42: </div>
43: <a id="add" href="#">添加项</a><br />
44: <a id="del" href="#">删除项 </a>
45: <p id="d" class="affectedItem" style="border: 1px solid gray">
46: asdadsasdasasdads3
47: </p>
48: </body>
49: </html>
createAddToSearchListAnimation http://msdn.microsoft.com/en-us/library/windows/apps/br212654.aspx
点击添加项，动态一次添加八个item,代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Application2</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
12: function runAddToSearchListAnimation() {
13: // If there are less than 8 items in list, add another.
14: if (list.childElementCount < 8) {
15: var affectedItems = document.querySelectorAll(".listItem");
16:
17: // 创建item
18: var newItem = document.createElement("div");
19: newItem.className = "listItem";
20: newItem.style.background = randomColor();
21:
22: var addToSearchList;
23: if (list.childElementCount > 0) {
24: // 创建 addToSearchList 动画
25: addToSearchList = WinJS.UI.Animation.createAddToSearchListAnimation(newItem, affectedItems);
26: // 插入 随机数位置
27: list.insertBefore(newItem, list.childNodes[Math.floor(Math.random() * list.childElementCount)]);
28: } else {
29: //当list为空时，就添加一个items
30: addToSearchList = WinJS.UI.Animation.createAddToSearchListAnimation(newItem);
31: list.appendChild(newItem);
32: }
33:
34: // 执行动画
35: addToSearchList.execute();
36:
37:
38: //执行后，等待两秒，继续递归
39: WinJS.Promise.timeout(Math.floor(Math.random() * 2000)).then(runAddToSearchListAnimation);
40: }
41: }
42: //定义删除items动画
43: function runDeleteFromSearchListAnimation() {
44: var listItems = document.querySelectorAll(".listItem:not([deleting])");
45:
46: // If there are any children still visible, remove another child.
47: if (listItems.length > 0) {
48: // Choose a random item to delete.
49: var deletedItem = listItems[Math.floor(Math.random() * listItems.length)];
50:
51: deletedItem.setAttribute("deleting", true);
52: var affectedItems = document.querySelectorAll(".listItem:not([deleting])");
53:
54: // Create deleteFromSearchList.
55: var deleteFromSearchList = WinJS.UI.Animation.createDeleteFromSearchListAnimation(deletedItem, affectedItems);
56:
57:
58:
59: // Execute animation.
60: var currentDeleteAnimation = deleteFromSearchList.execute();
61:
62: // Remove deleted item from the DOM after this animation is complete.
63: // Removing an item from the DOM while an animation is executing on that item cuts the animation short.
64: currentDeleteAnimation.then(
65: // On animation completion, remove item.
66: function () { list.removeChild(deletedItem); },
67: // On error, clean up and remove deleted item from the DOM.
68: function () { list.removeChild(deletedItem); }
69: );
70:
71: // Delete another item from the list.
72: // The random delay represents the processing time needed when searching.
73: WinJS.Promise.timeout(Math.floor(Math.random() * 200)).then(runDeleteFromSearchListAnimation);
74: }
75: }
76:
77: function randomColor() {
78: // Return a random color in #rgb format
79: var s = '#' + Math.floor((1 + Math.random()) * 4096).toString(16).substr(1);
80: return s;
81: }
82:
83: $(function () {
84: $("#add").click(function () {
85: runAddToSearchListAnimation();
86:
87: })
88: $("#del").click(function () {
89: runDeleteFromSearchListAnimation();
90:
91: })
92:
93: })
94: </script>
95: <style type="text/css">
96: .listItem
97: {
98: width: 200px;
99: height: 50px;
100:
101: }
102: </style>
103: </head>
104: <body style="margin-left: 200px; border: 1px solid red;">
105:
106: <a id="add" href="#">添加项</a>
107: <a id="del" href="#">删除项 </a>
108: <div id="list" style="border: 1px solid red"></div>
109: </body>
110: </html>
效果如图：
