有个问题想请教下大家,我仿了腾讯的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翻转效果,很多人都对页面切换很疑惑,希望对大家有帮助吧,我争取在下个星期之前发出来。