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

《多媒体技术与应用：第4章 二维图形动画原理》由会员分享，可在线阅读，更多相关《多媒体技术与应用：第4章 二维图形动画原理（25页珍藏版）》请在装配图网上搜索。

1、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形状填涂为图形的机制(图形格式)。笔画与填充，单色、渐变色、图案，透

2、明度。l理解XAML效果。l掌握XAML动画。l理解XAML屏蔽/剪切路径。l掌握XAML与外部媒体引用。l理解XAML资源与引用。l掌握XAML超链接。24.1 XML二维图形动画应用XAML/Silverlight简介XAML还着力解决本机应用程序界面还着力解决本机应用程序界面(典型地如典型地如Windows窗口界面机制窗口界面机制)与与Web应用应用程序界面程序界面(典型地如典型地如IE等浏览器窗口中等浏览器窗口中XHTML文档界面机制文档界面机制)的技术统一，的技术统一，Web是是XAML/Silverlight技术；本机是技术；本机是XAML/.NET WPF技术。技术。XAML/S

3、ilverlight是是XAML/.NET WPF的一个子集，原理机制完全一致，只是可实现的功能范围有所差的一个子集，原理机制完全一致，只是可实现的功能范围有所差异而已。这样界面只要设计一次，异而已。这样界面只要设计一次，Web、本机都可使用，这无疑会大大地提高软件、本机都可使用，这无疑会大大地提高软件系统的开发效率。系统的开发效率。XAML是是eXtensible Application Markup Language的首字母缩写，中文意译为可的首字母缩写，中文意译为可扩展应用程序标记语言，当前最高版本是扩展应用程序标记语言，当前最高版本是3.0。XAML是一种描述是一种描述Web/本机二维

4、图形本机二维图形动画的语言。动画的语言。XAML二维图形动画技术拥有当前流行的二维图形动画的基本功能，二维图形动画技术拥有当前流行的二维图形动画的基本功能，还具有可交换性、交互性、可扩展性、易维护性等优点，可完美结合还具有可交换性、交互性、可扩展性、易维护性等优点，可完美结合XHTML、脚本、脚本语言等实现强大的语言等实现强大的Web/本机多媒体应用。本机多媒体应用。XAML和和XHTML在语法、功能等众多方面都具有相似性。只不过在语法、功能等众多方面都具有相似性。只不过XHTML偏重于超偏重于超文本理念，而文本理念，而XAML偏重于二维图形理念。将偏重于二维图形理念。将XAML与与XHTML

5、对比理解，是掌握对比理解，是掌握XAML的捷径。的捷径。XAML文档属于互动式二维图形动画视觉媒体，基本原理可参见第文档属于互动式二维图形动画视觉媒体，基本原理可参见第1章中与互动式二章中与互动式二维图形动画紧密相关的内容，特别是二维布局、时间特性、交互性等。该部分则将维图形动画紧密相关的内容，特别是二维布局、时间特性、交互性等。该部分则将以代码的方式叙述以代码的方式叙述XAML，XAML功能强大、元素及其特性丰富，应该注重掌握功能强大、元素及其特性丰富，应该注重掌握XAML的基本原理，并结合的基本原理，并结合Expression Blend软件软件(将在第将在第11章详述章详述)进行操作实验

6、。进行操作实验。34.2 XAML文档结构、元素、CSS、DOM1.XAML文档基本结构文档基本结构2.XAML文档架构及其元素概述文档架构及其元素概述(1)布局系统(Layout Panel)类元素(2)布局变换(Transform)类元素(3)路径(Path)类元素(4)基本形状(Basic Shape)类元素(5)文本(Text)类元素(6)填涂(Painter)类元素(7)效果(Effect)类元素(8)屏蔽/剪切(Mask/Clip)类元素(9)外部媒体引用(External Reference)类元素(10)动画(Animation)类元素(11)超链接(Hyperlink)类元素

