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

1第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超链接。24.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章详述)进行操作实验。34.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文档逻辑结构与DOM44.3XAML文档编辑和浏览1.

XAML文档浏览(1)本机浏览(2)浏览器中浏览(3)本机浏览与浏览器中浏览的异同2.

XAML文档编辑54.4XAML布局1.布局系统、元素占位、文档尺寸(1)

Canvas布局元素。(2)

Grid布局元素。(3)

StackPanel布局元素(4)

ScrollViewer布局元素。(5)

Border布局元素(6)

XAML还允许结合JScript、C#等编程创建自定义布局系统，涉及系统的编程知识，根据立体化课程理念，将在后续课程涉及。2.坐标系变换3.层64.5XAML路径——二维形状定义标准XAML使用<Path>(路径元素)来生成复杂的曲线或图形轮廓，然后通过进一步处理(如填充、笔画等填涂)而获得XAML复杂图形效果。图4-6示例文件path-Ellipse.xaml的运行结果路径(Path)是二维形状定义的标准。任何图形的轮廓(又称为形状)都可理解为是由一条或一组曲线进行描述的，而任何曲线又都是通过一组点进行定义的。代码4-5所示的示例使用<Path>元素生成了一个椭圆，运行结果如图4-6所示。参见教材P9174.6XAML基本形状图4-7示例文件basicShape-Ellipse.xaml的运行结果XAML基本形状是指数学规律上较简单的曲线或图形轮廓，如直线、矩形、椭圆等。基本形状进一步处理(如填充、笔画等填涂)而获得图形效果。XAML包含下列常用的基本形状元素:<Ellipse>、<Line>、<Polygon>、<Polyline>、<Rectangle>等，在此以<Ellipse>元素生成一个椭圆为例进行叙述，其他规则形状元素将在11.7.2节结合上机实验叙述。代码4-6所示的示例使用<Ellipse>元素生成了一个椭圆，运行结果如图4-7所示，和图4-6所示的使用<Path>元素生成椭圆的结果完全相同，可见，<Path>元素生成形状是通用的，而<Ellipse>基本形状元素则可更快捷生成规则的形状，并可减小文件的复杂性和容量。参见教材P9384.7XAML形状的填涂/画笔使用<Path>或<Ellipse>等基本形状元素生成各种形状后，再对形状进行填涂，就可获得想要的图形效果。填涂可以分别对形状的Stroke(笔画，即形状的轮廓线)和Fill(填充，即形状的内部)进行。填涂的内容可以是SolidColor(单色)，Gradient(渐变色)或Pattern(图案)。还可设置Opacity(不透明度)、Mask/Clip(屏蔽/剪切)、Effect(效果)等。94.7.1笔画和填充一个XAML形状可分为笔画和填充两部分分别进行填涂处理，笔画部分是指形状的轮廓线；填充部分是指形状轮廓线包围的内部区域。代码4-7是对形状的笔画和填充分别进行处理的一个示例，运行结果如图4‑8所示。参见教材P93104.7.2单色图4-8中，笔画和填充部分填涂的就是单色。颜色机制参见1.3.1节、3.6.4节。为了方便使用和兼顾兼容性，颜色可以选用如下表示方法。(1)可以用一个颜色关键词。常用的颜色关键词是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white和yellow。如：Stroke="Black"。(2)

