silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)

原文: silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)

本教程基本涵盖了WPF和silverlight中的各种动画。先上张效果图。

声明下,这个做的不是让大家照搬的,只是让大家熟悉下动画效果,这个成品基本涵盖了sl里面所有的动画效果。如果大家真的想掌握动画,我建议按着做一遍。看的不如动手的说.

觉的好的别忘记推荐下,谢谢了

img_5b2881779c47a3bac6764f515c5889ab.jpe

很多人对这个网站应该很熟悉,我用这个做案例,一步步实现他所有的动画效果。相信你做完以后动画水平能有不小的提高。

看上面的图可以发现他是由几块动画组成的。这节我们开始小鸟的制作。

img_b6070a25b152ca90005bf48af795e861.jpe

开发环境,blend 4.

1.在blend 4中新建一个silverliht程序。

img_7756260d85544b314a6743d824fed07d.jpe

2.应该小鸟只是整个动画中的其中的一个部分,所以新建一个文件夹,在其中新建一个usercontrol。

img_b80749f96516fdf4b841e77b273c07f4.jpeimg_cfa1fbbce78b6cde30c514abbac85c70.jpeimg_8258906f3a4f4a554f0ae66d27981f10.jpe

3.设置可视区为width:400,height:412.同时将页面大小设为375*319(默认情况下,silverlight总会有一个固定的尺寸,要想让其自动扩展,很简单把Height="640",Width="480"删除即可(或设置成Auto),但是这样处理后,用blend再打开该xaml文件,可视区域就为0了,很不方便选取对象,这时我们可以加上这标识mc:Ignorable="d" ,再用blend打开时,会发现可视区域变成640*480了,而运行时即仍然可以自动扩展)