7、(12)控件(Control)类元素(13)EventTrigger3.关于关于XAML特性元素特性元素4.关于关于XAML标记扩展标记扩展5.XAML文档样式与文档样式与CSS6.XAML文档逻辑结构与文档逻辑结构与DOM44.3 XAML文档编辑和浏览1.XAML文档浏览文档浏览(1)本机浏览(2)浏览器中浏览(3)本机浏览与浏览器中浏览的异同2.XAML文档编辑文档编辑54.4 XAML布局1.布局系统、元素占位、文档尺寸布局系统、元素占位、文档尺寸(1)Canvas布局元素。(2)Grid布局元素。(3)StackPanel布局元素(4)ScrollViewer布局元素。(5)Bord

8、er布局元素(6)XAML还允许结合JScript、C#等编程创建自定义布局系统，涉及系统的编程知识，根据立体化课程理念，将在后续课程涉及。2.坐标系变换坐标系变换3.层层64.5 XAML路径二维形状定义标准XAML使用使用(路径元素路径元素)来生成复杂的曲来生成复杂的曲线或图形轮廓，然后通过进一步处理线或图形轮廓，然后通过进一步处理(如填充、如填充、笔画等填涂笔画等填涂)而获得而获得XAML复杂图形效果。图复杂图形效果。图4-6 示例文件示例文件path-Ellipse.xaml的运行结果的运行结果路径路径(Path)是二维形状定义的标准。任何图形是二维形状定义的标准。任何图形的轮廓的轮廓

9、(又称为形状又称为形状)都可理解为是由一条或一都可理解为是由一条或一组曲线进行描述的，而任何曲线又都是通过一组曲线进行描述的，而任何曲线又都是通过一组点进行定义的。组点进行定义的。代码代码4-5所示的示例使用所示的示例使用元素生成了一元素生成了一个椭圆，运行结果如图个椭圆，运行结果如图4-6所示。所示。参见教材P9174.6 XAML基本形状图图4-7 示例文件示例文件basicShape-Ellipse.xaml的运行结的运行结果果XAML基本形状是指数学规律上较简单的曲线或图形基本形状是指数学规律上较简单的曲线或图形轮廓，如直线、矩形、椭圆等。基本形状进一步处轮廓，如直线、矩形、椭圆等。基

10、本形状进一步处理理(如填充、笔画等填涂如填充、笔画等填涂)而获得图形效果。而获得图形效果。XAML包包含下列常用的基本形状元素含下列常用的基本形状元素:、等，在此等，在此以以元素生成一个椭圆为例进行叙述，其他元素生成一个椭圆为例进行叙述，其他规则形状元素将在规则形状元素将在11.7.2节结合上机实验叙述。代码节结合上机实验叙述。代码4-6所示的示例使用所示的示例使用元素生成了一个椭圆，元素生成了一个椭圆，运行结果如图运行结果如图4-7所示，和图所示，和图4-6所示的使用所示的使用元素生成椭圆的结果完全相同，可见，元素生成椭圆的结果完全相同，可见，元素元素生成形状是通用的，而生成形状是通用的，而

11、基本形状元素则可基本形状元素则可更快捷生成规则的形状，并可减小文件的复杂性和更快捷生成规则的形状，并可减小文件的复杂性和容量。容量。参见教材P9384.7 XAML形状的填涂/画笔使用使用或或等基本形状元素等基本形状元素生成各种形状后，再对形状进行填涂，就生成各种形状后，再对形状进行填涂，就可获得想要的图形效果。填涂可以分别对可获得想要的图形效果。填涂可以分别对形状的形状的Stroke(笔画，即形状的轮廓线笔画，即形状的轮廓线)和和Fill(填充，即形状的内部填充，即形状的内部)进行。填涂的内进行。填涂的内容可以是容可以是Solid Color(单色单色)，Gradient(渐变色渐变色)或或

12、Pattern(图案图案)。还可。还可设置设置Opacity(不透明度不透明度)、Mask/Clip(屏蔽屏蔽/剪切剪切)、Effect(效果效果)等。等。94.7.1 笔画和填充一个一个XAML形状可分为笔画和填充两部分分别形状可分为笔画和填充两部分分别进行填涂处理，笔画部分是指形状的轮廓线；进行填涂处理，笔画部分是指形状的轮廓线；填充部分是指形状轮廓线包围的内部区域。代填充部分是指形状轮廓线包围的内部区域。代码码4-7是对形状的笔画和填充分别进行处理的一是对形状的笔画和填充分别进行处理的一个示例，运行结果如图个示例，运行结果如图4 8所示。所示。参见教材P93104.7.2 单色图图4-8

13、中，笔画和填充部分填涂的就是单色。颜颜色机制参见色机制参见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 渐变色代码

14、代码4-8是为形状的填充部分填涂渐变色的示例，是为形状的填充部分填涂渐变色的示例，运行结果如图运行结果如图 4 9所示。更多的渐变色将在所示。更多的渐变色将在11.7.5节结合上机实验详述。节结合上机实验详述。参见教材P94124.7.4 图案图案图案(Pattern)可以是图形图案可以是图形图案(如填充外部如填充外部XAML代码文件，代码文件，元素定义元素定义)，也可以是图像图案也可以是图像图案(Texture，又称为材图、纹，又称为材图、纹理，理，元素定义元素定义)，还可以是视频，还可以是视频图案图案(元素定义元素定义)。代码。代码4-9是为是为图形的填充部分填涂图像图案的示例，运行结图形

15、的填充部分填涂图像图案的示例，运行结果如图果如图 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 屏蔽/剪切屏蔽屏蔽/剪切类元素作为形状类元剪切类元

16、素作为形状类元素的特性元素而使用，用来获得素的特性元素而使用，用来获得通常绘画方法难以获得的透明效通常绘画方法难以获得的透明效果。果。代码代码4-11是不透明度屏蔽的一个是不透明度屏蔽的一个示例，运行结果如图示例，运行结果如图4-12所示。所示。参见教材P96代码代码4-12是剪切的一个示例，运是剪切的一个示例，运行结果如图行结果如图4-13所示。所示。参见教材P97 154.7.7 效果XAML支持通过元素的支持通过元素的effect特性元素来获得特性元素来获得效果。代码效果。代码4-13是为是为XAML图形应用效果的图形应用效果的一个示例。一个示例。参见教材P98应用了效果的应用了效果的X

17、AML文档不能直接在文档不能直接在IE中调中调用用Silverlight插件浏览，必须编译后浏览。插件浏览，必须编译后浏览。effect.xaml的运行结果如图的运行结果如图4-14所示，获得所示，获得了通常的图形编辑方法难以获得的阴影视觉了通常的图形编辑方法难以获得的阴影视觉效果。效果。XAML效果效果(Effect)有时也称为滤镜有时也称为滤镜(Filter)，是调用预先编写好的用来获得图形、图像特是调用预先编写好的用来获得图形、图像特效的组件程序而获得效果。效的组件程序而获得效果。XAML效果的功效果的功能主要依靠能主要依靠XAML浏览器浏览器(如如Silverlight)所支所支持的大

18、量预定义的效果功能。持的大量预定义的效果功能。164.8 XAML文本在在XAML文档中需要使用文本时，可以使用文档中需要使用文本时，可以使用、等生成文本并根据文本布等生成文本并根据文本布局特性进行布局。代码局特性进行布局。代码4-14是是元素生成一行文本的示例，运行结果如图元素生成一行文本的示例，运行结果如图 4 15所示。所示。参见教材P99XAML中的文本与其他二维图形元素的机制中的文本与其他二维图形元素的机制类似，所以适用于二维图形元素的特性，也类似，所以适用于二维图形元素的特性，也同样适用于同样适用于元素，如二维坐标变换等。元素，如二维坐标变换等。XAML中的文本可以看作具有文本布局

19、特性中的文本可以看作具有文本布局特性的形状，因此文本排版功能不及的形状，因此文本排版功能不及XHTML等等面向文本的机制，但更容易获得文本的图形面向文本的机制，但更容易获得文本的图形化视觉效果。化视觉效果。174.9 XAML与外部媒体引用XAML可以直接定义二维图形动画、文可以直接定义二维图形动画、文本，同时可以引用集成外部文本、图像、本，同时可以引用集成外部文本、图像、图形、视频、动画、波形音频、图形、视频、动画、波形音频、MIDI器乐等已保存为文件的媒体。此外器乐等已保存为文件的媒体。此外XAML文档支持引用已保存为文件的其文档支持引用已保存为文件的其他他XAML文档，这样有利于文档，这

20、样有利于XAML文档文档的扩展式重复使用。代码的扩展式重复使用。代码4-15是通过是通过元素引用外部图像的一个示元素引用外部图像的一个示例，运行结果如图例，运行结果如图4-16所示。所示。参见教材P100184.10 XAML动画XAML支持动画，动画的基支持动画，动画的基本原理参见本原理参见1.5.1节。从动画节。从动画机制的角度，机制的角度，XAML提供两提供两大类动画类型，即内插帧动大类动画类型，即内插帧动画和持续帧动画。画和持续帧动画。194.10.1 内插帧动画代码代码4-18的示例使用的示例使用元素对元素对元素的透明度属性值随时间元素的透明度属性值随时间/关键关键帧而进行内插值计算

21、，从而获得帧而进行内插值计算，从而获得元素生成的矩形的透明度随时间变化的动画效元素生成的矩形的透明度随时间变化的动画效果，属于内插帧动画。运行结果将如图果，属于内插帧动画。运行结果将如图 4 17所示，获得矩形慢慢消失的动画效果。内插帧所示，获得矩形慢慢消失的动画效果。内插帧动画机制常用于对象属性赋数值等可进行内插动画机制常用于对象属性赋数值等可进行内插帧计算的动画效果。帧计算的动画效果。参见教材P102 204.10.2 持续帧动画代码代码4-19的示例使用的示例使用元素随时间元素随时间/关键帧不断显示新的对关键帧不断显示新的对象或对象属性，并使对象或对象属性象或对象属性，并使对象或对象属性

22、值持续想要的时间，而不是进行内插值持续想要的时间，而不是进行内插帧计算，属于持续帧动画运行结果将帧计算，属于持续帧动画运行结果将如图如图4-18所示，获得矩形在三种颜色所示，获得矩形在三种颜色之间切换的动画效果。持续帧动画机之间切换的动画效果。持续帧动画机制常用于不需要或无法进行内插帧计制常用于不需要或无法进行内插帧计算的动画效果。算的动画效果。参见教材P103 214.11 XAML与超链接作为互动式二维图形动画，作为互动式二维图形动画，XAML支持超链接支持超链接的功能，这与的功能，这与XHTML超链接类似超链接类似(参见参见3.7.1节节)。XAML超链接通过超链接通过元素实元素实现，代

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

24、。代码元素定义，然后通过标记扩展引用。代码4-21是资源的一个示例，运行结果如图是资源的一个示例，运行结果如图4-19所示。所示。参见教材P105234.12 XAML资源定义与引用1.资源的含义资源的含义2.对象资源、对象属性资源对象资源、对象属性资源3.资源可用范围资源可用范围(1)XAML对象级可用资源。(2)XAML文档级可用资源(3)XAML应用级可用资源。(4)XAML跨应用级/资源字典级可用资源244.13 小 结本章根据本章根据XAML布局、布局、XAML形状、形状、XAML形状填涂、形状填涂、XAML文本、文本、XAML与外部媒体引用、与外部媒体引用、XAML动画、动画、XA

25、ML超链接、超链接、XAML资源定义与引用的思路，系统叙述了资源定义与引用的思路，系统叙述了XML在二维图形动画领域的具体应用在二维图形动画领域的具体应用XAML。本章以代码的方式叙述了本章以代码的方式叙述了XAML的基本原理，手工编写的基本原理，手工编写XAML文档是不明智的，应该使用软件工具作为辅助，将文档是不明智的，应该使用软件工具作为辅助，将在第在第10章详述章详述Expression Blend编辑编辑XAML动画。但是必动画。但是必须理解须理解XAML是富图形界面技术的平台，富图形界面应用是富图形界面技术的平台，富图形界面应用都是互动式的，所以系统掌握都是互动式的，所以系统掌握XAML代码是开发富图形界代码是开发富图形界面应用的基础。在实际开发中一般都是使用面应用的基础。在实际开发中一般都是使用XAML文档编文档编辑软件辑软件(如如Expression Blend等等)快速生成快速生成XAML文档的基文档的基本框架，然后根据具体需要手工修改本框架，然后根据具体需要手工修改XAML、JScript、C#代码，从而实现效率与功能的双赢。代码，从而实现效率与功能的双赢。254.14 习 题参见教材参见教材P107