#符号后紧跟2位十六进制的不透明度数值+6位十六进制的颜色数值来表示。如：Fill="#FF0D5C88"。114.7.3渐变色代码4-8是为形状的填充部分填涂渐变色的示例，运行结果如图4‑9所示。更多的渐变色将在11.7.5节结合上机实验详述。参见教材P94124.7.4图案图案(Pattern)可以是图形图案(如填充外部XAML代码文件，<ImageBrush>元素定义)，也可以是图像图案(Texture，又称为材图、纹理，<ImageBrush>元素定义)，还可以是视频图案(<VideoBrush>元素定义)。代码4-9是为图形的填充部分填涂图像图案的示例，运行结果如图4‑10所示。更多的图案将在11.7.5节结合上机实验详述。参见教材P95134.7.5不透明度透明度机制参见1.3.1节，又常以Opacity(不透明度)方式表示，以[0，1.0]区间值表示，默认值为1.0，即完全不透明。代码4-10是为XAML图形应用透明度的一个示例，运行结果如图4-11所示。参见教材P96144.7.6屏蔽/剪切屏蔽/剪切类元素作为形状类元素的特性元素而使用，用来获得通常绘画方法难以获得的透明效果。代码4-11是不透明度屏蔽的一个示例，运行结果如图4-12所示。参见教材P96代码4-12是剪切的一个示例，运行结果如图4-13所示。参见教材P97 154.7.7效果XAML支持通过元素的effect特性元素来获得效果。代码4-13是为XAML图形应用效果的一个示例。参见教材P98应用了效果的XAML文档不能直接在IE中调用Silverlight插件浏览，必须编译后浏览。effect.xaml的运行结果如图4-14所示，获得了通常的图形编辑方法难以获得的阴影视觉效果。XAML效果(Effect)有时也称为滤镜(Filter)，是调用预先编写好的用来获得图形、图像特效的组件程序而获得效果。XAML效果的功能主要依靠XAML浏览器(如Silverlight)所支持的大量预定义的效果功能。164.8XAML文本在XAML文档中需要使用文本时，可以使用<TextBlock>、<TextBox>、<PasswordBox>等生成文本并根据文本布局特性进行布局。代码4-14是<TextBlock>元素生成一行文本的示例，运行结果如图4‑15所示。参见教材P99XAML中的文本与其他二维图形元素的机制类似，所以适用于二维图形元素的特性，也同样适用于<text>元素，如二维坐标变换等。XAML中的文本可以看作具有文本布局特性的形状，因此文本排版功能不及XHTML等面向文本的机制，但更容易获得文本的图形化视觉效果。174.9XAML与外部媒体引用XAML可以直接定义二维图形动画、文本，同时可以引用集成外部文本、图像、图形、视频、动画、波形音频、MIDI器乐等已保存为文件的媒体。此外XAML文档支持引用已保存为文件的其他XAML文档，这样有利于XAML文档的扩展式重复使用。代码4-15是通过<Image>元素引用外部图像的一个示例，运行结果如图4-16所示。参见教材P100184.10XAML动画XAML支持动画，动画的基本原理参见1.5.1节。从动画机制的角度，XAML提供两大类动画类型，即内插帧动画和持续帧动画。194.10.1内插帧动画代码4-18的示例使用<DoubleAnimationUsingKeyFrames>元素对<Rectangle>元素的透明度属性值随时间/关键帧而进行内插值计算，从而获得<Rectangle>元素生成的矩形的透明度随时间变化的动画效果，属于内插帧动画。运行结果将如图4‑17所示，获得矩形慢慢消失的动画效果。内插帧动画机制常用于对象属性赋数值等可进行内插帧计算的动画效果。参见教材P102

204.10.2持续帧动画代码4-19的示例使用<ObjectAnimationUsingKeyFrame>元素随时间/关键帧不断显示新的对象或对象属性，并使对象或对象属性值持续想要的时间，而不是进行内插帧计算，属于持续帧动画运行结果将如图4-18所示，获得矩形在三种颜色之间切换的动画效果。持续帧动画机制常用于不需要或无法进行内插帧计算的动画效果。参见教材P103

214.11XAML与超链接作为互动式二维图形动画，XAML支持超链接的功能，这与XHTML超链接类似(参见3.7.1节)。XAML超链接通过<HyperlinkButton>元素实现，代码4-20是一个示例。不过基于安全性考虑，必须编译后才能运行。XAML超链接是驱动XAML互动式应用的重要机制。参见教材P104XAML从媒体的角度可称为超二维图形动画媒体。XAML编辑者则可在超链接(事件)驱动为主导还是动画(时间)驱动为主导之间做出选择。224.12XAML资源定义与引用XAML资源的目的是为了重用，资源通过特性元素定义，然后通过标记扩