博客园_寻雨 .NET C# Study

浅谈Javascript缓载和预载

2011-12-11T15:21:00Z

一、缓载、预载的概念
这些技术不仅限于图片加载，但我们首先讨论最常用的图片加载。

1、缓载：延迟加载图片或符合某些条件时才加载某些图片。

2、预载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。缓载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。

二、缓载的意义与实现

缓载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

主要体现在三种模式上：

第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟，如果用户在加载前就离开了页面，那么就不会加载。

第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

三、预加载的意义与实现

预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(我所知的方法是用记时器轮循宽高变化)。一般实现预载的工具类，都实现一个Array来存需要预载的URL，然后实现Finish、Error、SizeChange等常用事件，可以由用户选择是顺序预载或假并发预载。

四、类库

Jquery的Lazy Load用于图片缓载，Jquery的PreLoad可以用于预载。

五、扩展到非图片

扩展的非图片，主要以DIV为例。一种实现设计模式：我们给需要缓载的DIV加上一个代理类，这样一旦触发其加载事件则会自动的调用代理类进行更新数据。然后将这些需要加载的DIV放入一个集合，计算他们的滚动量，同时设置一个偏移量，然后设置其监视浏览器滚动条，以实现动态缓载。

本文链接

浅谈Javascript面向对象编程

2011-11-13T08:41:00Z

Javascript是一门很灵活的语言，允许我们模拟面向对象编程中的很多机机制。在JS中充分使用面向对象设计思想，可以极大限度的提升代码重用、降低模块间的偶合、更好的逻辑分层与并行开发。下面分几个步骤简单谈下我的理解。

一、数据类型与包装类

包装类 …… 类型名 …… 常见值 …… 分类

Number …… number …… 123.123 …… 基本数据类型

Boolean …… Boolean …… true、false …… 基本数据类型

String …… string …… “hello world!” …… 基本数据类型

Object …… object …… {}、[] …… 复合数据类型

Function …… function …… function(){} …… 特殊类型

无 …… undefined …… undefined、未定义 …… 小数据类型

无 …… null …… null …… 小数据类型

内置类型与本文关系不大，不列出。

二、引用类型与值类型

引用类型：object function

值类型：number、boolean、string、null、undefined

三、new function（构造器）与prototype（原型）

关于prototype的设计模式就不多说了，网上很多介绍，以一个例子介绍一下js中使用new构造对象的过程。

function classname(){this.id=0;} var v=new classname();

当使用function构造对象时，进行以下流程：

1、查找classname的prototype，并进行浅拷贝。

2、绑定this指针到拷贝来的对象。

3、将this.constructor属性设置为classname。

[注：其实classname.prototype.constructor的值也被设置为classname，第六部分会说明]

4、执行用户{}中的代码。

5、返回this指针赋予左值v。

四、实现面向对象的三个基本特征

1、封装

封装这个大家都明白，在js中，重点在于访问权限。在其他原生支持面向对象语言中，一般支持public、protected、private三个关键字来控制访问权限，但在js中，我们只能依靠复杂的作用域关系来控制：

function classname(a){

var uid=a; //uin为模拟private，作用域为{}，外部无法使用

this.getuid=function(){return a;} //为uid提供一个外部只读接口 obj.getuid();

this.setuid=function(val){a=val} //为uid提供一个外部可写接口obj.setuid(5);

this.id=uid; //id为模拟public obj.id 使用

}

classname.prototype.func=function(){}; //模拟public方法 obj.func()调用

classname.stafunc=function(){}; //模拟静态方法 classname.stafunc()调用

var obj=new classname(1);

[!]非常需要注意的就是，因为function是引用类型， classname.prototype.func是所有对象共享的一个function对象（每个对象仅存着引用），因此对象规模不大。而使用this.getuid和this.setuid为定义一个function，因此每个对象实例都会存一份，如果放肆使用这种方法，会造成对象规模庞大，影响性能。个人认为模拟private变量的意义不大。

[!]如果有需求真的需要大量使用this.xxx=function(){}这种情况，在function(){}中的this指针与最外的this指针是不同的，最好在类定义的首行加上var _this=this;，这样在this.xxx=function(){}中也可以方便使用绑定的指针。

2、继承

