XAML 图形系列 - 第一部分 Silverlight 1.0 XAML 桌面艺术动画
4.50/5 (6投票s)
这是关于使用 Silverlight 1.0 和 JavaScript 创建 XAML 应用程序的介绍。
目录
引言
这是关于在图形应用程序、艺术和可视化中使用 XAML 的系列文章的第一篇。本文档适合初级平面设计艺术家或程序爱好者。本文档中介绍的 Silverlight 1.0 应用程序展示了如何使用故事板在 Silverlight 1.0 中创建简单的动画。Microsoft Expression Studio 用于创建此演示。演示程序循环显示图像和覆盖图像的矩形的各种属性，从而产生图形效果。要完全理解本文档的内容，需要一些 HTML、JavaScript 和图形技术的初步知识。
该系列将分为以下几个部分：
- 入门（无需编程经验）
- 中级（具备一定的编程知识者有帮助）
- 高级（具备高级编程概念知识者非常有帮助）
背景
我曾在使用 JDK 2.0 的 Java Applet 时设计了这样一个主动桌面应用程序界面的概念。我使用了 Sun 的 Java Applet 桌面演示作为 applet。这就像拥有一个 Vista 桌面或 Google 桌面。当时这些范例还不存在。我的许多想法都引领了新技术和创新的道路。目前，我正在为使用云服务托管的交互式互联网桌面应用程序制定细节。使用这种方法可以托管无限数量的虚拟桌面。这类似于 Solaris 服务器在工作组模式下的工作方式。Sun 的服务器在字符串解析和 IO 方面进行了高度优化。我认为这才是未来 Web 技术托管的方式。
此外，本文档和本系列的目的是弥合平面设计师、开发人员和架构师之间的差距，并分享一些优化工作量和代码的技巧，同时探索利用我们现有技术的新颖方法并引入一些新想法。
系列分解
入门系列
- Silverlight 1.0 桌面艺术动画
- Silverlight 2.0 桌面艺术动画
- XAML 二维图形概念
- XAML 三维图形概念
中级系列
- 动态 XAML
- WPF 应用程序设计与架构
- Silverlight 应用程序设计与架构
- 高级概念介绍：DirectX、OpenGL 和过滤
高级系列
- GPU 的解剖以及 XAML 如何针对 GPU 进行优化
- GPU 优化技术
- 混合运用：DirectX、OpenGL 等
- 整合一切：设计自定义图形引擎的方法
必要的代码修改
要使用本文中的代码，只需将演示文件复制到您选择的目录中。如果使用 Windows，请打开 Windows 的桌面属性，设置一个指向 Default.html 文件的活动桌面关联。如果您不知道如何为您的操作系统执行此操作，只需在网上搜索一下主题即可找到所需的步骤。保存您的桌面设置。现在您应该可以在桌面上看到 Silverlight 桌面艺术正在运行。示例动画会缓慢地循环显示带有球形渐变的矩形的颜色调色板，并调整矩形和图像的不透明度，以创建平滑的颜色混合效果。我将这种效果视为阳光照耀和消失在云层中，或者摄影师停下来拍摄场景。包含的艺术作品是使用 Expression Design 2.0 制作的，并按顺序应用了以下效果：水彩、刮刀和外发光，均使用默认设置。照片由我最喜欢的摄影师提供。
然后将图像保存为 PNG 格式，并将其复制到 Expression Blend 2.0 中的 Silverlight 1.0 项目。修改完故事板以达到所需效果后，我保存了项目并修改了 HTML 文件：Default.html，以便在我的桌面上正确显示图像。我还修改了 App.js，以便在 XAML 加载时启动动画。XAML 的介绍将在接下来的三个部分中介绍。
//
// Default.html code modifications:
//
....HTML Code Change...
<style type="text/css">
#silverlightControlHost {
height: 960px;
width: 1260px;
}
#errorLocation {
font-size: small;
color: Gray;
}
</style>
....HTML Code Change...
//
// Page.xaml.js code modifications:
//
DeskTopBackground.Page.prototype =
{ handleLoad: function(control, userContext, rootElement)
{
this.control = control;
this.control.content.findName.Begin();
},
}
演示工作原理
XAML、JavaScript、JSON、XML 和 DOM 是 Silverlight 的基础。虽然 Silverlight 没有内置的任何用户控件，但可以设计和部署自定义用户控件来使用这个技术子集。演示仅使用 XAML 和 JavaScript。在 1.0 版本之前的版本中也提供了其他技术，并且将在下一系列文章中与 XAML 和 SVG 等其他矢量图像格式进行深入研究。即使我们不直接启动 Internet Explorer 浏览器来渲染我们的 Silverlight 应用程序，Internet Explorer 也会被调用为应用程序容器。应用程序容器负责创建应用程序的环境和隔离。它还托管 Silverlight 1.0 用于事件处理和 DOM 操作的 JScript 引擎。由于在设计良好的 OOP 和基本安全问题方面的笨拙，我将不深入介绍 JScript。
代码执行概述
- 调用浏览器并加载 HTML。
- JScript 引擎加载依赖的脚本文件（仅支持 JScript）。
- JScript 创建 Silverlight 插件的容器，并设置 HTML 和 JScript 文件中定义的属性。
- 容器加载后，XAML 由容器加载。
- 此时，容器内部会发生一些神奇的事情，使其能够访问受保护的系统资源。
- 然后容器渲染 XAML，并通过 JScript 开始处理输入和事件。
- 通过调用
StoryBoard对象的 'Begin' 方法，在页面加载事件时启动演示。
我将在本文中不再详细介绍 Storyboard。将在下一部分中介绍，届时我们将进行一些架构练习，以查找任何可重用的工件。我们将通过查看 XAML 的架构来做到这一点，并尝试识别提供良好可重用性的 XAML 元素，并使其成为所有应用程序设计利益相关者的关注点。
Silverlight 路线图
黄色 = 建议的 Silverlight 3.0，橙色 = Silverlight 2.0 及更高版本，灰色 = Silverlight 1.0 及更高版本，浅蓝色 = 核心
关注点
球形渐变落在我所拍摄的陶罐的中心，并增加了球形效果，这是偶然的。我喜欢这个效果。在创建故事板时，我发现 Blend 会自动调整时间线上的故事键。这很麻烦，因为摄影师想要的效果与所显示的效果不同。开始一个新的 storyboard 会更简单。但是，我不想为渐变定义进行所有的复制粘贴。我假设了一个初学者的角色，以便理解其他人可能如何使用 Blend。这导致了一些丑陋的 XAML。如何正确地恢复/重构现有的 XAML 工件将在下一部分中介绍。我确实发现使用 Silverlight 1.0 有一个问题。动画运行时，CPU 会占用 100%。对这个问题的研究表明，可以通过更改 HTML 中的帧率设置来解决这个问题。不幸的是，我在我的电脑上尝试纠正这个问题失败了。在下一部分中，我们将更好地控制 Silverlight 环境，这个问题将得到解决。作为一个 Silverlight 2.0 开发者，这是我第一次使用 1.0。我认为该应用程序无需编译就很有趣。这将使 Silverlight 1.0 应用程序的动态渲染 XAML 非常容易。