多媒体技术与应用第4章二维图形动画原理.pptVIP

*第4章二维图形动画原理学习提示：基于XML规范的多媒体应用有XHTML、SVG/XAML、X3D等，可形成媒体的整体解决方案。本章将系统叙述XML二维图形动画应用——XAML的基本原理，为后面介绍二维图形动画的具体应用奠定理论基础。本章主要以代码的方式叙述XAML，建议结合第11章进行上机实验。本章学习目标如下：l 理解SVG/XAML是XML二维图形动画媒体应用。l 掌握XAML常用元素的功能和用法。l 掌握XAML布局容器。l 掌握XAML坐标系变换。l 理解XAML路径(二维形状定义标准)，路径与规则形状的相互关系。l 理解XAML形状填涂为图形的机制(图形格式)。笔画与填充，单色、渐变色、图案，透明度。l 理解XAML效果。l 掌握XAML动画。l 理解XAML屏蔽/剪切路径。l 掌握XAML与外部媒体引用。l 理解XAML资源与引用。l 掌握XAML超链接。*4.1XML二维图形动画应用XAML/Silverlight简介XAML还着力解决本机应用程序界面(典型地如Windows窗口界面机制)与Web应用程序界面(典型地如IE等浏览器窗口中XHTML文档界面机制)的技术统一，Web是XAML/Silverlight技术；本机是XAML/.NETWPF技术。XAML/Silverlight是XAML/.NETWPF的一个子集，原理机制完全一致，只是可实现的功能范围有所差异而已。这样界面只要设计一次，Web、本机都可使用，这无疑会大大地提高软件系统的开发效率。XAML是eXtensibleApplicationMarkupLanguage的首字母缩写，中文意译为可扩展应用程序标记语言，当前最高版本是3.0。XAML是一种描述Web/本机二维图形动画的语言。XAML二维图形动画技术拥有当前流行的二维图形动画的基本功能，还具有可交换性、交互性、可扩展性、易维护性等优点，可完美结合XHTML、脚本语言等实现强大的Web/本机多媒体应用。XAML和XHTML在语法、功能等众多方面都具有相似性。只不过XHTML偏重于超文本理念，而XAML偏重于二维图形理念。将XAML与XHTML对比理解，是掌握XAML的捷径。XAML文档属于互动式二维图形动画视觉媒体，基本原理可参见第1章中与互动式二维图形动画紧密相关的内容，特别是二维布局、时间特性、交互性等。该部分则将以代码的方式叙述XAML，XAML功能强大、元素及其特性丰富，应该注重掌握XAML的基本原理，并结合ExpressionBlend软件(将在第11章详述)进行操作实验。*4.2XAML文档结构、元素、CSS、DOM1.??XAML文档基本结构2.??XAML文档架构及其元素概述(1)布局系统(LayoutPanel)类元素(2)布局变换(Transform)类元素(3)路径(Path)类元素(4)基本形状(BasicShape)类元素(5)文本(Text)类元素(6)填涂(Painter)类元素(7)效果(Effect)类元素(8)屏蔽/剪切(Mask/Clip)类元素(9)外部媒体引用(ExternalReference)类元素(10)动画(Animation)类元素(11)超链接(Hyperlink)类元素(12)控件(Control)类元素(13)??EventTrigger3.关于XAML特性元素4.关于XAML标记扩展5.??XAML文档样式与CSS6.??XAML文档逻辑结构与DOM*4.3XAML文档编辑和浏览1.??XAML文档浏览(1)本机浏览(2)浏览器中浏览(3)本机浏览与浏览器中浏览的异同2.??XAML文档编辑*4.4XAML布局1.布局系统、元素占位、文档尺寸(1)??Canvas布局元素。(2)??Grid布局元素。(3)??StackPanel布局元素(4)??ScrollViewer布局元素。(5)??Border布局元素(6)??XAML还允许结合JScript、C#等编程创建自定义布局系统，涉及系统的编程知识，根据立体化课程理念，将在后续课程涉及。2.坐标系变换3.层*4.5XAML路径——二维形状定义标准XAML使用Path(路径元素)来生成复杂的曲线或图形轮廓，然后通过进一步处理(如填充、笔画等填涂)而获得XAML复杂图形效果。图4-6示例文件path-Ellipse.xaml的运行结果路径(Path)是二维形状定义的标准。任何图形的轮廓(又称为形状)都可理解为是由一条或一组曲线进行描述的，而任何曲线又都是通过一组点进行定义的