继承的实现，主要有2种方法：第一种是使用javascript本身的原型模型，通过给prototype赋值并改变其constructor属性来实现继承；第二种方法是不使用prototype，手动实现将父对象的所有属性方法深拷贝到子对象。比如A需要继承B，第一种写法可以：A.prototype=new B();A.prototype.constructor=A; 第二种写法可以写一个递归，或者使用jquery中的方法extend。另外，如果要实现多继承的话，prototype就真的好麻烦了（需要依次多个类，还要建空对象来接），第二种方法就比较简单，依次拷贝即可。一般这种继承为了找父类方便，可以在对象中加个属性，引用父类。

3、多态

函数重载就不说了，都会，检查参数即可，很灵活。隐藏属性就是直接赋值undefined。需要注意的是，如果是打算继承B类的prototype，一定要建一个空对象来接，否则的话，你给类写方法的话，相当于直接修改了prototype，就算不写方法，你最后修改constructor时也会造成继承链错乱，接个空对象很容易：

function temp(){};

temp.prototype=B;

var obj=new temp();

这样再让需要继承B.prototype的类继承obj即可，即便修改prototype也不会影响到B。而且也不像继承new B()那样浪费很多空间。

五、深拷贝与浅拷贝

这个和其他语言中没什么区别，浅拷贝就是直接拷贝，遇到引用类型或类类型不再深入。深拷贝则是根据类型判断，进行递归拷贝。

六、prototype.constructor

这个值主要是用于维护继承的原型链。一篇文章已经写的非常详细，请参考：http://bbs.51js.com/thread-84148-1-1.html

七、JS的面向对象开发

由于我不是前台开发人员，见过项目有限，仅谈自己的经验。

我开发过的B/S，常用两种架构，一种是以CGI为主，由后台语言去生成HTML，JS仅仅做一些用户交互，ajax通信等。另外一种是使用MVC，后台语言仅仅生成JSON，View层完全由JS组件在客户端实现。后者一般大量使用面向对象的思想进行编程，将组件封装成类，将JSON传入构造函数，再由控制器或布局组件Add进来。由于组件可以重用，在开发后台管理系统、JS游戏上，效率还是很可观的。

本文链接

GDB使用技巧

2011-09-01T07:29:00Z

一、常用GDB指令

l 或 list 或 l 行号可以显示代码

回车表示重复上一次命令

break 或 b 表示设置断点后跟行号或函数入口名

info break 查看断点信息

run 或 r 运行程序

next 或 n 单条语句执行

continue 或 c 继续运行程序

print 或 p 表示打印指定变量值后跟变量

bt 查看函数堆栈

finish 退出函数

shell 命令后跟指令执行shell

make 命令等同于 shell make 参数

q 退出gdb

二、启动GDB方法

1、gdb {程序名}

2、gdb {程序名} core

3、gdb {程序名} {PID}

三、运行时配置

1、set args [] 来指定运行时参数

2、path [] 可设置运行时参数

3、show path 查看运行路径

4、set/show env[ironment] varname[=] 查看或设置变量的值

5、cd和pwd 同shell

6、可以使用 > 重定向输出

四、断点的使用

1、可以直接跟[文件名] [函数名/行数] if [条件]

2、直接break 表示停在下一行

3、break +/-行数可以表示当前行号与偏移

4、Break *地址

5、info [break]points [n] n表示断点号

五、观察点的使用

1、watch <exp> 表达式有变化时，停住程序。

2、rwatch <exp> 表达式被读时，停住程序。

3、awatch <exp> 表达式被读写时，停住程序。

4、info watch[points] 查看所有观察点

六、捕捉点的使用

七、维护停止点

1、直接使用clear，并非像手册中的，清除所有停止点，而是清除当前行的停止点。

2、clear 跟行号、函数名等，delete，enable，disenable是跟断点号。

3、condition <断点号> <停止条件表达式> 修改指定断点的中断条件。

4、ignore <断点号> <忽略中断次数> 设置忽略若干次中断后停止。

5、commands [断点号] 如果无断点号，则寻找上一个断点位置，清除也是这个命令。

command_Lists 清除则留空

end commands前可以跟break设置断点

八、恢复及单步调试

1、continue/c/fg [继续断点数] 继续程序执行并忽略后面若干个断点

2、set step-mode on 打开这个模式，可以在程序没有debug信息时，单步继续。

3、step/next [指令数] 单步跟踪，经过若干个代码。

