分享程序员开发的那些事...
更新时间：2022-08-31 13:12:19
有个问题想请教下大家，我仿了腾讯的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翻转效果，很多人都对页面切换很疑惑，希望对大家有帮助吧，我争取在下个星期之前发出来。