silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）

原文:silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）

有个问题想请教下大家，我仿了腾讯的SL版QQ，相似度95%以上。我想写成教程教大家怎么开发出来，会不会有版权什么问题的。

最近一直比较懒，迟来的第三章！

首先打开我们前面的项目吧。

1.接着做完我们还差一点的美工。首先，新建一个usercontrol，命名为tree.

2.选择钢笔工具绘制路径。顺便说一句做好美工，钢笔工具是基础。这棵树有点复杂，我直接给出效果图了，大家可以自己去画个简单点的试试！

3。我们画树的目的不是教大家怎么使用钢笔，练习自己去就好了，这边有个小知识点，大家经常会纠结的地方。

4.再次新建一个usercontrol，命名为bigtree.

5.还记得怎么在一个页面中引用另一个不。打开bigTree的XMAL的代码界面。引入命名空间，然后引入我们的tree.

6.既然叫bigtree，就要把树放大。有些同学直接选中然后拖拉，发现框的大小改变了，可是树的大小一点也没变。如下图。

7.其实这个tree是我们引用过来的，拖拉只能改变位置大小，改变不了原来文件中的树大小。其实大家想想，树的大小改变了树不就是变形了嘛，所以我们要用变形来改变树的大小。选中树，然后改变属性面板的transform的scale的值。

8.树的大小改变了吧。也许你看到X的值为负值有点疑惑，你可以对比下我们的2棵树，发现是不是沿X轴翻转了。大家可以将这些值改变正负看看效果。

9.好了，到这边，我们的准备工作已经结束了，下面开始把所有东西整合到一起。打开MainPage.xaml。然后将part所有的项目添加进去。

10.然后回到设计界面将他们调整大小放到对应的位置。

11.使用矩形工具绘制一个矩形，按照下图设置属性。你可能需要调整一下元素的顺序。

12.使用钢笔工具绘制一个矩形，设置一下属性。

13.选中路径，在属性面板添加Effct特效。

14.复制路径，设置一下属性。

15.选中layoutroot，设置如下属性。

16.给树和云朵加上阴影特效。

17.对另一颗树做同样处理。

18.在最下面新建一个grid，将整个可视区域覆盖。

19.新建一个stroyboard，命名为sunraise.在零处添加关键帧，并将grid填充为黑色。

20.然后再10S处设置关键帧，将背景改为透明。

21.选中layout元素，在0s处添加关键帧。然后将时间轴拉到8S处，按照下图设置属性。

22.在14s处设置关键帧，然后将第4个渐变点拉到51%

23.选中sun元素，然后再0s和8s处分别设置关键帧。

24.在8S处将太阳往上位移一段距离。

25.黑夜到黎明的动画完成，可以先预览以下。接下来新建一个stroyboard，命名为birdfly.

26.选中左边的那只小鸟，然后再1.5s，3.5s,4.5s,11.5s,15s处设置关键帧。

27.然后你想你的小鸟怎么飞走，就在不同的关键帧处设置你的小鸟的位置。

28.选中每个关键帧，添加过渡效果。

29.新建一个stroyboard，命名为birdmove.

30.在6S和10S处分别设置关键帧。然后在10S处将在下面的小鸟移动到上方可见区域。

31。下面还有汽车移动，云朵移动都是同样的处理手法，我这边就不在写一遍了，大家自己试验下吧。都是用的位移实现动画。

32.下面还有个logo的显示，新建一个stroyboard，命名为show。

33.在0s,1s,7s,8s处分别设置关键帧。

34.在0S处将logo的transform的scale属性设为0.，在1S处将logo的transform的scale属性设为0.5（具体大小自己调）

35.在7s处得关键帧将logo的transform的scale属性设为0.5，在8S处将logo的opacity属性设置为0.

36.到这里我们的动画整合就结束了，当然你也可以添加一些背景音乐，具体的操作参照我前面写过的一篇文章把。

37.下面我们需要写入一些代码，让动画运行起来。

给每个动画加入completed事件，然后完善后台代码

哪个动画结束后，开始哪个动画，可以根据自己的喜好来决定。到这里我们就完成了所有的工作。

这章写了很久，个人比较懒，呵呵。下面还有篇额外篇，写的是sl中网页切换，我用的是3D翻转效果，很多人都对页面切换很疑惑，希望对大家有帮助吧，我争取在下个星期之前发出来。