4、finish 执行完当前函数，并返回函数信息（行号，文件名，函数名，返回值），无法返回main函数。

5、until 或 u 类似在循环中使用continue，这点和完全手册上说的不太一样，我实验是无法跳出循环，和c一样效果，继续循环。

6、stepi/si nexti/ni 单步执行一条机械指令。单步时一般使用display/i $pc ，其中/i是显示格式，i是汇编，$pc是gdb内部变量，表示程序机械码的地址，类似寄存器SI。设置display后，可以用info display来查看，一样可以d display 编号来删除。

九、信号处理

1、产生信号：signal <信号名>

2、捕获信号：handle <信号名> <处理方式|[no]stop|[no]print|[no]pass|[no]ignore> 也可以使用info查询

十、线程与栈信息

1、break <代码行号> thread <线程号> if [条件] 其中线程号使用info threads查询

2、backtrace、b [n]打印当前函数栈的所有信息，n表示上/下n层栈信息。如果当前栈不是想要查看的，可以使用frame / f [栈层编号]来切换。

3、使用info frame/f 来查询栈的详细信息。使用info args打印当前函数的参数信息，使用info locals打印局部变量，使用info catch打印出捕获的异常。

十一、源代码信息

2、set/show listsize [size_t] 设置或显示一次显示代码的行数

3、搜索代码其中:forward-search/search <正则表达式>是沿代码往下搜索，reverse-search是沿代码往上搜索。此与手册中说明不符合。

4、关于源文件目录，可以使用show directories来查看，其中包括2个GDB变量：$cdir与$cwd，使用p打印这两个变量值都为void，此处有疑问。清楚目录直接使用directory，设置目录使用dir/directory <源码目录>

5、disassemble <函数名>用于查看指定函数的汇编。

6、info line <函数|行号> 用来查询指定行或函数在运行时的内存地址start、end。

十二、查看运行时数据

1、[p]rint /<输出格式> <exp> 其中exp为表达式：（1）文件|函数：：变量名（2）*首地址@长度（3）{类型名} <内存地址|&变量> 可以查看不同类型解析出来的内容

3、使用$1、2、3、4……可以表示历史记录的变量和内容。

4、环境变量一定要用set $[变量名]=<值>来操作。不可以直接等于。第一次set相当于定义变量。值可以是程序中变量、地址、结构体等。

5、show convenience 表示查看所有环境变量的值。

6、info [all-]registers <regName> 可以查看所有或指定的寄存器名称。print $<寄存器> 也可以访问指定寄存器名称。

7、print <变量名>=<变量值> 可以给变量赋值。同样可以用set [var] <变量名>=<变量值>。同样的效果，为了和系统变量区分，最好加var表示你修改的是程序中的变量。

十三、流程控制

1、jump <文件名：行号|+行号|地址> jump不会修改程序栈中信息，因此跳转出函数时可能报错。不过跳转时会给出提示，是否跨出跳转。

2、可以使用set $pc=<跳转地址> 来控制流程跳转到指定地址。

3、return <expr> 取消该函数的执行并返回expr的值作为返回值。

4、使用call <函数名>来调用函数。也可以使用print通过求表达式的值来求函数的值，并储存在$n变量中去。

十四、杂项

1、set/show language设置/显示当前的语言 set language会显示支持的语言集合。

2、info frame 第三行也可以显示该层的语言

3、info source 显示当前文档的语言

附件为GDB完全手册 GDB完全手册

本文链接

C++学习之重回Primer笔记（开篇）

2011-08-09T02:14:00Z

大学一直以C#为主要语言，对C/C++的使用仅停留在写写数据结构和算法联系上，于是决定利用工作不忙的这段时间，把C++系统的过一遍。既然学C++，我想首选应该是Primer。Primer第四版特别版，正文670页左右，计划用3周时间看完，以下给出计划，并将在系列贴中写下自己的读书笔记，以督促自己学习！

8月9日—8月14日第一、二部分

8月15日—8月21日第三、四部分

8月22日—8月28日第五部分

8月29、30、31日负责整理知识，及附录的查阅。

本贴作为开篇，谨记严格要求自己！

本文链接

新的一年

2011-02-02T19:58:00Z

