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

猜你喜欢

转载自www.cnblogs.com/lonelyxmas/p/9828732.html