silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）

原文:silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）

这章有点长，所以我分成了两章。这一章主要是准备工作，差不多算美工篇吧，这章基本不会介绍多少动画效果，主要讲的是blend中工具的使用，利用哪些工具做出哪些效果。下一章会教你怎么样把这些给组合起来实现动画效果。这张的源码我会上传，可是不会传，哪位知道的留言告诉我一下。

开始之前我想抱怨下，前几天要实现一个效果，去网上搜资料，资料找到了。但是，给你了一张效果图，然后是一堆代码。代码虽然能看懂，但是我才不信是你自己写出来。你要是把那么多代码靠自己写出来，我佩服。我觉的非常不好，你没时间至少写点简单步骤好不，不要一张图，尼玛一堆代码，你给谁看的啊！当然这个原因也是我写教程的原因，教大家怎么样真正的接触silverlight，WPF的UI设计。大家觉的好的帮忙顶顶，让更多的人看到。

再说一句，贴代码的那些最讨厌了。我们的目标是没有代码，偶也！顺便说一句，大家觉的有哪些网站什么的动画特效不错的，可以留言，我帮大家做成教程。

开始我们的教程

1.打开我们前面的项目，在parts文件夹中新建一个usercontrol，命名为cloud.

2.选择钢笔工具绘制路径，先大概画出一朵云得形状。现在看不出来云，等会就会像了

3.选择工具栏上的第二个指针，direct section。然后按住alt键，在路径的顶点上拖一下，出现两个小点，然后通过拖拽小点来改变弧度。（你点在顶点上出现的两个点是你一这点为中心旁边控制旁边两条线，点在路径上出现的两个点是控制这条线条的两个点）。

不会画云得童鞋给你们代码，复制到data中就可以

（M282.5,0.5C343.389,0.499996 396.713,25.4695 426.178,62.8495L426.268,62.9694L433.421,62.6282C436.097,62.5431 438.79,62.5 441.5,62.5C528.209,62.5 598.5,106.6 598.5,161C598.5,215.4 528.209,259.5 441.5,259.5C411.694,259.5 383.828,254.289 360.09,245.24L359.604,245.044L355.335,246.73C333.301,254.914 308.595,259.5 282.5,259.5C231.759,259.5 186.272,242.16 155.467,214.748L154.956,214.282L153.178,214.492C146.599,215.156 139.86,215.5 133,215.5C59.8223,215.5 0.5,176.325 0.5,128C0.5,79.6751 59.8223,40.5 133,40.5C139.86,40.5 146.599,40.8443 153.178,41.5082L159.024,42.1976L160.89,40.6527C191.487,15.9149 234.658,0.499996 282.5,0.5z）

4.按照下图，在属性面板使用渐变画刷填充Fill。

5.按照下图，使用纯色画刷填充stroke。

6.利用同样的手法在云得内部画一个小点的云朵。

路径（M231.5,0.5C282.862,0.499999 324.804,24.8699 327.375,55.5153L327.381,55.6152L329.986,55.7143C371.84,57.8395 404.5,75.5127 404.5,97C404.5,101.118 403.3,105.097 401.066,108.852L400.676,109.467L402.765,109.262C408.494,108.762 414.425,108.5 420.5,108.5C469.101,108.5 508.5,125.289 508.5,146C508.5,166.711 469.101,183.5 420.5,183.5C388.606,183.5 360.674,176.269 345.24,165.445L344.554,164.937L343.491,166.146C326.642,184.226 293.78,196.5 256,196.5C207.058,196.5 166.369,175.902 158.054,148.767L157.987,148.53L157.12,149.153C140.656,160.424 116.906,167.5 90.5,167.5C40.7944,167.5 0.5,142.428 0.5,111.5C0.5,80.5721 40.7944,55.5 90.5,55.5C106.033,55.5 120.647,57.9484 133.399,62.2589L135.803,63.1188L135.78,62.9625C135.594,61.4897 135.5,60.0015 135.5,58.5C135.5,26.4675 178.481,0.499999 231.5,0.5z）