转眼间，大学生活已经接近尾声，最后一学期了，感觉有点舍不得。年过的还行，还是常常的坐在电脑前一天一天的过，或者通宵达旦的坐在电脑前……其实并不是不累，只是习惯了。过年的时候，才发现自己朋友原来这么多，才发现自己原来喜欢安静，回家后生活感觉少了点什么，也许是，在外想回家，在家想外出吧。家里很暖和，在电脑旁一点也不冷，可惜的就是我寄回来的书还没到手。家里充话费送了400块的书票，又买了一堆书，还是蛮开心的。技术上其实挺迷茫的，或许是学的太杂，或许是想干的太多了。新一年是得有个侧重点了，毕竟去了公司可不想被BS。

现在我负责的事很多，由要更新游戏，又要开发网站，还要学新东西，感觉身心疲惫。新年后得锻炼身体了。其实我对开发看的很开，只是性格太要强了，看来新的一年这点我得改改了，其实很多事不急一时的，我总想的太过完美了，改之改之。

新年准备涉足一些底层的东西，反汇编和Linux C 网络开发之类的，另外就是SL4的开发，毕竟毕业设计还是这块的，答应的事还是要做好。

其实时间一点也不多，感觉有点紧张，时刻都有压力。

身体还是本钱，即使为了一口气，也得保住身体。

今天我把憋在心里十年的话说了出来，呵呵，不知道为什么，不想再隐藏下去了。之后，就是拼命努力，夺取我要的东西。

又一年，我离梦想还是那么远，好在思维不断在接近，眼界不断在开阔。希望明年的今天能有新的领悟。

另外，最近喜欢上唱歌了，很好的放松手段，不是吗？

就这些了，祝福所有我爱的人和爱我的人。新的一年，我风采依然！

本文链接

简单的文字识别

2010-12-26T20:42:00Z

软件工程讲座其中有两节是张老师讲的，一直以来是我和小余的导师，在图形方面很有研究。他给我们留的作业就是一个简单的字母识别。通宵写了这个程序，放上来，有兴趣的可以一起研究。

简单文字识别

使用方法比较简单，先点输入一些学习资料，先写一个字，然后点菜单学习。学习的多了，每写一个键，右键点确定，就会自动分析匹配。

本文链接

译：JamesM的内核开发教程

2010-08-30T17:14:00Z

1.环境配置

我们需要一个基础环境来设计开发我们的内核，在本教程中，我假设您使用的是*nix操作系统和GNU工具集。如果您使用的是Windows操作系统，您必须使用诸如cygwin或DJGPP这类*nux模拟环境。即便如此，本教程中的生成文件和命令仍然可能会出错。

1.1目录结构

我的目录布局如下：

tutorial
|
+-- src
|
+-- docs

所有的源文件都放入src中，所有的文档都放入docs中（平时开发你写文档吗？）

1.2编译

教程里的所有例子都已经通过GNU工具集成功编译 (gcc, ld, gas, etc)，所有样例代码都是用intel风格汇编书写的，因为我个人认为，使用GNU时，intel风格汇编的可读性比AT&T风格汇编的要好很多。我们要使用NASM来汇编程序。

本教程并不是一个内核引导教程，我们使用GRUB来加载内核。为此，我们需要让GRUB预载一个软驱映像。有很多教程可以指导我们使用GRUB，更可喜的是，你可以在我这里找到我做的一个标准软驱映像，把它放在你的教程目录下吧。

1.3运行

什么都不能替代在真机上进行内核测试，但不幸的是，真机的运行结果无法告诉你到底哪里错了（当然，你可能第一次就写出了没有问题的代码，不是吗？）。使用Bochs吧，他是一个开源的兼容32位及64位的虚拟机。当你的程序出错时，Bochs会通知你，并把一些有用的寄存器状态保存到日志中。另外，Bochs比真机启动的快很多，我的所有例子都可以在Bochs上成功运行。

1.4Bochs

为了运行Bochs，我们需要一个Bochs配置文件（bochsrc.txt），凑巧，下面有一个配置例子。

一定要注意这些BIOS文件的顺序，These seem to change between installations（不同版本可能会有不同？？？）。如果你用源代码直接编译出Bochs，很可能你没有这些文件。Google一下文件名，并从官网站上下载。

megs: 32
romimage: file=/usr/share/bochs/BIOS-bochs-latest, address=0xf0000
vgaromimage: /usr/share/bochs/VGABIOS-elpin-2.40
floppya: 1_44=/dev/loop0, status=inserted
boot: a
log: bochsout.txt
mouse: enabled=0
clock: sync=realtime
cpu: ips=500000

