mirror of
https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git
synced 2026-04-11 17:57:19 +10:00
376 lines
17 KiB
HTML
376 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>动画效果测试</title>
|
||
<script type="text/javascript" src="js/module.js"></script>
|
||
<script type="text/javascript" src="js/polyfill-ie.js"></script>
|
||
<link rel="stylesheet" href="libs/winjs/2.0/css/ui-light.css">
|
||
<script type="text/javascript" src="libs/winjs/2.0/js/base.js"></script>
|
||
<script type="text/javascript" src="libs/winjs/2.0/js/ui.js"></script>
|
||
<script type="text/javascript" src="js/animation.js"></script>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
background-color: #f5f5f5;
|
||
padding: 20px;
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #0067b8, #004e8c);
|
||
color: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
.description {
|
||
font-size: 1.1rem;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
.controls {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.control-group {
|
||
background: white;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.control-group h3 {
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
color: #0067b8;
|
||
}
|
||
.demo-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 15px 0;
|
||
flex-grow: 1;
|
||
}
|
||
.demo-element {
|
||
width: 100px;
|
||
height: 100px;
|
||
background: linear-gradient(135deg, #0067b8, #00a4ef);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
}
|
||
.demo-element::after {
|
||
content: "动画元素";
|
||
font-size: 0.9rem;
|
||
text-align: center;
|
||
padding: 5px;
|
||
}
|
||
.animation-buttons {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
button {
|
||
background-color: #0067b8;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
font-size: 14px;
|
||
width: 100%;
|
||
}
|
||
button:hover {
|
||
background-color: #004e8c;
|
||
}
|
||
.animation-status {
|
||
background: #f8f8f8;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
min-height: 60px;
|
||
white-space: pre-wrap;
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
}
|
||
footer {
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
padding: 20px;
|
||
color: #666;
|
||
font-size: 0.9rem;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.controls {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>动画效果测试</h1>
|
||
<p class="description">此页面展示animation.js中定义的所有动画效果。点击每个动画类别下的按钮来测试对应的动画。</p>
|
||
</header>
|
||
|
||
<div class="controls">
|
||
<div class="control-group">
|
||
<h3>弹出动画 (Flyout)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="flyoutElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Flyout.toTop', 'flyoutElement')">向顶端</button>
|
||
<button onclick="runAnimation('Flyout.toBottom', 'flyoutElement')">向底端</button>
|
||
<button onclick="runAnimation('Flyout.toLeft', 'flyoutElement')">向左</button>
|
||
<button onclick="runAnimation('Flyout.toRight', 'flyoutElement')">向右</button>
|
||
<button onclick="runAnimation('Flyout.fromBottom', 'flyoutElement')">从底端</button>
|
||
<button onclick="runAnimation('Flyout.fromTop', 'flyoutElement')">从顶端</button>
|
||
<button onclick="runAnimation('Flyout.fromLeft', 'flyoutElement')">从左侧</button>
|
||
<button onclick="runAnimation('Flyout.fromRight', 'flyoutElement')">从右侧</button>
|
||
</div>
|
||
<div class="animation-status" id="flyoutStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>渐变动画 (Opacity)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="opacityElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Opacity.visible', 'opacityElement')">显示</button>
|
||
<button onclick="runAnimation('Opacity.hidden', 'opacityElement')">消失</button>
|
||
</div>
|
||
<div class="animation-status" id="opacityStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>缩放动画 (Scale)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="scaleElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Scale.up', 'scaleElement')">放大</button>
|
||
<button onclick="runAnimation('Scale.down', 'scaleElement')">缩小</button>
|
||
</div>
|
||
<div class="animation-status" id="scaleStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>默认动画 (Default)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="defaultElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Default.remove', 'defaultElement')">从右返回</button>
|
||
<button onclick="runAnimation('Default.removertl', 'defaultElement')">从左返回</button>
|
||
<button onclick="runAnimation('Default.apply', 'defaultElement')">向右移动</button>
|
||
<button onclick="runAnimation('Default.applyrtl', 'defaultElement')">向左移动</button>
|
||
</div>
|
||
<div class="animation-status" id="defaultStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>边缘动画 (Edge)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="edgeElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Edge.show', 'edgeElement')">从顶部显示</button>
|
||
<button onclick="runAnimation('Edge.hide', 'edgeElement')">向顶部隐藏</button>
|
||
</div>
|
||
<div class="animation-status" id="edgeStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>面板动画 (Panel)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="panelElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Panel.show', 'panelElement')">从右侧显示</button>
|
||
<button onclick="runAnimation('Panel.showrtl', 'panelElement')">从左侧显示</button>
|
||
<button onclick="runAnimation('Panel.hide', 'panelElement')">向右侧隐藏</button>
|
||
<button onclick="runAnimation('Panel.hidertl', 'panelElement')">向左侧隐藏</button>
|
||
</div>
|
||
<div class="animation-status" id="panelStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>弹出动画 (Popup)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="popupElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Popup.show', 'popupElement')">弹出显示</button>
|
||
</div>
|
||
<div class="animation-status" id="popupStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>拖放动画 (Drag)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="dragElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Drag.sourceEnd', 'dragElement')">从右复位</button>
|
||
<button onclick="runAnimation('Drag.sourceEndRtl', 'dragElement')">从左复位</button>
|
||
</div>
|
||
<div class="animation-status" id="dragStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>内容动画 (Content)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="contentElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Content.enter', 'contentElement')">从右进入</button>
|
||
<button onclick="runAnimation('Content.enterrtl', 'contentElement')">从左进入</button>
|
||
</div>
|
||
<div class="animation-status" id="contentStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>页面动画 (Page)</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="pageElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Page.enter', 'pageElement')">从右进入</button>
|
||
<button onclick="runAnimation('Page.enterrtl', 'pageElement')">从左进入</button>
|
||
</div>
|
||
<div class="animation-status" id="pageStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<h3>其他动画</h3>
|
||
<div class="demo-area">
|
||
<div class="demo-element" id="otherElement"></div>
|
||
<div class="animation-buttons">
|
||
<button onclick="runAnimation('Exit', 'otherElement')">退出</button>
|
||
<button onclick="runAnimation('UpdateBadge', 'otherElement')">更新徽章</button>
|
||
</div>
|
||
<div class="animation-status" id="otherStatus">等待动画执行...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>动画效果测试页面 - 使用 WinJS 动画库</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 确保Windows对象存在
|
||
if (typeof Windows === 'undefined') {
|
||
console.error('Windows对象未定义，请确保已正确引入WinJS库');
|
||
} else if (!Windows.UI || !Windows.UI.Animation) {
|
||
console.error('Windows.UI.Animation未定义，请确保animation.js已正确加载');
|
||
}
|
||
|
||
// 动画映射表
|
||
const animationMap = {
|
||
'Flyout.toTop': Windows.UI.Animation.Keyframes.Flyout.toTop,
|
||
'Flyout.toBottom': Windows.UI.Animation.Keyframes.Flyout.toBottom,
|
||
'Flyout.toLeft': Windows.UI.Animation.Keyframes.Flyout.toLeft,
|
||
'Flyout.toRight': Windows.UI.Animation.Keyframes.Flyout.toRight,
|
||
'Flyout.fromBottom': Windows.UI.Animation.Keyframes.Flyout.fromBottom,
|
||
'Flyout.fromTop': Windows.UI.Animation.Keyframes.Flyout.fromTop,
|
||
'Flyout.fromLeft': Windows.UI.Animation.Keyframes.Flyout.fromLeft,
|
||
'Flyout.fromRight': Windows.UI.Animation.Keyframes.Flyout.fromRight,
|
||
'Opacity.visible': Windows.UI.Animation.Keyframes.Opacity.visible,
|
||
'Opacity.hidden': Windows.UI.Animation.Keyframes.Opacity.hidden,
|
||
'Scale.up': Windows.UI.Animation.Keyframes.Scale.up,
|
||
'Scale.down': Windows.UI.Animation.Keyframes.Scale.down,
|
||
'Default.remove': Windows.UI.Animation.Keyframes.Default.remove,
|
||
'Default.removertl': Windows.UI.Animation.Keyframes.Default.removertl,
|
||
'Default.apply': Windows.UI.Animation.Keyframes.Default.apply,
|
||
'Default.applyrtl': Windows.UI.Animation.Keyframes.Default.applyrtl,
|
||
'Edge.show': Windows.UI.Animation.Keyframes.Edge.show,
|
||
'Edge.hide': Windows.UI.Animation.Keyframes.Edge.hide,
|
||
'Panel.show': Windows.UI.Animation.Keyframes.Panel.show,
|
||
'Panel.showrtl': Windows.UI.Animation.Keyframes.Panel.showrtl,
|
||
'Panel.hide': Windows.UI.Animation.Keyframes.Panel.hide,
|
||
'Panel.hidertl': Windows.UI.Animation.Keyframes.Panel.hidertl,
|
||
'Popup.show': Windows.UI.Animation.Keyframes.Popup.show,
|
||
'Drag.sourceEnd': Windows.UI.Animation.Keyframes.Drag.sourceEnd,
|
||
'Drag.sourceEndRtl': Windows.UI.Animation.Keyframes.Drag.sourceEndRtl,
|
||
'Content.enter': Windows.UI.Animation.Keyframes.Content.enter,
|
||
'Content.enterrtl': Windows.UI.Animation.Keyframes.Content.enterrtl,
|
||
'Page.enter': Windows.UI.Animation.Keyframes.Page.enter,
|
||
'Page.enterrtl': Windows.UI.Animation.Keyframes.Page.enterrtl,
|
||
'Exit': Windows.UI.Animation.Keyframes.Exit,
|
||
'UpdateBadge': Windows.UI.Animation.Keyframes.UpdateBadge
|
||
};
|
||
|
||
// 运行动画的函数
|
||
function runAnimation(animationKey, elementId) {
|
||
const targetElement = document.getElementById(elementId);
|
||
const statusElement = document.getElementById(elementId.replace('Element', 'Status'));
|
||
|
||
if (!animationMap[animationKey]) {
|
||
statusElement.textContent = `错误：未找到动画键 "${animationKey}"`;
|
||
return;
|
||
}
|
||
|
||
// 获取动画关键帧
|
||
const keyFrame = animationMap[animationKey];
|
||
|
||
// 更新状态
|
||
statusElement.textContent = `正在执行动画: ${animationKey}\n关键帧: ${keyFrame}\n开始时间: ${new Date().toLocaleTimeString()}`;
|
||
|
||
// 执行动画
|
||
Windows.UI.Animation.RunAsync(targetElement, keyFrame, 1000)
|
||
.then(function() {
|
||
statusElement.textContent += `\n动画完成时间: ${new Date().toLocaleTimeString()}`;
|
||
})
|
||
.catch(function(error) {
|
||
statusElement.textContent = `动画执行出错: ${error.message}`;
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后显示提示
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
const statusElements = document.querySelectorAll('.animation-status');
|
||
statusElements.forEach(element => {
|
||
element.textContent = '页面已加载完成，点击按钮测试动画效果';
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |