您的位置：首页 > 移动开发

Steps to developing Metro style apps 第一章-Creat a UI（3）Animating your UI with the Animation Library

2012-04-01 13:11 911 查看

原文地址：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，第二个是 飞入的坐标

<!DOCTYPE html>


[code]<html>

<head>

<meta charset="utf-8">

<title>Application2</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

$(function () {

var offset = { top: 0 + "px", left: 800 + "px" };

enterPage = WinJS.UI.Animation.enterPage(TextArea1, offset);

})

</script>

</head>

<body>

<div id="ss">

<textarea id="TextArea1" cols="20" rows="2"></textarea><select id="Select1">

<option>ad</option>

<option>ad</option>

<option>ad</option>

<option>ad</option>

</select>

</div>

</body>

</html>

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

效果就是： TextArea1 从右边飞入到达左边

下面演示连续飞入元素：

<!DOCTYPE html>


[code]<html>

<head>

<meta charset="utf-8">

<title>Application2</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

$(function () {

var offset = { top: 0 + "px", left: 800 + "px" };

enterPage = WinJS.UI.Animation.enterPage([[TextArea1], [TextArea2], [TextArea3], [TextArea4]], offset);

})

</script>

</head>

<body>

<div id="ss">

<textarea id="TextArea1" cols="20" rows="2"></textarea><br />

<textarea id="TextArea2" cols="20" rows="2"></textarea><br />

<textarea id="TextArea3" cols="20" rows="2"></textarea><br />

<textarea id="TextArea4" cols="20" rows="2"></textarea><br />

<select id="Select1">

<option>ad</option>

<option>ad</option>

<option>ad</option>

<option>ad</option>

</select>

</div>

</body>

</html>

exitPage http://msdn.microsoft.com/en-us/library/windows/apps/hh701586.aspx




[code]<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Application2</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

$(function () {

var offset = { top: 0 + "px", left: 800 + "px" };

var offset2 = { top: 0 + "px", left: -800 + "px" };

enterPage = WinJS.UI.Animation.enterPage([ss], offset);//飞入效果

$("a").click(function () {// 退出视线

WinJS.UI.Animation.exitPage([ss], offset2);

})

})

</script>

</head>

<body>

<div id="ss" style="margin-left: 500px;">

<textarea id="TextArea1" cols="20" rows="2"></textarea><br />

<textarea id="TextArea2" cols="20" rows="2"></textarea><br />

<textarea id="TextArea3" cols="20" rows="2"></textarea><br />

<textarea id="TextArea4" cols="20" rows="2"></textarea><br />

<select id="Select1">

<option>ad</option>

<option>ad</option>

<option>ad</option>

<option>ad</option>

</select>

</div>

<a href="page.html">ddddddd</a>

</body>

</html>

createExpandAnimation http://msdn.microsoft.com/en-us/library/windows/apps/br212658.aspx

<!DOCTYPE html>


[code]<html>

<head>

<meta charset="utf-8">

<title>Application2</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