以上设置使Bochs虚拟出一个32M内存，350MHz P2的CPU。每秒都会刷过很多信息——但我喜欢一个慢速的虚拟机，原因很简单，这样我可以看清很多文字在滚动。

1.5 使用脚本

我们将要频繁的做一些事——编译和连接我们的项目，把生成的二进制内核写入软驱镜像。

1.5.1 生成脚本

# Makefile for JamesM's kernel tutorials.
# The C and C++ rules are already setup by default.
# The only one that needs changing is the assembler
# rule, as we use nasm instead of GNU as.

SOURCES=boot.o

CFLAGS=
LDFLAGS=-Tlink.ld
ASFLAGS=-felf

all: $(SOURCES) link

clean:
»  -rm *.o kernel

link:
»  ld $(LDFLAGS) -o kernel $(SOURCES)

.s.o:
»  nasm $(ASFLAGS) $<

这段生成脚本将编译SOURCES中的每个文件，并把他们连接在一起生成一个二进制内核。当然，做这些需要一个连接脚本，下面所说的link.ld就是做这个的。

1.5.2 link.ld

/* Link.ld -- Linker script for the kernel - ensure everything goes in the */
/*            Correct place.  */
/*            Original file taken from Bran's Kernel Development */
/*            tutorials: http://www.osdever.net/bkerndev/index.php. */

ENTRY(start)
SECTIONS
{
  .text 0x100000 :
  {
    code = .; _code = .; __code = .;
    *(.text)
    . = ALIGN(4096);
  }

  .data :
  {
     data = .; _data = .; __data = .;
     *(.data)
     *(.rodata)
     . = ALIGN(4096);
  }

  .bss :
  {
    bss = .; _bss = .; __bss = .;
    *(.bss)
    . = ALIGN(4096);
  }

  end = .; _end = .; __end = .;
}

这段脚本告诉LD如何建立内核映像。首先，它告诉LD开始的位置应该在start符号的位置。之后，他告诉LD，.text （你的代码所在）将从0x100000开始执行。之后执行.data段和.bss段，这两项都是page-aligned (ALIGN(4096))，Linux GCC也增加了一个额外的数据段：fodata，这个只是用来初始化，像常数一样。为了简单起见，我们捆绑使用他们。

本文链接

软件实训期间优秀网站赏析集合

2010-08-30T08:40:00Z

一、http://www.oksusutea.com/index.asp 源自夏

网页顶头的菜单非常美妙，缓动的下拉，Hover后字体变大挤开其他字，给人一种动态的感觉。下面的自行车跑动点缀了网页的动态效果，整体页面有很多会动的小物件激活了页面。

二、http://www.joseishi.net/vivi/index_pc.html 源自夏

缺点是网站比较冗余，图片过多使打开速度较慢。特别之处在于中间的翻页FLASH，翻页效果做的很好，还有翻页底下还有一个小的进度条，这个进度条的变化，给人一种动态的感觉。整页面的方体布局给人一种充实的感觉。

三、http://shuxia.cc/ 源自珍

整体感觉美工非常优秀，背景是淡雅的颜色，上面头部的FLASH插画，可以滚动，给人一种书中插画的感觉。颜色搭配鲜艳，但都是宁静色。小物件设计的很细心，字体搭配的非常好。内容位置很合适，标题较鲜明。

四、http://www.cdjsxy.com/ 源自珍

暗金黄色与黑色搭配很合适，只不过中间部分做的比较粗糙。进入首页后是弹出新窗口，这点很不方便。进入首页后，是典型的观赏FLASH设计，上下结构。再有就是加载信息时的进度条，很点缀。

五、http://www.aocen.net/ 源自珍

这个网站颜色选取时，绿色过偏。中间部分其实可以用圆角矩形。页面整体位置偏下，字不够明亮，上下过高，滚动条的出现很不友好。

六、http://www.coca-cola.com.tw/ 源自珍

这个网站是典型的产品站布局，上下流线布局对开，页面简洁大方，信息分类明显。下面那个FLASH的产品展示很优秀，简洁的把所有产品分类罗列了。

七、http://www.pacoo.net/源自丁

这个站有个比较致命的缺点，就是同时出现了卡通字体和正文字体做菜单和标题头，这使得网站风格受到影响，小字给人凌乱的感觉，用户阅读起来很费力气。一般这类可爱的站点，一般都比较花哨，如果整体风格是这类可爱+花哨的，如果一旦出现了一点点不协调因素都会被放大。比如上面的几个按扭，都是背景图片+普通文字，这给视觉造成很大的影响，不仅字难看清，而且整站凌乱。另外一点，网站的宽度不协调，对于上有标头的网站，宽度不应过窄。否则会有尖尖的感觉。

八、http://www.derbauer.de/ 源自丁

欢迎界面做的很有创意思，整站设计风格挺好的，不过网速过慢……悲剧

九、http://milkday.xinxianwu.com/源自丁

动画做的好，栏目之间的横动切换设计的好。

十、http://www.tonlion.com/源自丁

在衣服男女选择时用了中线分割，这个可以借鉴，在一般会员注册中如果选用此方法则很方便。另外，返回首页有点小，其实可以做成上一步就可以。

十一、http://www.nemo-diy.com/Html/index.asp源自丁

整个页面布局也是典型布局，下面使用了弧线效果很好，但纯白色显的有些刺眼，两边过于空旷，弧线的存在稍微缓解了下这个问题。整站上半部分布局太过松散，下面太过紧凑。纯白色显大气，上面的橘黄条也有大气的效果。

本文链接

Silverlight4深蓝游戏开发学习笔记(一) 基础动画方式

2010-08-11T17:41:00Z

SL中提供三种动画的方法:1.Storyboard 2.CompositionTarget 3.DispatcherTimer

一. Storyboard

这是SL首推的动画实现方法,因为Storyboard内部已经为用户进行了一些处理,用户只要一个开始状态,一个结束状态,一个动画实现.就可以组建一个完整的动画.简单步骤:

1.实例化Storyboard对象.

Storyboard sb = neFillBehaviorw Storyboard(); ///这里Storyboard中的board是小写...我总容易打成大写....另外SB这个缩写确实很搞笑...

2.设置一种Timeline (第二个词又是小写..我一打快就容易打成大写....).Timeline直译为时间线,是用来描述在一段时间中对象的状态,它是一个抽象类,包括

Timeline{

AutoReverse bool 播放完后是否反转播放

BeginTime TimeSpan 开始播放时间

Duration Duration(这个类用来描述一段时间,不过重载了一些运算符,支持一些+-之类的运算,一般使用还是用它的构造函数,参数为TimeSpan) 描述动画执行的时间段

FillBehavior FillBehavior(这是个枚举,包括两个值,默认是HoldEnd:当自己这个Timeline执行完后,如果父级对象未终止,则自己保持进度跟着延续.另外一个值是Stop:当自己执行完后,立刻停止.) 这个属性指定当自己超出活动期但父级对象仍在活动时的行为方式.

RepeatBehavior RepeatBehavior(这是一个结构体,主要指定时间线的重复情况,可以用Count来指定重复执行的次数,可以用Forever来无限重复,还可以用一个Duration来设置重复播放总时间)

SpeedRatio double 这个值用来设置时间线的时间前进速度.如果是根时间线,则为设置默认速度.如果为子级时间线,则这个double值是一个比例.0.5表示父级的一半.注意,这个不是直接设置动画的移动速度,则是通过设置时间走的快慢,来调整动画状态.

Completed event 这个是时间线结束后的事件触发.

}

而抽象类Timeline的具体表现,有很多种,但这次主要讲动画方式,所以只拿其中一个DoubleAnimation做例.

DoubleAnimation{

From double? 默认null 这个值表示的是指定属性的开始值

By double? 默认是null 这个By表示的是增量,意思是,指定的属性从From开始插值计算到From+By的和.

To double? 默认是null 这个To表示的是结束值.意思是指定属性从From开始插值计算到To的值.

EasingFunction IEasingFunction(接口,通过一个double类型的参数来表示进度,转换为一个新的表示进度的double值) 这个缓动函数.其实也好理解,就是读取当前时间线进度,通过自定义计算,输出一个计算的新进度,从而实现一些特别的效果,比如忽快忽慢,先快后慢等.

}

3.设置好Timeline后,还要将Timeline绑定到指定属性

这主要依靠三个函数:

Storyboard.SetTargetName(Timeline,string); (时间线对象,如DoubleAnimation的实例,绑定对象的名称)