4.选择钢笔工具,绘制小鸟的尾巴。用钢笔绘制出其中一根羽毛(画圆弧时按住alt键,等出现一个v形时拖动)。绘制完成后,用渐变画刷作为填充(#FFF4DF00,#FFB15800)。同时设置路径的边框为6.

img_2213b69b3dd6a79a7317904fab888176.jpeimg_e781c6d037aa2586864a5e21bfb23f86.jpeimg_2a77a03c0650bf1ba0d2e24f014b66cd.jpeimg_07c87c2d217538cc3a106e059b0bb92a.jpe

5.将路径复制3次,一共得到4个路径。调整每个路径到合适的位置,然后按住ctrl键选中4个路径,右击将他们合并到一个grid中,并将grid命名为tail。

img_eb775a7489b40da442653c4440442bf4.jpe

6.画一个圆作为小鸟的身体。用椭圆工具,按住alt键画圆。给圆形填充线性渐变(#FFF4C900,#FFA15000)。这时候你会发现你的渐变方向不对,选择渐变工具来调整方向。

img_59b24c5db10fa90d63ad25b88d1a93e3.jpe

7.复制刚才画的圆,将圆略微缩小,用纯色画刷填充(#FF8E4903)。去掉stroke画刷,并改变透明度为41%。

img_9a668cc499cd83a204a5a708ef2942ec.jpeimg_f1a38c52cfb5bc31018e8239c7bf1344.jpeimg_0d552c247f1bbf065714dfd743708c4c.jpe

8.再次复制2个圆形,缩小后用纯色画刷填充(#FFFFFFFF)。并改变透明度为10%。

img_b9201b5a1f58c16e95fd18a71e58e088.jpeimg_5cfc36cbd1f3a6d44d302f71f36a520b.jpeimg_46d5e57a92b91bd2012671ea83975a9f.jpe

9.复制最小的那个圆,移动到合适位置,用纯色画刷填充(#FF000000)。并改变透明度为20%。这个圆用来做小鸟眼部的阴影。将这个圆重命名为shadowEye。

img_fc6e4c0017164532d9bc2145b6c3e09a.jpeimg_fc44515d063ce7fee5717d82a8244c07.jpeimg_6eccb2e1145677216c46939742d842f9.jpe

10.复制一个圆作为小鸟的眼睛。按照下图设置圆的属性。效果不一样的情况:没有讲透明度改为100,渐变的位置不对。

img_f400a7bf92285cc3f7c022d305a6e3d4.jpeimg_586b260e533aceb738f6c3b5f5e2f091.jpeimg_862800757e95db882546d4fa9d01158d.jpe

11.绘制小鸟嘴吧。选择钢笔工具,绘制两个三角形。并按下图设置属性。用渐变工具可以改变渐变方向。如果小鸟嘴巴没有被身体遮住,调整一下位置。

img_b88516e49f6adb598a394a5f4625c4be.jpeimg_fbda64b2545fa0852fee4afbe92b8997.jpeimg_0afc567d93ea3c11e331ca5035a3eb2b.jpe

12.绘制小鸟的脚。选择椭圆工具,按住shift键,画出一个圆,并按照下图设置属性。(同样方法画出另外两个脚)

img_3483882b13b0e2ffbc79e5ef5ffc9890.jpeimg_94f49cc26336e89fc5e9efb55cbef776.jpeimg_6d0f1bb81cd2f7d543dc3faebf8640c6.jpe

13.画出小鸟眼睛。先用椭圆画出一个圆,设置一下属性。

img_37a7d95bd4e35fcc136b84d3d2c51e6b.jpeimg_af2ef66b2624a48ada16fa7938302270.jpeimg_baf0e4acab0cc138d5b7ebfbe9ff1d67.jpe

14.用同样的方法在中间画出瞳孔。(将两个圆合并到grid中,命名为eye_grid)

img_8077aa99922641352e7847eb16fec174.jpeimg_7972ac417ebe767e6fd9a85c46407fb9.jpeimg_e8b2d8db9ad95b30ffedfd095af4bfef.jpe

15.选择钢笔工具,画出一个月牙形,并设置一下属性。

img_29e8fd1008defe0838fae3df1751f9e1.jpeimg_bd8c5fab69a765a0b6e5cbd04f0e9dc3.jpeimg_b5a4586032b400217665f80499b109fc.jpeimg_3bb69bc1d457eccd48fc397b7e488334.jpe(注意一下位置,eye_grid中只有2个椭圆,路径不在里面)

16.画闭着眼睛的鸟。用椭圆工具画出3个园,属性分别为。

img_4b2223569a01b3686c844d02f041e9f1.jpeimg_112676e06e12d60816b669c1b7c334f8.jpeimg_0408c36dedd6dfba760764f791dd4174.jpe

17.用钢笔工具绘制一条曲线。设置如下属性。

img_df789e55229501ae0e1e6ed494aea657.jpeimg_3ebfd2ede59ff70db19907c413ade9a8.jpe

18.将3个园和一个路径合并到一个grid中,并命名为eyesClosed。然后将eyesClosed的opactity属性设为0.

img_8e2bae8dcb2047948657211882e1bfd6.jpe

19.选择钢笔工具,绘制一个路径。设置如下属性。

img_95e16a73e42b4754e44286d58e3037a7.jpeimg_5d15f94b8bd2c21416a6a420d846ca61.jpeimg_c38cc145123d883916c1a4fd3b873e5d.jpe

20.复制路径。设置如下属性。完成后将两个路径合并到一个grid中,命名为wingDown。

img_7ff4d5b7b018e7d6290089642e372996.jpeimg_4ec75c96cebbae638f3c094f7f46e2f5.jpeimg_27658d69ea59af1341bb9b2bd5b6f1b1.jpe

20.将19步的路径复制,然后移动到合适位置。然后将改路径放入grid中,命名为wingUp。然后将wingUp的opacity设置为0.

21.到这里我们的小鸟完成了。将所有的元素放到一个canvas中,命名为sbird。

img_e066ccce57b924e560ebb03721e3e912.jpe

22.按F6开始动画设计。点击左下角的state,状态管理器。新建state group命名为Loop。然后再该组新建state命名为Hover。

img_deef240e001fd95f609b7b43d5046167.jpe

23.然后回到object and timeline面板,在sbird元素和tai元素的0帧处添加关键帧。(那一排0旁边的那个按钮就是添加关键帧按钮)

img_55295ed20f73d06674783f1131aa0013.jpe

24.选择sbird元素,将时间指针调到0.5s处(就是那根黄色的线)。然后按住方向键中的↓,让sbird元素向下位移一段距离。

img_91ff453c7390d8424452b7f10cc37ab4.jpeimg_6707e686fde3883bdd143cad7c5baf00.jpe

25.将时间指针调到1s处,然后按住方向键中的↑,让sbird元素回到原来位置。(tip:你可以先选中sbird元素在0s的关键帧,右击选择copy,然后将时间指针调到1s处按ctrl+v)。

img_fd57e184498da551b153ec9f65c11679.jpe

26.选中tail元素,将时间指针调到0.5s处。在属性面板中的transoft类别中,选择转换。在angle中填入你要让尾巴摆动的幅度。

img_74907b142d1494423d709599cc2b5940.jpeimg_1e5a3a0e6afdcfe2d7c2dd959e22c6e8.jpeimg_fe96cd6062c9f98f6de06f9e2f9ab548.jpe

27.继续保持tail元素为选中状态,然后将时间指针调到1s处。在angle处输入0,小鸟尾巴变回原来形状。

28.点击0s处得关键帧,右边出现属性面板,将easing变成如图所示。(0s处有2个关键帧!)

img_66dc5ae22bd1e29f9c6260c2893490a4.jpeimg_434197dd7b3e08832b310309ba9e6a48.jpe

29.点击0.5s处的关键帧。设置如图的属性。(0.5s的两个指针设置属性相同)。

img_89ad6b84479e0a2529f2e8255a615e4b.jpe

30.点击1s出的关键帧,重复29的步骤。属性设置为上图。完成后可以点击播放按钮看一下效果,小鸟是不是在上下动了。最后一步,点击hover,然后在属性面板将repeatbehavior属性设为forever。

img_c172078568ceec550d08c322e2d0a478.jpeimg_0ed779029fbe8ce33e003deaef544511.jpe

31.让小鸟眨动眼睛。在左下角的state面板中新建state group命名为Eye,然后新建两个state,分别命名为Blink,NoBlink。选中Blink开始动画。

32.选中eyesClosed元素,分别在0,1 , 1.03 ,1.18 ,1.21 , 3.7 ,3.73 ,3.89 ,3.92 ,4.8 ,4.83 ,4.99 ,5.02处设置关键帧。

img_8cca6f7bcd848b8b26e14992585ef96d.jpe

33.保持eyesClosed元素为选中状态,分别点击1.03, 1.18 , 3.73,3.89,4.83, 4.99处得关键帧,将eyesClosed元素的opacity属性设置为100.

img_85479180dfacde9cb6a87e1c98aefee8.jpeimg_cf2a5d6c6ff6bf2fead0f16b67aa7895.jpeimg_3b8a26cc58b49cae1b7f88c6f569419c.jpe

34.分别点击每个关键帧,按照下图更改每个关键帧的属性。

img_3eb0f3ec557f4450dfdae1a81d0d70da.jpe

35.完成后按播放键,发现小鸟是不是开始眨眼了。选中Bink,然后在属性面板将repeatbehavior属性设为forever。最后一步,让小鸟会飞。

img_20f4cf5d5799e3af966ee9f8095a4e20.jpeimg_17c951999b7357f75e0940eb027c8a04.jpe

36.点击左下角的state面板,新建state group命名为Wing,然后新建state命名为Wings。

img_f5b1a2e70660834fed61a5de4afac648.jpe

37.选择wingDown元素,然后在0,  0.1,   0.117, 0.233处设置关键帧。(对wingUp元素做同样处理)

img_a1e79f7972459f38e362980fd2b881df.jpe

38.先保持wingDown元素为选中状态,然后在0.117s处修改wingDown元素的opacity属性。将opacity改为0.

img_e22ebf023c01b3ff7873f84e6d71e707.jpeimg_49efd61470e5d4598738185bf8cf9526.jpe

39.保持wingUp元素为选中状态,然后在0.117s处修改wingUp元素的opacity属性。将opacity改为100.

img_da616ccb3e91325ed582cad2dbaf58ff.jpeimg_85d66246f23a6aca9d07b6ac83dadbb7.jpe

40.选中wings,然后在属性面板将repeatbehavior属性设为forever。

img_5e91f700770f4fd0d881e8c639e769b0.jpeimg_f2363e252eaced64e1138a201cef1b80.jpe

41.最后的最后,让你的小鸟在页面中运行。按F6退出动画模式,在VS中写入代码。没有VS的童鞋直接copy代码吧。

img_227df53fc2cb978cb133f9600af6a81e.jpe

42.在最外面的LayoutRoot中添加loaded事件。

img_3f494591c804882e708338b2a19d9ee2.jpe

43.在bird的cs文件中写入事件。

img_42d3188c817825e97c439603309e3db2.jpe

44.打开appApp.xaml.cs文件将Application_Startup事件做一些改动。

img_3cf02309f4a56c24743c4e1871ce7e5e.jpe

this.RootVisual=new bird();这里的bird就是你要启动的项目,比如你项目中还有个cat文件呀作为启动项,这里就是cat。

45.完工,按F5在页面中看看你的小鸟吧。

img_1ff1120f7b6ee8b1ebd29788bcb39d69.jpe