7.渐变填充值。把100%处得改下就好了

8.用纯色填充stroke。

9.将两个路径放到一个canvas里面。

10.我们的云朵做完了，绘制云朵我们用了钢笔工具，我觉的要想做好美工钢笔工具是基础的基础。

11.车开动的时候会上下有轻微颠簸，我们把这个颠簸状态单独拿出来做成一个类似usercontrol.有点类似于NET的web开发中的用户自定义控件。接下来我们开始车的状态的制作，素材图片。

12.在项目中新建一个images文件夹，将图片放入。

13.在parts文件夹中新建一个usercontrol，命名为car。

14.将layoutroot的宽，高设为400*200.然后将图片拖入，调整位置。

15.新建一个stroyboard，命名为salta。然后按F6进入动画模式。

16.在0s,3s,5s处设置关键帧。

17.将时间轴（那根黄线）拉到1s处，然后在transfrom类别中将Y的值改为2.同样处理在2s处。

18.在1.5s,2.5s处将Y的值改为1.也许你会发现你1.5s和2.5s处得值本来就是1，但是你还是要在这边添加一个关键帧，你添加了关键帧，动画到这边时就要执行一个过渡效果。你可以试试效果有什么不一样。

19.在0.35s,0.45s处将Y值改为-1，在0.4s处将Y值改为-2.

20.最后选中salta，将它的repeatbehavior设置为forever。

21.点击播放按钮看下效果，是不是又上下颠簸的效果了。

22.还记得我们第一章做的小鸟不，同样将它做成一个会飞走的小鸟控件。

23.新建一个usercontrol,重命名birdgo.xaml。

24.代开代码界面，这边我们要用一些代码来实现。这句代码的意思相当于引入命名空间。我们这边引入的是我们项目名称，这样我们就可以调用项目中的文件。

25.添加引用之后开始调用我们以前做的小鸟。看，我们打了local之后出来我们可以调用的东西了吧。如果还是找不到，看下你项目的命名空间，或者把项目重新编译一下。

26.回到设计界面，可是让小鸟飞走。

这里的鸟是会动的哦，如果你鸟没动或者动了一次，你就是前面的动画repeatbehavior的属性没设问哦forever.

27.新建一个stroyboard，命名为leave.

28.在将时间指针移到1.2s处，然后将小鸟拖到右上方就可以了（要在可视区域外面）。我这样是直接飞出去，你可以随便设一些关键帧将小鸟放在不同位置，小鸟就会按照你设定的方向飞出去了。完成后按播放按钮试一下吧，是不是很飞走了。

29.好了，又完成了一小块的内容。下面还是一个动画的处理。效果就是一张图片从远处越来越大，然后越来越小，产生一种从远方过来的视觉效果。这个效果在图片展示，弹出框中用的很多。大家最好找一张透明背景的图片，我这边是我画出来的。

30.新建一个usercontrol，命名为logo。

31.才canvas里面放一张图片，我的canvas是我画的东西。包裹两层的canvas。

32.新建一个一stroyboard.命名为come.

33.选中最外面层得canvas在0s出设置关键帧，然后再transform类别的scale属性改为0.

34.将时间指针拖到1s处，然后transform类别的scale属性改为0.8.(你自己觉的多少大小合适)。

35.在7S出设置关键帧。（1s-7s是画面显示的时间）

36.将时间指针拖到8s处，然后修改opacity的值。

37.完成后，按播放键可以看下效果。

到这里，我们的准备工作已经差不多了。接下来我们把这些全部放到mainpage里面去。不过这是下一章得内容了，下一章，我们将把所有的组合起来形成一个完整的动画。

期待下一章吧，大家觉的好的多多推荐哈。

我们的目标是没有代码，偶也！

http://files.cnblogs.com/WWLB/Animals.zip