function expand(element, affected) {//展开函数，添加项

// 创建展开动画.

var expandAnimation = WinJS.UI.Animation.createExpandAnimation(element, affected);

// 插入item，这会改变原来原来显示的位置

element.style.display = "block";

element.style.position = "inherit";

element.style.opacity = "1";

// 执行动画

expandAnimation.execute();

function collapse(element, affected) {//收起 函数，隐藏item

// 创建收起动画.

var collapseAnimation = WinJS.UI.Animation.createCollapseAnimation(element, affected);

// 从文档流中移除item.

// 不要 从dom中删除此item，要不 在调用expend函数时，将不会显示这个item

element.style.position = "absolute";

element.style.opacity = "0";

// 执行收起动画.

collapseAnimation.execute().then(//执行收起动画后的回掉函数

// 第一个函数是 success 第二个是 error

function () { element.style.display = "none"; },

function () { element.style.display = "none"; }

);

$(function () {

$("a").click(function () {

if (asd.style.display === "none") {

expand(asd, ss); //调用expand函数

else {

collapse(asd, ss); //调用 collapse函数

})

})

</script>

<style type="text/css">

background: gray;

color: #fff;

width: 300px;

</style>

</head>

<body>

<div id="ss" style="margin-left: 500px;">

 <a href="#">ddddddd</a>

<p class="affectedItem">3</p>

<br />

<p id="asd" style="display: none">new item</p>

<p class="affectedItem">2</p>

<br />

<p class="affectedItem">1</p>

<br />

<select id="Select1">

<option>ad</option>

<option>ad</option>

<option>ad</option>

<option>ad</option>

</select>

</div>

</body>

</html>

效果如图：

swipeReveal http://msdn.microsoft.com/en-us/library/windows/apps/br212663.aspx

实现效果：点击div下移25px，露出文字,停滞2秒，移回原来位置：

<!DOCTYPE html>


[code]<html>

<head>

<meta charset="utf-8">

<title>Application2</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

function swipeReveal(element) {

// element 向下移动25px，停滞2秒，移回原来位置

WinJS.UI.Animation.swipeReveal(element, { top: "25px", left: "0px" })

.then(function () { return WinJS.Promise.timeout(2000); })

.then(function () { WinJS.UI.Animation.swipeReveal(element, { top: "0px", left: "0px" }); });

$(function () {

$("#b").click(function () {

swipeReveal(b);

})

})

</script>

<style type="text/css">

#a

text-align: right;

width: 300px;

height: 300px;

#b

width: 300px;

height: 300px;

position: relative;

top: -300px;

background-color: #0094ff;

</style>

</head>

<body>

<div id="a">asd</div>

<div id="b"></div>

</body>

</html>

createAddToListAnimation http://msdn.microsoft.com/en-us/library/windows/apps/br212653.aspx

实现效果：动态添加列表项，删除列表项：

<!DOCTYPE html>


[code]<html>

<head>

<meta charset="utf-8">

<title>Application2</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

$(function () {

$("#add").click(function () {

  //创建添加列表项动画

var anim = WinJS.UI.Animation.createAddToListAnimation(d, ss);

ss.parentNode.insertBefore(d, ss);//加入item

anim.execute();//执行动画对象

})

$("#del").click(function () {

d.parentNode.removeChild(d);//删除列表项

})

})

</script>

<style type="text/css">

</style>

</head>

<body style="margin-left: 200px; border: 1px solid red;">

<div>

<div id="ss">

<p class="affectedItem">3</p>

<br />

<p id="asd" style="display: none">new item</p>

<p class="affectedItem">2</p>

<br />

<p class="affectedItem">1</p>

<br />

</div>

</div>

<a id="add" href="#">添加项</a><br />

<a id="del" href="#">删除项 </a>

<p id="d" class="affectedItem" style="border: 1px solid gray">

asdadsasdasasdads3

</p>

</body>

</html>

createAddToSearchListAnimation http://msdn.microsoft.com/en-us/library/windows/apps/br212654.aspx

点击添加项，动态一次添加八个item,代码如下：

<!DOCTYPE html>


[code]<html>

<head>

<meta charset="utf-8">

<title>Application2</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

function runAddToSearchListAnimation() {

// If there are less than 8 items in list, add another.

if (list.childElementCount < 8) {

var affectedItems = document.querySelectorAll(".listItem");

// 创建item

var newItem = document.createElement("div");

newItem.className = "listItem";

newItem.style.background = randomColor();

var addToSearchList;

if (list.childElementCount > 0) {

// 创建 addToSearchList 动画

addToSearchList = WinJS.UI.Animation.createAddToSearchListAnimation(newItem, affectedItems);

// 插入 随机数位置

list.insertBefore(newItem, list.childNodes[Math.floor(Math.random() * list.childElementCount)]);

} else {

//当list为空时，就添加一个items

addToSearchList = WinJS.UI.Animation.createAddToSearchListAnimation(newItem);

list.appendChild(newItem);

// 执行动画

addToSearchList.execute();

//执行后，等待两秒，继续递归

WinJS.Promise.timeout(Math.floor(Math.random() * 2000)).then(runAddToSearchListAnimation);

  //定义删除items动画

function runDeleteFromSearchListAnimation() {

var listItems = document.querySelectorAll(".listItem:not([deleting])");

// If there are any children still visible, remove another child.

if (listItems.length > 0) {

// Choose a random item to delete.

var deletedItem = listItems[Math.floor(Math.random() * listItems.length)];

deletedItem.setAttribute("deleting", true);

var affectedItems = document.querySelectorAll(".listItem:not([deleting])");

// Create deleteFromSearchList.

var deleteFromSearchList = WinJS.UI.Animation.createDeleteFromSearchListAnimation(deletedItem, affectedItems);

// Execute animation.

var currentDeleteAnimation = deleteFromSearchList.execute();

// Remove deleted item from the DOM after this animation is complete.

// Removing an item from the DOM while an animation is executing on that item cuts the animation short.

currentDeleteAnimation.then(

// On animation completion, remove item.

function () { list.removeChild(deletedItem); },

// On error, clean up and remove deleted item from the DOM.

function () { list.removeChild(deletedItem); }

);

// Delete another item from the list.

// The random delay represents the processing time needed when searching.

WinJS.Promise.timeout(Math.floor(Math.random() * 200)).then(runDeleteFromSearchListAnimation);

function randomColor() {

// Return a random color in #rgb format

var s = '#' + Math.floor((1 + Math.random()) * 4096).toString(16).substr(1);

return s;

$(function () {

$("#add").click(function () {

runAddToSearchListAnimation();

})

$("#del").click(function () {

runDeleteFromSearchListAnimation();

})

})

</script>

<style type="text/css">

.listItem

 width: 200px;

 height: 50px;

</style>

</head>

<body style="margin-left: 200px; border: 1px solid red;">

<a id="add" href="#">添加项</a>

<a id="del" href="#">删除项 </a>

<div id="list" style="border: 1px solid red"></div>

</body>

</html>

效果如图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航