silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)

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

最近一直比较懒,迟来的第三章!

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

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

2011052609164448.jpg

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

2011052609184982.jpg2011052609185322.jpg

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

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

2011052609204138.jpg

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

2011052609270593.jpg2011052609273462.jpg

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

2011052609290065.jpg

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

2011052609331712.jpg2011052609332293.jpg

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

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

2011052609400016.jpg

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

2011052609585653.jpg2011052609590352.jpg

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

2011052610042375.jpg2011052610051080.jpg2011052610051751.jpg2011052610052769.jpg

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

2011052610091292.jpg2011052610092651.jpg2011052610093281.jpg

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

2011052610250220.jpg2011052610250980.jpg2011052610251528.jpg

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

2011052610393398.jpg2011052610393946.jpg

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

2011052610434255.jpg2011052610434862.jpg2011052610435673.jpg2011052610440282.jpg2011052610440779.jpg2011052610441895.jpg2011052610444471.jpg

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

2011052808564943.jpg2011052808565416.jpg2011052808570045.jpg

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

2011052808581234.jpg2011052808581833.jpg

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

2011052809012510.jpg

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

2011052809035131.jpg2011052809040068.jpg

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

2011052809055738.jpg

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

2011052809112775.jpg2011052809113398.jpg2011052809113890.jpg2011052809114481.jpg2011052809115513.jpg2011052809120179.jpg

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

2011052809142487.jpg

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

2011052809163260.jpg

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

2011052809172961.jpg

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

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

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

2011060909541974.jpg

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

2011060909561460.jpg2011060909562368.jpg

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

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

2011060910025153.jpg

2011060910030251.jpg2011060910031082.jpg

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

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

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

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

2011060910220490.jpg2011060910221237.jpg

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

2011060910261081.jpg2011060910263969.jpg

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

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

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

2011060912133415.jpg

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

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

转载于:https://www.cnblogs.com/WWLB/archive/2011/06/09/WWLB.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值