Storyboard.SetTarget(Timeline,DenpendencyObject); (时间线对象,要绑定的对象.) 注:只有依赖对象才可以进行Storyboard动画.

Storyboard.SetTargetProperty(Timeline, PropertyPath); (时间线对象,要绑定的属性的属性路径) 注:只有依赖属性才可以进行Storyboard动画.(插值引擎只负责通过计算来设置DenpendencyProperty,不负责更新显示工作,而依赖属性值改变后触发事件刷新显示区而更新显示.)

其中PropertyPath是一个密封类,我们一般通过其构造函数来设置要绑定动画的属性的路径.

4.将时间线添加到Storyboard中,并执行动画.

sb.Children.Add(Timeline); //将时间线添加到Storyboard实例
sb.Begin();

最后贴上1-4步的代码:

endPoint = e.GetPosition(LayoutRoot);
Storyboard sb = new Storyboard();
DoubleAnimation da = new DoubleAnimation()
{
    From = Canvas.GetLeft(StoryB),
    To = endPoint.X,
    Duration = new Duration(TimeSpan.FromMilliseconds(2000))
};
Storyboard.SetTarget(da, StoryB);
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
sb.Children.Add(da);
da = new DoubleAnimation()
{
    From = Canvas.GetTop(StoryB),
    To = endPoint.Y,
    Duration = new Duration(TimeSpan.FromMilliseconds(2000))
};
Storyboard.SetTarget(da, StoryB);
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Top)"));
sb.Children.Add(da);
sb.Begin();

二. CompositionTarget

这个是通过注册界面刷新每一帧的Rendering事件来实现的,是在界面刷新的固有频率中增加动画.

实现起来很简单:

CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering); //增加一个事件处理

void CompositionTarget_Rendering(object sender, EventArgs e)
{
　　//动画实现逻辑
}

这样每次界面固定刷新时，都会执行事件，在事件处理中，我们可以进行增加动画：比如按一定规律设置一些对象的DenpendencyProperty来改变对象外观，实现动画。

下面给出实验代码，先在左键单击中计算目的位置坐标，用三角函数求得Tan值，来计算物理在X，Y方向的速度，并存入一个Point中，然后在Rendering中动态设置物理的Canvas.Left和Top，实现动画。全部代码如下：

private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    double dX = Math.Abs(Canvas.GetLeft(CompositionT) - e.GetPosition(LayoutRoot).X);
    double dY = Math.Abs(Canvas.GetTop(CompositionT) - e.GetPosition(LayoutRoot).Y);
    double dXY = dX > dY ? dX : dY;
    speedPoint = new Point(dX / dXY, dY / dXY);
}
void CompositionTarget_Rendering(object sender, EventArgs e)
{
    if (Canvas.GetLeft(CompositionT) < endPoint.X)
    {
        Canvas.SetLeft(CompositionT, Canvas.GetLeft(CompositionT) + speedPoint.X);
    }
    else
    {
        Canvas.SetLeft(CompositionT, Canvas.GetLeft(CompositionT) - speedPoint.X);
    }
    if (Canvas.GetTop(CompositionT) < endPoint.Y)
    {
        Canvas.SetTop(CompositionT, Canvas.GetTop(CompositionT) + speedPoint.Y);
    }
    else
    {
        Canvas.SetTop(CompositionT, Canvas.GetTop(CompositionT) - speedPoint.Y);
    }
}

三. DispatcherTimer

动画实现的方法也是计时器动画，不过优点是可以自己设置事件的触发周期。从命名空间可以看出，DispatcherTimer是在System.Windows.Threading中的类，从它名字上也看的出，Dispatcher是调度，Timer是计时器。其实就是Timer In Dispatcher Queue，Timer可以响应固定的时间间隔，通过响应固定的时间间隔来修改DependencyProperty来实现动画。

这个比较简单，和Timer类似，这里直接给出代码：

DispatcherTimer distimer = new DispatcherTimer();
distimer.Tick += new EventHandler(distimer_Tick);
distimer.Interval = TimeSpan.FromMilliseconds(50);
distimer.Start();

其中 distimer_Tick 这个事件中写入与CompositionTarget的Rendering一样的处理代码即可，可以说DispatcherTimer在功能上，相当于可以设置时间间隔的CompositionTarget。（原理不同，DispatcherTimer是线程计时队列，而CompositionTarget是界面刷新）

以上三种方法是SL中创建动画的最基本方法。

参考文献：

深蓝色右手之动画游戏教程

TerryLee的一步一步SL2

本文链接

开发兼容Win7的Ms Agent程序

2010-07-29T05:20:00Z

有时为了提高客户体验，往往会在程序中增加帮助系统，当年OfficeXP提供了一种叫助手精灵的帮助插件，一个小老头来帮助用户使用Office。现在Win7了，直接使用以往的Ms Agent来开发老头做使用帮助的话，会出现不兼容的情况（即使安装了MS的兼容包，老头也不是透明的，会有粉色的背景。）。当然，也可以选择自己用不规则窗体开发一个精灵老头，只不过种类繁多的魔法动作就难以实现了。不过还好，国外有人已经把Ms Agent修改了为兼容Win7的DoubleAgent。这里给出下载连接：X86版的DoubleAgent。

下载后即可安装，至于那些精灵的文件，网上有很多，MS官网有4种基本精灵的文件：

http://www.microsoft.com/downloads/en/confirmation.aspx?familyId=bd3c4655-79e4-4791-ab9d-abc7bbd133ef&displayLang=en

另外还有个地址有一些用户个人开发的精灵文件：不过个人看，还是老头顺眼点。

http://www.msagentring.org/chars.aspx

把DoubleAgent和精灵安装后，就可以在代码中使用了。首先引用DoubleAgent的组件：Double Agent ActiveX Control，拖动出来的实例为axDaControl系列。

DoubleAgent的使用方法和Ms Agent完全一样，另外安装包中还给了Doc，可以参考。

另外给出我简单写的一个DoubleAgent使用类的代码。代码中DoubleAgent的加载精灵在MainForm的单件中。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace StreetControlSystem.UI
{
    public static class HelpHand
    {
        private static string[] Roles = { "Merlin", "Robby", "Genie", "Peedy" };
        private static string[] Actions ={"RestPose","Wave","DontRecognize","Uncertain","Decline","Sad","StopListening","GetAttention",
                                     "GetAttentionReturn","Blink","Idle3_2","Surprised","Congratulate_2","Reading","Announce",
                                     "Read","ReadReturn","Idle2_2","Writing","Write","WriteReturn","Congratulate","Confused",
                                     "Suggest","MoveRight","MoveLeft","Idle2_1","MoveUp","MoveDown","StartListening","WriteContinued",
                                     "DoMagic1","DoMagic2","Idle1_1","LookDown","LookDownBlink","LookDownReturn","LookLeft",
                                     "LookLeftBlink","LookLeftReturn","Idle1_3","LookRight","LookRightBlink","LookRightReturn",
                                     "LookUp","LookUpBlink","LookUpReturn","Idle1_2","ReadContinued","Pleased","GetAttentionContinued",
                                     "Process","Search","Think","Idle1_4","Greet","Idle3_1","GestureUp","GestureDown","GestureLeft",
                                     "GestureRight","Show","Hide","Hearing_4","Hearing_1","Hearing_2","Hearin","Alert","Explain",
                                     "Processing","Thinking","Searching","Acknowledge"};
        public static void ChangeRoles(int i_role)
        {
            MainForm.Character = MainForm.Singleton.axDaControl1.Characters[Roles[i_role]];
        }

        public static void Hide()
        {
            MainForm.Character.Hide(null);
        }

        public static void Show()
        {
            MainForm.Character.Show(null);
        }

        public static void Speak(string str)
        {
            MainForm.Character.Speak(str, null);
        }

        public static void PlayRandom()
        {
            Random rdm = new Random(DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour + DateTime.Now.Second + DateTime.Now.Minute + DateTime.Now.Millisecond);
            int i_rnd = rdm.Next() % Actions.Length;
            MainForm.Character.Play(Actions[i_rnd]);
        }

        public static void SpeakWithAct(string str)
        {
            Speak(str);
            PlayRandom();
        }

        public static void MoveTo(int x, int y)
        {
            MainForm.Character.MoveTo((short)x, (short)y, null);
        }

        public static void Move(int x, int y)
        {
            MainForm.Character.MoveTo((short)(MainForm.Character.Left + x), (short)(MainForm.Character.Height + y), null);
        }
    }
}

本文链接